千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
P16 016-Vue高频面试题-4
43.什么是Vue.nextTick()？
1、$nextTick是在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM，意思是等你DOM加载完毕之后再去调用nextTick()里面的数据内容。
44.nextTick知道吗？实现的原理是什么？是宏任务还是微任务？
微任务
原理：nextTick方法主要是使用了宏任务和微任务，定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空队列。
作用：nextTick用于下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用nextTick用于下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用nextTick，则可以在回调中获取更新后的DOM。
45.虚拟DOM为什么会提高性能？
虚拟DOM其实就是一个js对象。通过这个js对象来描述真实DOM，真实DOM的操作，一般都会对某块元素的整体重新渲染，采用虚拟DOM的话，当数据变化的时候，只需要局部刷新变化的位置就好了。
虚拟DOM相当于在js和真实DOM中间加了一个缓存，利用DOM diff算法避免了没有必要的DOM操作，从而提高性能。
具体实现步骤如下：
1）用js对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档当中。
2）当状态变更的时候，重新构造一棵新的对象数。然后用新的树和旧的树进行比较，记录两棵树差异。
3）把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新。
46.你做过哪些Vue的性能优化？
1）首屏加载优化
2）路由懒加载
3）开启服务器Gzip
开启Gzip就是一种压缩技术，需要前端提供压缩包，然后在服务器开启压缩，文件在服务器压缩后传给浏览器，浏览器解压后进行再进行解析。首先安装Webpack提供的compression-webpack-plugin进行压缩，然后在vue.config.js
4）启动CDN加速
我们继续采用cdn的方式来引入一些第三方资源，就可以缓解我们服务器的压力，原理是将我们的压力分给其他服务器点。
5）代码层面优化
①computed和watch区分使用场景
②v-if和v-show区分使用场景。
③v-for遍历必须为item添加key，且避免同时使用v-if。
6）Webpack对图片进行压缩
7）避免内存泄露
8）减少ES6转为ES5的冗余代码
47.Vue的常用修饰符
1）v-model修饰符
①.lazy：输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据
②.trim：输入框过滤首尾的空格
③.number：先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字
2）事件修饰符
④.stop：阻止事件冒泡，相当于调用了event。stopPropagation()方法
⑤.prevent：阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件
⑥.self：只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡
⑦.once：事件只能用一次，无论点击几次，执行一次之后都不会再执行
⑧.capture：事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡
⑨.sync：对prop进行双向绑定
⑩.keyCode：监听按键的指令，具体可以查看vue的键码对应表
48.Vue中template的编译过程
vue template模板编译的过程经过parse()生成AST(抽象语法树)，optimize对静态节点优化，generate()生成render字符串之后调用new Watch()函数，用来监听数据的变化，render函数就是数据监听的回调所调用的，其结果便是重新生成vnode。当这个render函数字符串在第一次mount、或者绑定的数据更新的时候，就会被调用，生成Vnode。如果是数据的更新，那么Vnode会与数据改变之前的Vnode做diff，对内容做改动之后，就会更新到我们真正的DOM
49.谈谈你对Vue3有什么了解
六大亮点
1）性能比vue2快1.2倍-2倍
2）支持tree-shaking，按需编译，体积比vue2更小
3）支持组合API
4）更好的支持TS
5）更先进的组件
性能比vue2快1.2倍-2倍如何实现的呢
1）diff算法更快
vue2是需要全局去比较每个节点的，若发现有节点发生变化后，就去更新该节点
vue3是在创建虚拟DOM中，会根据DOM的内容会不会发生内容变化，添加静态标记，谁有flag，比较谁
2）静态提升
vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染vue3中对于不参与更新的元素，会做静态提升，只被创建一次，在渲染时直接复用即可
3）事件侦听缓存
默认情况下，onclick为动态绑定，所以每次都会追踪它的变化，但是因为是同一函数，没有必要追踪变化，直接缓存复用即可
在之前会添加静态标记，会把点击事件当做动态属性，会进行diff算法比较，但是在事件监听缓存之后就没有静态标记了，就会进行缓存复用
为什么vue3体积比vue2小
在vue3中创建vue项目，除了vue-cli，Webpack外还有一种创建方法是vite，vite是作者开发的一款有意取代Webpack的工具，其实现原理是利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去Webpack冗长的打包时间
50.vue3的组合API
说一说vue3的组合API和之前vue2在完成业务逻辑上的区别
在vue2中：主要是网data和method里面添加内容，一个业务逻辑需要什么data和method就往里面添加，而组合API就是有一个自己的方法，里面有自己专注的data和method。
组合API的本质：首先Composition API和Option API可以共用Composition API本质就是把内容添加到Option API中进行使用。
51.ref和reactive的简单理解
1）ref和reactive都是vue3的监听数据的方法，本质是proxy。
2）ref基本类型复杂类型都可以监听(我们一般用ref监听基本类型)，reactive只能监听对象(arr，JSON)。
3）ref底层还是reactive的二次包装，ref定义的数据访问的时候要多一个.value。
52.Vuex和redux有什么区别？他们的共同思想？
Redux和Vuex区别
1）Vuex改进了Redux中的Action和Redux函数，以mutations变化函数取代Reducer，无需switch，只需在对应的mutation函数里改变state值就可以
2）Vuex由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的state就可以
3）Vuex数据流的顺序是：View调用store.commit提交对应的请求到Store中对应的mutation函数 -- store改变(vue监测到数据变化自动渲染)
共同思想
1）单一的数据源
2）变化可以预测
3）本质上：Redux和Vuex都是对MVVM思想的服务，将数据从视图中抽离的一种方案
4）形式上：Vuex借鉴了Redux，将store作为全局的数据中心，进行数据管理
