浅谈Vue2.0中v-for迭代语法的变化(key、index)

传统的v-for迭代语法

Vue 1.x和2.x在v-for指令上有一些差异，Vue 1.x中v-for迭代语法支持以下形式：

<div v-for="item in items">
    {{ item }}
</div>

在Vue 1.x中，v-for指令还支持“item in index”这种形式，可以同时读取数组中的项目和它们在数组中的索引，如下所示：

<div v-for="(item, index) in items">
    {{ index }} - {{ item }}
</div>

Vue 2.x中v-for指令的变化

Vue 2.x版本中的v-for指令与Vue 1.x类似，但是在其迭代语法上有一些微小的变化，例如新增了一个“key”属性。下面详细介绍Vue 2.x中v-for指令的迭代语法变化。

key属性的作用

在Vue 2.x版本中，v-for指令中新增了一个特殊属性key，用于识别每个节点的唯一性，即给每个节点一个唯一的标识符。key的作用是建立节点之间的联系，以便在节点发生改变或者重排的时候，Vue可以高效地重新渲染页面。

<div v-for="(item, index) in items" :key="index">
    {{ index }} - {{ item }}
</div>

可以看到，在v-for指令中使用key属性可以让Vue更高效地管理节点，尤其是在涉及大量节点更新的时候。

默认的索引

在Vue 2.x版本中，不再像Vue 1.x那样默认对item和index进行解耦。这意味着，如果你想在v-for中访问数组中的索引值，你必须明确使用“(item, index)”这种形式。

例如：

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ index }} - {{ item }}
  </li>
</ul>

例子1：对比有无key的区别

下面是一个使用v-for指令渲染的简单列表，我们可以通过删除/添加列表项目来测试key属性对于节点更新的影响。

没有使用key属性的v-for指令：

<div id="app">
    <button @click="removeItem">删除最后一项</button>
    <button @click="addItem">添加一项</button>
    <ul>
        <li v-for="item in items" class="item">{{ item }}</li>
    </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3, 4, 5]
  },
  methods: {
    addItem: function() {
        this.items.push(this.items.length + 1)
    },
    removeItem: function() {
        this.items.pop()
    }
  }
})

使用key属性的v-for指令：

<div id="app">
    <button @click="removeItem">删除最后一项</button>
    <button @click="addItem">添加一项</button>
    <ul>
        <li v-for="(item, index) in items" :key="index" class="item">{{ item }}</li>
    </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [1, 2, 3, 4, 5]
  },
  methods: {
    addItem: function() {
        this.items.push(this.items.length + 1)
    },
    removeItem: function() {
        this.items.pop()
    }
  }
})

可以看到，当使用key属性的时候，在删除最后一项的时候，节点被高效地更新，没有发生重排；而在没有使用key属性的时候，节点被重排了。这证明了在使用v-for指令时应该为每个项提供一个key属性。

例子2：v-for指令中使用非索引值作为key

当v-for指令中的属性值不是索引值而是其他值时，我们必须使用非索引值来作为节点的key。下面是一个示例程序，它使用学生的id作为节点的key：

<div id="app">
    <ul>
        <li v-for="student in students" :key="student.id">{{ student.name }}</li>
    </ul>
</div>

new Vue({
  el: '#app',
  data: {
    students: [
        { name: '小明', id: 1 },
        { name: '小红', id: 2 },
        { name: '小刚', id: 3 }
    ]
  }
})

所以，当属性值列表中存在具有重复值的项时，我们必须使用非索引值作为节点的key。

总结

本文通过介绍Vue 2.x版本中v-for指令的变化，介绍了key属性的作用和使用方法，以及默认索引值的问题。此外，我们还通过两个例子来说明了Vue 2.x版本中v-for指令的使用方法。最后，需要注意的是，v-for指令的正确使用和key属性的使用对于Vue的性能和效率都有很大的影响，我们应该尽可能避免出现重排的情况，从而提高Vue在渲染页面时的效率。