如何正确理解vue中的key详解

下面我将为大家详细讲解关于“如何正确理解Vue中的key”的攻略。

什么是key?

在Vue中，每个节点都需要有唯一的key属性，用于辅助Vue渲染虚拟DOM和更新真实DOM。

key的作用

• 提高Vue性能：在更新虚拟DOM时，Vue会基于key的变化来判断节点的位置以及是否需要重新渲染。有了key，在更新虚拟DOM时，Vue就可以精准地判断出新旧节点是否相同，从而避免一些不必要的DOM操作，提高更新效率，提升性能。
• 保留页面状态：当在Vue中使用v-for来渲染一个列表的时候，如果没有为每个列表项指定key属性，那么在删除或者增加列表项时，虚拟DOM可能会将之前已经存在的DOM元素重新进行渲染，此时也就会导致之前已经输入的内容、选中的状态等丢失。而通过为列表项绑定key，可以指导Vue对每个节点进行复用，从而保留页面状态。

key的注意事项

• 具有唯一性：key属性值必须是唯一的，相同的key会导致Vue无法准确的确定新旧节点的位置，从而可能会导致渲染错误。
• 不建议使用随机数作为key：因为这样会导致每次更新都会产生新的key值，从而失去key的作用。
• 不要把index作为key：因为Vue在更新一组数据时，数据结构变化时会重新排序，如果用index作为key，就会导致节点错误地复用或是匹配错误，这样就无法发挥key的作用。

代码示例一

下面是一个简单的Vue组件代码片段，其中我们通过为每个li标签绑定唯一的key值，并将列表中序号作为对应的key值。

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="(user, index) in userList" :key="index">{{user}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userList: ['Tom', 'Jenny', 'Lucy']
    }
  }
}
</script>

代码示例二

下面是一个使用对象数组渲染列表的Vue组件代码片段，其中我们通过为每个li标签绑定唯一的key值，并将列表项中的id作为对应的key值。

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="(user, index) in userList" :key="user.id">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userList: [
        { id: 1, name: 'Tom' },
        { id: 2, name: 'Jenny' },
        { id: 3, name: 'Lucy' }
      ]
    }
  }
}
</script>

通过以上两个示例，我们可以看到在Vue中，为每个节点绑定唯一的key值非常重要，只有这样才能让Vue准确地识别出新旧节点的位置，从而更好地更新虚拟DOM和真实DOM，在页面滑动等频繁操作时，提升性能。