一、基础知识
在 Vue.js 中，当使用 v-for 来渲染列表数据时，Vue.js 需要为每个列表项分配一个唯一的标识符，以便于检测出数据项的变化，进而高效地渲染到真实的 DOM 中。这个唯一标识符就称为 key。
当 key 发生变化时，Vue.js 会给 DOM 元素添加/移除、更新子组件。如果没有正确使用 key，就有可能导致出错。
当我们使用 v-bind 绑定一个值时，我们可以使用 v-bind:key=”keyName” 这种方式来指导 Vue.js 哪些元素是需要被更新的。
二、key的使用
在使用 v-for 渲染列表时，我们需要给每个列表项设置一个唯一的 key 值，以方便 Vue.js 执行高效的 DOM 更新。
下面是一个简单的示例代码，展示如何使用 key。
<ul>
<li v-for="item in items" v-bind:key="item.id">
{{ item.text }}
</li>
</ul>
上述代码中，使用 v-for 循环渲染 items 数组中的每条数据，为每个循环项绑定了一个唯一的 key 值，这个唯一的 key 值是每条数据中的 id 属性。
三、key的原理
当 Vue.js 渲染一个新的列表时，会创建一个数据的副本，用于记录每个列表项所对应的 DOM 元素。当数据发生变化时，Vue.js 会先对比两个数据副本，找出发生变化的列表项或其它 DOM 元素，然后通过 diff 算法来更新这些变化的元素。
在这个过程中，Vue.js 会使用 key 值来判断哪些元素需要被更新，以及它们的更新方式。首先，Vue.js 会根据每个元素的 key 值，尝试去寻找对应的 DOM 元素。如果找到了，则说明这个元素只需要被更新。如果找不到，则说明这个元素要么被添加，要么被删除，要么是其它的替换逻辑。
因为 Vue.js 在遍历列表 items 时会生成一个虚拟 DOM 树（VNode树），所以如果不使用 key，Vue.js 得不到两次遍历之间某个元素的确定的关系，会疯狂的重新创建和销毁 DOM 节点，导致性能问题。
四、使用key的注意事项
1、key 值必须是 string 或者 number 类型的，其他类型会被强制转换成字符串类型。这也意味着，如果你使用对象或者数组作为 key 值，那么它们会被隐式地调用 toString() 方法最终转化成字符串类型，所以请确保 key 值能够唯一、确定、稳定地标识每个列表项。
2、在相同的列表中，不同的列表项所用的 key 值必须是唯一的。如果重复使用相同的 key 值，Vue.js 会发出警告，并且只有最后一个列表项生效。
3、不要在用 v-for 渲染的组件里面使用 v-once，因为它只会渲染一次。这也会破坏 Vue.js 在 DOM 更新时对每个元素的 key 值做的判断和标记，造成错误的 DOM 展示。
4、不要将 v-for 属性和 v-if 属性用在同一个元素上。如果必须同时使用 v-for 和 v-if，需要将 v-if 放置在外围的容器元素上。
五、示例代码
在组件中使用 key：
<template>
<div>
<ul>
<li
v-for="(item, index) in items"
v-bind:key="item.id"
v-bind:class="{ active: selectedIndex === index }"
>
{{ item.text }}
</li>
</ul>
</div>
</template>
在 DOM 元素中使用 key：
<a
v-for="item in items"
v-bind:key="item.id"
v-bind:href="'/detail/' + item.id"
>
{{ item.text }}
</a>
六、总结
使用 v-bind:key 可以让 Vue.js 在渲染列表时更高效、更精准地更新 DOM 元素，这对于提升列表渲染的性能和用户体验非常重要。在使用 key 时，需要注意一些细节，比如 key 值的类型和唯一性、不要和 v-if 一起使用等。只有理解和正确使用了 key，才能让 Vue.js 渲染列表时更有效率、更准确。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/241799.html
微信扫一扫 
支付宝扫一扫 