vue 面试总结（一）

一、v-if和v-for 哪个优先级更高

1. 先给出结论
2. 为什么是这样的
3. 他们能放一起吗
4. 如果不能，应该怎么办
5. 总结

回答范例：

1. v-for 优先于v-if被解析
2. 我曾经做过实验，把他们放在一起，输出的渲染函数中可以看出会执行循环再判断条件
3. 实践中也不应该把它们放在一起，因为哪怕我们只渲染列表中的一小部分元素，也得在每次渲染的时候遍历整个列表
4. 通常有两种情况导致我们这样做
   ··<1> 为了过滤列表中的项目（比如 v-for=“user in users” v-if=“user.isActive”）,此时定义一个计算属性（比如activeUser），让其返回过滤后的列表即可
   ··<2> 为了避免渲染本应该被隐藏的列表（比如 v-for=“user in users” v-if=“shouldShowUsers”）,此时把v-if 移动至容器元素上 （ol ul）
5. vue文档中明确指出了不要把两者放在一个元素上
   
   

二、key的作用

分析： 考察大家对DOM和patch 细节的掌握程度，反映面试者理解层次
思路分析：总分总

1. 给出结论，key的作用是用于优化patch性能
2. key的必要性
3. 实际使用方式
4. 可以从源码层面描述vue 如何判断两个节点是否相同

回答范例
1、key 的作用主要是为了更高效的更新虚拟DOM
2、Vue在patch过程中 判断两个节点是否是相同节点 是key一个必要条件，渲染一组列表时，key往往是唯一标识，如果不定义key的话，vue只认为比较的两个节点是同一个，这导致了频繁更新元素，使得整个patch 过程比较低效，从而影响性能
3、实际使用中在渲染一组列表时key必须设置，而且必须是唯一标识，应该避免使用数组索引作为key，这可能导致一些隐蔽的bug；vue在使用相同标签元素过度切换时，也会使用key属性，目的是为了让vue可以区分它们，否则vue，否则vue只会替换其内部属性而不会触发过渡效果。
4、从源码中可以知道，vue判断两个节点是否相同时同事主要判断两者的key和元素类型等，因此如果不设置key，它的值就是undefined，则可能认为这是两个相同的节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。

三、双向绑定及其原理

思路分析 3w1h

1. 给出双绑定义
2. 双绑带来的好处
3. 在哪里使用双绑
4. 使用方式
5. 扩展： 使用细节、原理实现描述

回答范例：
1、vue中 双向绑定是一个指令 v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。v-model 是语法糖，默认情况下相当于 :value和 @input
2、使用v-model可以减少大量繁琐的事件处理代码，提高开发效率，代码可读性也好
3、通常在表单项上使用v-model
4、原生的表单项可以直接使用v-model，自定义组件上需要使用它需要再组件内绑定value并处理输入事件
5、我做过测试，输出包含v-mode;模板的组件渲染函数，发现他会被转移为value属性的绑定一级一个事件监听，事件回调函数中回做相应变量更新操作，这说明神奇魔法实际上是vue编译器完成的。

可能的追问
1、v-model 和 sync 修饰符区别
链接: vue中v-model和.sync修饰符区别.

2、自定义组件使用v-model 如果想要改变事件名或者属性应该怎么做

四、你了解vue中的diff算法吗

分析： vue基于虚拟DOM做更新，diff又是其核心部分，因此常被问道
思路： 3w1h

1. 定义diff
2. 它的必要性
3. 它在哪里被使用
4. 它如何运作
5. 提升： 说细节

回答范例：
1、diff算法是虚拟DOM的产物，vue里面实叫做patch，它的核心实现来自于snabbdom；通过新旧虚拟DOM作对比，将变化的地方转换为DOM操作。
2、vue1里面没有patch，因为界面中每个依赖都有专门的watcher负责更新，这样项目规模变大就回成为性能瓶颈，vue2中为了降低watcher粒度，每个组件只有一个watcher，但是当需要更新的时候，怎样才能精确到发生变化的地方？这就需要引入patch才行
3、组建中数据变化时，对应的watcher会通知更新并执行其更新函数，它会执行渲染函数获取全新虚拟dom：newVnode，此时就会执行patch对比上次渲染结果oldVnode和新的渲染结果newVnode。
4、patch过程遵循深度优先，同层比较的策略；两个节点之间比较时，如果它们拥有子节点，他会比较子节点；比较两组子节点时，会假设头节点可能相同先做尝试，没有找到相同节点后才按照通用方式遍历查找；查找结束再按情况处理剩下的节点；借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。