替換陣列

變異方法 (mutation method)，顧名思義，會改變被這些方法呼叫的原始陣列。相比之下，也有非變異 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。這些不會改變原始陣列，但總是返回一個新陣列。當使用非變異方法時，可以用新陣列替換舊陣列：

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

你可能認為這將導致 Vue 丟棄現有 DOM 並重新渲染整個列表。幸運的是，事實並非如此。Vue 為了使得 DOM 元素得到最大範圍的重用而實現了一些智慧的、啟發式的方法，所以用一個含有相同元素的陣列去替換原來的陣列是非常高效的操作。

注意事項

由於 JavaScript 的限制，Vue 不能檢測以下變動的陣列：

1. 當你利用索引直接設定一個項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改陣列的長度時，例如：vm.items.length = newLength

舉個例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 例項方法，該方法是全域性方法 Vue.set 的一個別名：

vm.$set(vm.items, indexOfItem, newValue)

為了解決第二類問題，你可以使用 splice：

vm.items.splice(newLength)