面试大纲-vue篇

Q：vue项目为什么需要在列表组件中写key，其作用是什么？
A：key的作用就是在更新组件时判断两个节点是否相同，相同就复用，不相同就删除旧的新建新的。组件带唯一的key时每次更新都会销毁重新创建组件，不会造成状态污染。

Q：vue的双向绑定，model如何改变view，view又是如何改变model的？
A：核心是利用object.defineProperty劫持传进来的数据，然后在数据getter的时候订阅重新编译模板的消息，然后通过js监听元素事件监听元素输入值的变化，将新的直重新赋值给被劫持的data，这样就会触发setter函数，在setter函数中就会重新发布新编译模板的消息。

Q：Redux和Vuex的设计思想
A：共同点：都是为了处理全局状态的工具库，大致实现思想都是全局state保存状态在需要使用和修改的组件处去操作这个值；
不同点：最大的区别是在处理异步时，vuex时多了一步commit操作，在action之后commit处理异步，而在redux是通过中间件处理。

Q：在vue中，子组件为什么不可以修改组件的prop，如果修改了，vue是如何监控到属性的修改并给出警告的？
A：因为props是单向数据流，这种做法易于监测数据的流动，一个父组件不止一个子组件并且使用这个prop数据的组件也不是唯一的，如果子组件都能修改prop的的话，将导致修改数据的源头不止一处。在initProps的时候会对defineReactive操作，在触发set函数时会进行判断，如果不是root根组件并且不是更新子组件，那么就说明更新的是prpos就会触发警告。

Q：为什么Vuex的mutation和Redux的reducer中不能做异步操作？
A：因为修改state的函数必须是纯函数，统一输入统一输出，没有任何副作用，如果有异步操作的话成功和失败不可预测，vuex和redux捕获不到异步的结果从而不能进行对应操作。

Q：双向绑定和vuex是否冲突？
A：vuex规定了单向数据流，把vuex的state放到v-model双向绑定报错是代码问题和冲突没有关系。应当在input的change或input事件中调用mutation修改state的值并给input的value绑定vuex中的state，或者使用带有setter的双向绑定计算属性。

Q：vue的响应式原理中Object.defineProPerty有什么缺陷？为什么在vue3.0中使用了Proxy，抛弃了Object.defineProperty?
A：object.defineProperty无法监控到数组下标的变化，导致了直接通过数组的下标给数组设置值时不能实时响应，必须通过数组的操作方法进行修改push()，pop()，splice()等八种方法。Proxy可以劫持整个对象并且返回一个新对象有13中劫持操作。

Q：vue的父组件和子组件生命周期钩子执行顺序是什么？
A：
加载过程：父beforeCreate，父cå¬reated，父beforeMount，子beforeCreate，子created，子beforeMount，子mounted，父mounted；
子组件更新过程：父beforeUpdate，子beforeUpdate，子updated，父updated；
父组件更新过程：父beforeUpdate，父updated；
销毁过程：父beforeDestroy，子beforeDestroy，子destroyed，父destoryed。

Q：vue在v-for时给每项元素绑定事件需要用事件代理吗？
A：不需要用，事件代理时为了避免我们逐个去给元素新增和删除事件，从vue的角度上看，在v-for时直接会给每个元素绑定上事件，当组件销毁时，vue会将所有事件处理器移除并且给元素绑定的都是相同的事件，所以不需要用事件代理。

Q：vue渲染大量数据时应该怎么优化？
A：
1、添加骨架屏或者loading，优化用户体验；
2、利用服务器渲染SSR，在服务器端渲染组件；
3、避免浏览器处理大量dom，比如懒加载，异步渲染组件，使用分页；
4、对于固定的非响应式数据使用Object.freeze冻结。

Q：vue是如何对数组方法进行变异的？例如push、pop、splice等
A：因为vue2是使用object.defineProperty对数据拦截，这个方法不能监听数组内部变化，数组长度的变化，数组的截取变化等，所以需要对这些方法内部加上自定义逻辑，在数组实例与他的原型之间插入新的原型对象，在这个新的原型对象上调用了真正数组原型的方法。

Q：谈一谈nextTick的原理
A：nextTick方法主要是使用的宏任务和微任务，定义了一个异步方法，多次调用nextTick会讲话方法存入队列中，通过这个异步方法清空队列。

Q：Vue中的computed是如何实现的？
A：computed本身是通过代理的方式代理到组件实例上的，所以读取计算属性的时候，执行的是一个内部的getter，而不是用户定的方法。computed内部实现了一个惰性的watcher，在实例化的时候不会去求值，其内部通过dirty属性标记计算属性是否需要重新求值。当computed依赖的任一状态发生变化，都会同志这个惰性watcher，让它把dirty属性设置为true。所以再次读取这个计算属性是就会重新求值。

Q：Vue中的computed和watch的区别在哪？
A：computed是由data中的已知值得到一个新值，这个新值只会根据已知值变化而变化，其他不相关数据的变化不会影响该新值。别人变化影响自己。
watch监听data中数据的变化，监听的数据就是data中的已知值，我的变化影响别人。

Q：v-if、v-show、v-html的原理是什么，它是如何封装的？
A：
v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；
v-show会生成vnode，render的时候会渲染成真实的节点，只是在render的过程中会在节点的属性中修改display；
v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。