VUE:key属性的作用

一天只码五十行2024-03-06 22:16

在 Vue.js 中，key属性的主要作用是帮助 Vue 在进行 DOM 更新时，能够更准确地识别哪些节点可以复用。

当key值发生变化时，Vue 会执行以下步骤：

1.查找旧节点：Vue 会查找虚拟 DOM 中具有旧key值的节点。

2.匹配新节点：Vue 会尝试在新的虚拟 DOM 树中查找具有相同key值的新节点。

3.更新或复用节点：如果找到了具有相同key值的新节点，Vue 会尝试复用（即"就地更新"）旧节点。这意味着 Vue 会尽量重用现有的 DOM 元素，而不是销毁并重新创建它。这可以通过更新节点的属性、事件监听器等来实现，而不必经历完整的 DOM 操作，从而提高性能。如果没有找到具有相同key值的新节点，Vue 会销毁旧节点，并创建新节点。

4.插入或移动节点：如果新节点的位置与旧节点的位置不同，Vue 会执行 DOM 移动操作，而不是重新创建和插入新节点。这也有助于提高性能。

示例1：

html 复制代码

<template>
  <div class="page">
    <div >
      <span v-for="(item, index) in arr" :key="index">{{ item }}</span>
    </div>
    <button @click="changeArr()"></button>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const arr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const changeArr = () => {
  arr.value.pop();
};
</script>

当点击按钮时，前面9个key值相同的节点将会复用而不是删除。