基于vue--key值的特殊用处详解

什么是key值？

在Vue.js中，当使用v-for循环一个列表时，每个被循环的DOM元素都需要一个唯一标识，用于Vue的虚拟DOM算法中进行节点的识别和优化。这个唯一标识就是key值。

key值的作用

1. 提高渲染效率

通过key值，Vue可以追踪所有列表中对象的身份，在新旧节点对比时可以精确判断每个节点对应的对象是否发生了变化。这样可以有效减少DOM操作次数，提高渲染效率。

2. 避免数据错乱

在某些情况下，如果没有为每个节点指定key值，在使用v-for更新列表时，Vue可能会出现数据错乱的问题。例如：

<li v-for="item in items">
  {{ item.text }}
</li>

如果items中有以下三个对象：

[ 
  { id: 1, text: 'Apple' }, 
  { id: 2, text: 'Banana' }, 
  { id: 3, text: 'Orange' } 
]

若我们想要将第二个对象Banana删除，items就会变成：

[ 
  { id: 1, text: 'Apple' }, 
  { id: 3, text: 'Orange' } 
]

此时，如果我们没有为每个节点指定key值，Vue会使用节点的索引作为key值，即：

<li>Apple</li>
<li>Orange</li>

在重新渲染时，Vue会认为Banana节点的key值为1，与Apple节点重复，导致Apple节点的数据被渲染到Banana节点上，Banana节点被误判为已删除，从而出现数据错乱的问题。而如果我们为每个节点指定唯一的key值，就能够避免这个问题。

key值的示例

1. 列表排序与更新

假设我们有一个列表，里面存放的是一些人的姓名和年龄。我们需要通过点击按钮来实现按照姓名或年龄来进行排序。示例代码如下：

<ul>
  <li v-for="person in sortedPersons" :key="person.id">
    {{ person.name }}，{{ person.age }}岁
  </li>
</ul>

<button @click="sortBy('name')">按姓名排序</button>
<button @click="sortBy('age')">按年龄排序</button>

在Vue组件中，我们通过computed计算属性来获取按指定规则排序后的列表。

data() {
  return {
    persons: [
      { id: 1, name: 'Amy', age: 22 },
      { id: 2, name: 'Bob', age: 20 },
      { id: 3, name: 'Charlie', age: 25 }
    ],
    sortRule: null
  }
},
computed: {
  sortedPersons() {
    if (this.sortRule === 'name') {
      return this.persons.sort((a, b) => a.name.localeCompare(b.name))
    } else if (this.sortRule === 'age') {
      return this.persons.sort((a, b) => a.age - b.age)
    } else {
      return this.persons
    }
  }
},
methods: {
  sortBy(rule) {
    this.sortRule = rule
  }
}

在每次更新列表时，我们为每个节点指定唯一的key值（例如这里使用了person的id），以便Vue能够准确判断每个节点的身份并进行优化和更新。

2. 动态列表的新增和删除

假设我们有一个动态列表，可以通过点击按钮来新增或删除列表项。示例代码如下：

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ item.name }}
    <button @click="deleteItem(index)">删除</button>
  </li>
</ul>

<input type="text" v-model="inputValue">
<button @click="addItem">新增</button>

我们在Vue组件中定义一个数组items，用于存放列表项对象。当用户点击新增按钮时，我们通过addItem方法向items数组中添加一个包含输入框中内容的新对象，并为这个对象指定一个唯一的id。同理，当用户点击列表项旁边的删除按钮时，我们通过deleteItem方法找到要删除的对象的索引，通过数组的splice()方法从items数组中删除该对象。

data() {
  return {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Cherry' }
    ],
    idCounter: 3,
    inputValue: ''
  }
},
methods: {
  addItem() {
    this.idCounter++
    this.items.push({
      id: this.idCounter,
      name: this.inputValue
    })
    this.inputValue = ''
  },
  deleteItem(index) {
    this.items.splice(index, 1)
  }
}

同样的，在每次更新列表时，我们为每个节点指定唯一的key值（这里使用了item的id），以便Vue能够准确判断每个节点的身份并进行优化和更新。