VUE中key的理解

**

Vue中key的理解

**

关于 vue的 key的作用，不论是在实际开发中，还是在面试过程中，都是必须理解的一环。

key是 vue的一个特殊的 attribute。

主要作用是：
在更新虚拟DOM的时候，key 作为新节点和旧节点做对比的标识，以此来提高更新虚拟DOM的效率。

不使用 key的情况下：
vue会使用就地复用、就地修改的策略来提高更新虚拟DOM的效率。在列表渲染，比如 v-for 指令渲染时，因为此时没有给各个节点添加唯一的 key，当各个节点上的一些特性就得不到唯一的辨识，更新后的虚拟DOM的相应节点的特性容易错乱或丢失。

使用 key的情况下：
每个节点添加了唯一的 key，vue在更新虚拟DOM时，并不是动态创建或销毁 key存在的元素节点，而是以 key作为辨识，把对应的元素进行排序，并且会移除 key不存在的元素。

提高更新DOM效率：
vue在更新虚拟DOM时，并不是动态销毁、创建存在 key的元素，而是以 key作为标识进行排序，减少了性能消耗，提高了效率。

key 可选类型：
1、number
2、string
3、boolean (2.4.2 新增)
4、symbol (2.5.12 新增)

注意点：
在同级的元素节点中的 key应该是唯一的，否则会发生渲染错误。一般情况下，我们使用 id 作为唯一 key辨识。同时，我们应该避免使用数组的索引号 index 作为 key，以免在数组有增删的时候发生一些不可预期的错误。

个人理解，欢迎指正。