7、v-for

我们通常使用中会使用index作为v-key的值，其实最好不要使用index，而使用item.id。因为它是 Vue 识别节点的一个通用机制， key 并不特别与 v-for 关联，key 还具有其他用途。
示例：

反例

<div v-for="(item, index) in items">
  {{ item.name }}
</div>
<script>
export default {
  data() {
    return {
      items: [{ name: "aaaaa" }, { name: "bbbb" }, { name: "cccc" }]
    };
  }
};
</script>

<div v-for="(item, index) in items" :key="index">
  {{ item.name }}
</div>
<script>
export default {
  data() {
    return {
      items: [{ name: "aaaaa" }, { name: "bbbb" }, { name: "cccc" }]
    };
  }
};
</script>

正例

<div v-for="(item, index) in items" :key="item.id">
  {{ item.name }}
</div>
<script>
export default {
  data() {
    return {
      items: [{ name: "aaaaa" }, { name: "bbbb" }, { name: "cccc" }]
    };
  }
};
</script>

变异方法
变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push({ name: 'Baz' }) 。

重塑数组
非变异方法(non-mutating method)。这些不会改变原始数组，但总是返回一个新数组。方法如下：

• filter()
• concat()
• slice()

当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
})

不会导致 Vue 丢弃现有 DOM 并重新渲染整个列表。 Vue 实现了用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
修改某索引位置的对象时，不建议直接赋值，也不建议使用slice进行数据更新，这样将有可能导致DOM无法正常渲染，最佳方式是使用Vue.set方法进行更新数据。
示例：

反例

vm.items[indexOfItem] = newValue

example1.items.splice(indexOfItem, 1, newValue)

正例

Vue.set(example1.items, indexOfItem, newValue)
// or
this.$set(this.items, indexOfItem, newValue)