vue通过指定key进行数据添加

在 Vue 中，可以通过指定 `key` 属性来实现数据添加。当 Vue 更新 DOM 时，它会尽可能地复用已经存在的元素，而不是重新创建和渲染相同的元素。如果没有指定 `key` 属性，Vue 会根据元素在数组中的索引来进行匹配和更新，这可能会导致意料之外的行为。

假设有如下的数组 `list` 和一个组件 `ListItem`：

<template>
  <div>
    <p>{{ item }}</p>
  </div>
</template>

export default {
  props: ['item'],
  // ...
}

如果我们想要向 `list` 数组中添加一个新的元素，可以通过以下方式实现：

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <div v-for="item in list" :key="item.id">
      <ListItem :item="item" />
    </div>
  </div>
</template>

<script>
import ListItem from './components/ListItem.vue'

export default {
  components: {
    ListItem
  },
  data() {
    return {
      list: [
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' },
        { id: 3, content: 'Item 3' }
      ]
    }
  },
  methods: {
    addItem() {
      this.list.push({ id: 4, content: 'Item 4' })
    }
  }
}
</script>

在 `v-for` 中，我们通过 `:key="item.id"` 来为每个元素指定一个唯一的 `key`。当我们向 `list` 数组中添加一个新的元素时，Vue 会根据 `key` 属性来判断这个元素是否已经存在于 DOM 中，如果不存在，则会创建一个新的元素并插入到 DOM 中；如果已经存在，则会复用现有的元素并更新相应的数据。