记录一些前端vue面试

记录一些前端面试：

关于vue的题目

1. 对于vm.nextTick的概念、场景用法、原理解释。
2. 组件之间的传值方法有哪些？
3. v-show 和 v-if 的区别？
4. v-for 中的 key 属性的作用 和 如何避免重复？
5. vue 的生命周期运行顺序什么？ 常用的有哪几个？
6. vue 的事件修饰符有哪些？(常用的)
7. vue 的 watch 监听中 immediate 参数的作用？
8. vue中 v-for 和 v-if 混用注意的地方

答案

1、对于vm.nextTick的概念、场景用法、原理解释。
概念：nextTick接收一个回调作为参数，它的作用是在下次DOM更新后执行回到函数。
（注：如果在没有提供回调函数且在支持Promise的环境中 会返回一个Promise）

原理：
“下次DOM更新时” 具体是指什么时候？
在vue中 当组件状态发生改变时，watcher 会得到通知，然后触发DOM渲染流程。但是这个过程是异步的。因为vue.20后使用虚拟DOM渲染，所有侦测到的变化只发送到组件，当一个组件有两个状态改变的话 是不可能让它渲染俩遍的，会把状态改变的通知缓存到一个列表中，最后在一次推送到渲染队列。（等所有状态改变完成，一次性组件的状态渲染到最新）。异步任务 分为俩种：微任务（队列）和宏任务（队列）。在事件循环中，当执行栈中的任务执行完毕后会先去检查微任务队列中是否有事件，有则执行（将队列中的事件都执行完），然后检查宏任务队列，在执行宏任务队列中的事件，再检查微任务队列。。。。循环下去就是事件循环。
那下次DOM更新时 是什么时候呢? 就是当执行栈中的任务执行完毕后第一次执行微任务的时候。而nextTick就是将 回调函数添加到微任务队列。只有在特殊时候才降级成宏任务，例如在微任务中更新DOM会延时到宏任务。
更新DPM的回调也是有vm.$nextTick来注册到微任务队列中的。所以一定要在更改数据后在使用nextTick钩子函数。
在一轮事件循环中 有多个 nextTick函数时 并不会反复的将回调添加到队列中，而是先将回调存在一个数组中 一次添加到队列中 并且在触发任务时 依次将回调执行。

2、组件之间的传值方法有哪些？
父子组件之间的传值：
父→子：props属性；
子→父：emit事件回传；
非父子组件：可以使用bus.js 和 vuex 。

3、v-show 和 v-if 的区别？
v-show：节点只是隐藏起来（display:none） 还是会在DOM树上渲染 方便切换。
v-if：不会在DOM树上面渲染 切换 对内存的开销稍微大一点。后面可以跟v-else。

4、v-for 中的 key 属性的作用 和 如何避免重复？
可以理解为 用它来标记 循环出来的虚拟DOM的标识符，在每次状态更新（被遍历数组的增删改）时，为了vue 更能准确的找出那些DOM被修改了 那些没有改变 从而做出正确的应对。应该用数据中的 id 或者其他不重复的数据来当key值。

5、vue 的生命周期运行顺序什么？ 常用的有哪几个？
beforeCreate→created→beforeMount→mounted→beforeUpdate→updated→beforeDestroy→destroyed。
常用的有 created、mounted
6、vue 的事件修饰符有哪些？(常用的)
stop：阻止事件冒泡
capture：使用事件捕获模式
once：一次性触发事件
self：仅仅时DOM 自身触发事件 不能通过 冒泡 或者 事件捕获来触发。

7、vue 的 watch 监听中 immediate 参数的作用？
当immediate设置为true时，立即以表达式的方式触发回调，当在子组件中监听props传过来的父组件的值时 第一次改变的时候是不会触发监听回调的 设置这个值 可是立即调用一次。

8、vue中 v-for 和 v-if 混用注意的地方？
v-for的优先级比v-if高。例如：

<li v-for='item in list' v-if='item.flag></li>	//这相当于在渲染出来的每一个li上面添加了 v-if