在Vue中为什么v-for一定要加key

小帅 

如果你已经很熟悉Vue，一定也会很熟悉 v-for 指令。如果用过其他的前端框架的话，它们也都提供了在HTML模板中循环数据标记的方法。今天这篇文章让我们搞明白为什么 key 属性对于 v-for 这么重要。

我在刚开始写Vue时，也很少去写key 属性，因为它也不是必需的，不写也不会报错，也不会耽误数据渲染。但当项目中配了ESLint的规则，必需要写key时，我就统一的都把 index 索引作为 key ，然后接着开发，就像下面这样：

<h1 v-for="(item, index) in list" :key="index">{{ item.title }}</h1>

术语解读

那为什么我们需要在 v-for 循环中加 key 属性呢？

其实是因为Vue可以通过 key 这种方式来观察数组或者对象中的数据哪些正发生变化。 v-for 默认是通过index索引来追踪变化，所以上面我通过将index作为索引的做法是多余的，尽管它解决了ESLint的错误。通过追踪index索引，Vue观测列表中的项目的顺序变化，并在顺序发生变化时，就地修改每个项目。Vue文档中指出，“这个默认的模式是高效的”，但也指出并不适合所有的情况。

像Vue文档所说的那样，我们要尽可能使用数据的唯一ID来做每个元素的key，这样 Vue 可以更准确地追踪数组中项目的更改并更新组件状态，并且能够重用和重新排序现有组件，而不必重新渲染整个循环。

举例说明

上面说了那么多可能比较官方，还是不容易理解，下面我们通过一个例子来展示 key 属性的重要性。

假设我们有一个图书列表，然后有一个 book-detail 组件用来展示书的名称，和购买按钮，然后循环这个 book-detail 组件

book-detail 组件代码如下：

<div class="book">
  <h1>{{ book.title }}</h1>
  <div v-if="isCheckedOut" class="label">立即购买</div>
</div>

组件展示这本书的书名，以及这本书是否能被购买。

组件的JavaScript部分：

export default {
  name: 'Book',
  props: ['book'],
  data() {
    return {
      isCheckedOut: null
  mounted() {
    this.checkBookStatus(this.book.id);
  methods: {
    checkBookStatus() {
      axios.get(`/book-status/${this.book.id}`)
        .then(res => {