变异方法
- Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组
- 非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
注意事项
- Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
//方法一
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
//方法二
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
//方法三
vm.$set(vm.items, indexOfItem, newValue)