Vue中的key属性与列表渲染优化-优快云博客

本文链接：https://blog.youkuaiyun.com/Qiang_7950/article/details/130756661

是什么?

在 Vue 中，key 是用于优化列表渲染的一个特殊属性。当 Vue 更新虚拟 DOM 树时，使用 key 可以让 Vue 知道哪些组件是被添加、修改或删除的，从而减少不必要的 DOM 操作，提高渲染性能。

具体一点?

当 Vue 更新一个包含子组件的列表时，如果两次更新中某个子组件的位置发生变化，但其 key 值没有变化，那么 Vue 就无法区分这两个子组件，会直接复用原来的 DOM 元素。这可能会导致一些意想不到的问题，比如子组件状态混乱、事件监听器失效等。因此，在处理列表数据时，建议始终为每个子组件设置唯一的 key 值。

状态的变化会导致视图的更新，其中的更具体的过程是：
1.状态1 —> 虚拟dom1 ——> 视图1,
2.状态2 —> 虚拟dom2  --->     ？

3.比较虚拟dom1和虚拟dom2的区别，然后在 视图1的基础上小范围更新视图得到视图2
key 是给每一个 vnode 的唯一 id，也是 diff 的一种优化策略，可以根据 key，更准确，更快的找到对应的 vnode 节点,这个 key 的作用是用来加速这个比较的过程的。

实际应用场景?

当我们在使用v-for时，需要给单元加上key
<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>
+new Date()生成的时间戳作为key，手动强制触发重新渲染
<Comp :key="+new Date()" />

设置 key 值一定能提高 diff 效率吗?

其实不然，文档中也明确表示

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升

小总结

在 Vue 中，使用 key 属性可以帮助 Vue 识别每个列表中的子元素，并且在 DOM 更新时对它们进行精确控制。具体来说，当使用 v-for 指令循环渲染一个列表时，Vue 会根据每个子元素的 key 值来判断该子元素是否已经存在于 DOM 树中，从而决定是否需要重新创建、更新或删除该元素。
当 Vue 在处理列表时，首先会根据每个子元素的 key 值和位置信息生成一个虚拟节点（VNode），然后通过比较两次更新之间的 VNode，来判断哪些元素需要被新增、更新或删除。如果两个 VNode 的 key 值相同，那么 Vue 就认为它们代表同一个元素，从而重用原来的 DOM 元素；反之，如果两个 VNode 的 key 值不同，那么 Vue 就会销毁原来的 DOM 元素，并重新创建新的 DOM 元素。
这种基于 key 值的优化策略能够有效地减少 DOM 操作，提高性能。但是需要注意的是，key 值必须具有唯一性，在同一列表中不能出现重复的 key 值，否则会导致渲染错误。此外，如果列表中的数据发生变化，例如插入、删除或排序等操作，也需要同时更新每个子元素的 key 值，以确保列表的正确渲染。