key的作用和原理
作用
- key 的主要作用是为了高效的更新虚拟 DOM，其原理是 vue 在 patch 过程中通过 key 可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个 patch 过程更加高效，减少 DOM 操作量，提高性能。
- 另外，若不设置 key 还可能在列表更新时引发一些隐藏的 bug
- vue 中在使用相同标签名元素的过渡切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过渡效果。
数据更新后的差异比价
key 是虚拟 DOM 的标识，当数据发生变化时，vue 会根据‘新数据’生成‘新的虚拟 DOM’ 随后 vue 进行‘新虚拟 DOM’与‘旧虚拟 DOM’的差异比较，比较规则如下：
- 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
- 若虚拟 DOM 中内容没变，直接使用之前的真实 DOM
- 若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM
- 旧虚拟 DOM 中未找到与新 DOM 相同的 key 创建新的真实 DOM，随后渲染到页面