vue2最佳实践

---

最佳实践主要来源于《深入浅出vue》一书

为列表渲染设置属性key

key这个特殊属性主要用在vue.js的虚拟DOM算法中，在对比新旧虚拟节点时辨识虚拟节点。

在更新节点时，需要从旧的虚拟节点列表中查找与新的虚拟节点进行更新。如果这个查找过程设置了属性key，那么查找速度会快很多，所以无论如何，即在使用v-for时提供key属性，除非遍历输出的DOM内容非常简单，或者是可以依赖默认行为以获取性能上的提升。

<div v-for="item in items" :key="item.id" >
     <!-- 内容 -->
</div>

---

在v-if/v-if-else/v-else中使用key

如果一组v-if + v-else的元素类型相同，最好使用属性key（比如两个div元素）

v-if指令在编译后大致是下面的样子：

（has）? _c('li',[_v("if")]) : _c('li',[_v("else")])

---

所以当状态发生变化的时候，生成的虚拟节点既有可能是v-if上的虚拟节点，也有可能是v-else上的虚拟节点，默认情况下，Vue.js会尽可能高效地更新DOM，这意味着，当它在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除，然后在同一个位置添加一个新的元素。如果本不相同的元素被识别为相同，则会出现意料之外的副作用。

如果添加属性key，那么在对比虚拟DOM时，则会认为它们时两个不同的节点，于是会将旧的元素移除并在相同的位置上添加一个新的元素，从而避免意料之外的副作用。

不好的做法：

<div v-if="status">
    <!-- 内容 -->
</div>

<div v-else>
    <!-- 内容 -->
</div>

好的做法：

 <div v-if="status" key="status1">
    <!-- 内容 -->
</div>

<div v-else key="status2">
    <!-- 内容