当 Vue 更新列表时，它会尽量复用已存在的 DOM 元素，而不是从头开始重新创建。key 的作用是帮助 Vue 判断哪些节点是新增的、哪些是更新的、哪些是删除的。这有助于提高性能，避免不必要的 DOM 操作。
以下是一个简单的使用 key 的列表渲染示例：
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' }
]
};
},
methods: {
updateList() {
// 修改列表时，保持 key 的唯一性
this.items = [
{ id: 2, text: 'Updated Item 2' },
{ id: 1, text: 'Updated Item 1' },
{ id: 3, text: 'Item 3' },
{ id: 4, text: 'New Item 4' }
];
}
}
};
</script>
在上述示例中，v-for 循环渲染了一个包含 id 属性的列表。为了提高性能，每个列表项都有一个唯一的 key 值，这样 Vue 就能够更精确地跟踪每个项的变化。
需要注意的是，key 的值应该是唯一的，并且不应该随时间变化。如果你在列表项中使用索引作为 key，当列表发生变化时可能会导致不稳定的渲染结果。最好使用具有稳定唯一标识的属性值作为 key。
转载请注明出处：http://www.zyzy.cn/article/detail/551/Vue 3.0