腾讯云智研发前端校招二面

腾讯云智研发前端，校招二面，base武汉，时长30分钟左右
基本就是根据简历来问，深入细节，扩大广度

1.简历

上的实习项目经历，问的比较详细，比如具体的某一个业务流程
（如进行单元测试的部分具体举个例子，路由懒加载优化可视化提升的依据）

2.怎么实现免登陆

使用token保存用户登录信息，实现会话期间切换页面免登陆。在切换路由页面时验证token令牌的正确性实现保存用户状态免登陆。
将登录信息保存在cookie中，当访问网站时，cookie发送给服务器，服务器验证cookie中的登录信息是否过期，判断是否需要重新登陆还是直接进入。实现n天免登陆。

3.本地存储

除了storage和cookie，本地还有什么存储方式。

Service Workers：作为web应用和服务器间的代理服务器，缓存本地资源，实现离线web应用。
IndexDB：IndexDB是一个事务型数据库，使用JavaScript面向对象管理，可以存储结构化克隆算法支持的任何对象。
WebSQL：在浏览器上模拟的数据库，可以使用JS完成对数据的读写，关系型数据库。

4.Vue响应式

Vue响应式场景：模板渲染更新DOM，数据双向绑定，计算属性，监视属性。响应式数据。

Vue 能够跟踪对响应式对象属性的访问与更改操作

Vue2与3响应式的区别。Vue2.0响应式使用Object.defineProperty方法递归劫持每个属性，开销大。而且对于数据属性的增删和Api无法监听，需要重写。Vue3.0使用Proxy生成全新的代理对象，可以直接劫持所有属性和方法。(Proxy响应式缺点：兼容性，不支持IE11以下)

5.Computed原理

深入Vue响应式原理。一个能自动跟踪其依赖的副作用(函数/方法)，它会在任意依赖被改动时重新运行。我们称其为响应式副作用。computed内部通过使用响应式副作用来管理失效和触发重新计算。
computed使用时定义get和set方法实现响应式，监视依赖的数据，作为依赖数据的订阅者。在依赖数据变化的时候，通过作为一个订阅者，被通知依赖数据变化，需要重新运行。

6.CSS响应式方法

响应式布局响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

媒体查询
CSS3新增了不同的媒体查询，可以在不同条件下自动使用不同的样式表进行渲染。

@media screen and (max-width: 1920px) { ... }

百分比%
在设计样式表的时候使用%作为统一单位，可以使样式在不同父元素尺寸下进行变化。
缺点：不同样式属性百分比相对耳朵单位并不一致，很难统一简洁的设计样式表。
vw/vh
vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。使用vw/vh作为单位的效果比直接使用%更好。
尺寸转换
rem是相对于根元素字体大小变化的尺寸。1rem = 1 font-size(根html元素)。所以可以获取到不同媒体屏幕的尺寸，从而设置不同的rem大小，然后统一使用rem进行样式表设计。

//动态为根元素设置字体大小
function init () {// 获取屏幕宽度var width = document.documentElement.clientWidth// 设置根元素字体大小。此时为宽的10等分document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

框架
element ui、antd、bootstrap提供的栅格布局实现响应式