vue中 key的作用与原理

一、key是什么？

在Vue中，key是用于识别VNode的特殊属性。它可以帮助Vue识别VNode的身份，从而更高效地更新虚拟DOM。

二、key的作用

key的作用主要有两个方面：

1. 保持组件状态。当列表中的元素发生变化时，Vue会根据key的值来判断是否重新渲染该元素，从而确保组件状态的正确性。
2. 提高性能。有了key，Vue可以更快速地识别出列表中哪些元素发生了变化，只更新需要更新的部分，减少不必要的DOM操作，提高页面渲染性能。

三、key的原理

在Vue中，当使用v-for指令进行列表渲染时，每个VNode都需要有一个唯一的key值。Vue通过比较新旧VNode的key值来确定VNode的变化情况，进而决定是否重新渲染该VNode。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="changeItems">Change Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    changeItems() {
      this.items = [
        { id: 2, name: 'Item 2 Modified' },
        { id: 3, name: 'Item 3 Modified' },
        { id: 4, name: 'Item 4 Added' }
      ];
    }
  }
};
</script>

在上面的代码中，我们使用了v-for指令来遍历items数组，并为每个li元素设置了唯一的key，即item.id。当点击按钮时，会触发changeItems方法，改变items数组的内容。由于每个li元素都有唯一的key，Vue可以准确地追踪到每个元素的变化，只更新需要更新的部分，而不是重新渲染整个列表。

四、设置key与不设置key区别

1. 设置key：在使用v-for指令进行列表渲染时，务必为每个VNode设置一个唯一的key值。这样可以帮助Vue更准确地追踪每个VNode的变化，提高页面渲染性能。
2. 不设置key：如果不设置key或者key值不唯一，Vue会在进行列表渲染时出现一些问题，可能导致页面渲染不正确、性能下降等情况。因此，为了确保程序的正确性和性能，建议始终为VNode设置唯一的key值。