Vue-指令

v-if和v-show的区别？

v-if：是动态的向DOM树内添加或者删除DOM元素
v-show：是通过设置DOM元素的display样式属性来控制显示隐藏；

• 编译条件：
  • v-if是惰性的, 只有在判断条件为真时, 才开始局部编译;
  • v-show是判断条件是否为真都会被编译, 然后被缓存, 而且DOM元素保留；
• 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
• 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换；

v-bind和v-model的区别？

• v-model用于实现双向数据绑定，v-bind用于单向数据绑定；
• v-model只能作用于表单控件，在表单控件外使用不起任何作用；
• v-bind用来动态绑定属性，class和style，数据；

v-for 为什么要加key?

key是给每个节点添加唯一标识，主要是为了高效的更新虚拟DOM。其中也涉及到了虚拟DOM的diff算法。

不推荐使用index作为key值

• index是可变化的，当向数组中添加一条新的数据时，后面数据的index也会发生变化，都会重新渲染。
• 推荐使用数组中不变化的哪一项作为key值，如每条数据都有一个唯一的id，来标识这条数据的唯一性。
  使用V-for更新已渲染的元素列表时，会默认使用“就地复用”策略。

就地复用策略：当列表数据修改的时候，会根据key值去判断某个值是否修改，如果修改了，则重新渲染这一项，否则就复用之前的元素。

其它注意事项

• v-for优先级大于v-if，所以v-if和v-for不能同时作用于同一元素。
• v-for多层嵌套，index不能相同否则会报错，解决方法：修改index即可。