vue常见面试题

春节期间每天一道面试题，整理出20道。有些问题回答看似简单，但实际上也是查阅了官方文档，源码，并可以对问题相关知识点进行扩展。所以本文并非是标准，只作为参考。

1. Vue 中v-if和v-for哪个优先级高？如果两个同时出现，应该怎么优化得到更好的性能？

v-if 与 v-for 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能。
v-if 和 v-for 在模版编译后会执行函数 _l（渲染列表，即renderList），

格式如下： _l((arr),function(e,i){return (arr.length)?_c(...):_e()})

• 第一个参数为数组arr，
• 第二个参数为函数，函数返回值即 v-if 产生的三目运算。参数为v-for遍历的参数

由此可以看出，v-for先于v-if执行，遍历数组项时进行判断。
v-if和v-for同时存在一般有两种情形，第一种是对列表项的值过滤，第二种是判断列表隐藏/显示

• 第一种情形可以使用计算属性对数组进行过滤，使用过滤后的数组直接遍历
• 第二种情形可以在外层加标签判断v-if，就能避免对每一项检查，代码逻辑也更清晰

2. Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制？

vue 组件可能存在多个实例，如果使用对象形式定义data，则会导致它们公用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。
而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

3. 你知道vue中key的作用和工作原理吗？说说你对它的理解。

1. key 的作用主要是为了高效的更新虚拟DOM，其原理是Vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。
2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug
3. vue中在使用相同标签名过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

4. 你怎么理解vue中的diff算法？

1. diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diff&#x