Vue中的 key 的作用是什么？

这个问题，其实也是经常问的，对于刚刚毕业的大学生来说，

面试官问：vue中循环遍历数组的时候，为什么要加 key/key的作用是什么？

看一下官网的回答

• key属性主要在 vue 的虚拟 DOM算法，在 新旧 nodes 对比时 辨识 VNodes
• 如果不使用 key，vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地 修改/复用 相同类型元素的算法
• 而使用 key 它会基于 key 的变化 重新排列元素顺序，并且会 移除/销毁 key 不存在的元素

VNode 的全称 是 Virtua Node ，也就是虚拟节点
事实上，无论是组件还是元素，他们最终在 Vue 中表示出来的都是一个个 VNode
VNode 的本质就是一个 JavaScript 的对象

VNode 最大的好处 就是跨平台

diff 算法，就是 新的 vnodes 和 旧的 vnode 做一个对比，看看哪里发生了变化 ，再去更改，那个变化的东西

1、如果 key 使用 index（索引）等于 没有定义 key

key 最好是一个唯一的值，项目开发中，一般都是用 id，如果你用 index 其实和没加没啥区别，就是 不让他警告了而已

1. 先进行比较 （假设，新：[a,b,f,c,d,]，旧：[a,b,c,d]）
2. 从 第一个元素 开始比较，如果 相等 则不做任何更新
3. 若不一样 ， （索引是2的时候，旧的是 c ，新的是f，内容不一样，则更新它的内容）
4. d 和 c 也要更新，
5. 然后 新的 还多出来 一个 d ，则创建一个 d ，在挂载到 里面，然后渲染即可
   

2、如果设置了 key

1. 从头开始遍历、比较 a、b 是一致的，然后是 c 和 f 不一致 ，就会跳出循环
   
2. 从尾部 开始进行遍历、比较
   
3. 如果是 旧节点遍历完毕，还有新的节点，那么就新增节点
   
4. 如果是 新的节点遍历完毕，但是还有 旧的节点，那么就移除旧的节点
   
5. 如果中间还有很多未知或者乱序的节点
   

3、总结

可以这样回答

1. 首先是 提高 虚拟DOM 的渲染效率
2. 第二点，可以分析一下，有 key 和 没有 key 的 渲染过程