关于数组
-
使用数组变异方法
对Vue实例中data里面的数组使用变异方法操作的时候，Vue可以检测到变化并进行更新变异方法包括
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
-
非变异方法
非变异方法因为不会直接改变原始数组，所以需要使用另外的方法，比如用新数组去替换原数组。用含有相同元素的数组去替换原来的数组是非常高效的操作
var example1 = new Vue({ el: 'example1' data:{ items:[ {message:'Foo'}, {message:'Baz'} ] } }) example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })
两个错误的例子和对应的正确的方法
-
使用
example1.items[0] = newValue这样的方法来改变数组，改变的值不具有响应特性，正确的方法是Vue.set(example1.items, 0, newValue)或者
example1.items.splice(0, 1, newValue) -
使用
example1.items.length = newLength的方法改变数组的长度，Vue也无法检测到变化，正确的方法是example1.items.splice(newLength)
关于对象
Vue不能动态添加根级响应式属性，也不能检测根级属性中属性的添加或删除，这部分内容，看VUE数据data更新而列表不更新，VUE的响应式原理的几个小例子
-
既然不能添加根级属性，那我们就把需要动态添加的属性嵌套在已有的根级属性里面，通用使用set方法
var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } } }) Vue.set(example1.items, 'age', 27)效果相同的另一种写法，在Vue实例内使用
var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } }, methods: { setAttribute: function () { this.$set(this.items, 'age', 27) } } }) -
如果需要添加的属性很多，那就可以使用对象替换的方法，这种方法在上面的数组的方法中也用过
var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } }, methods: { setAttribute: function () { this.items = Object.assign({}, this.items, { age: 27, favoriteColor: 'Vue Green' }) } } })这里要注意的地方是：一定要是对此对象的整体替换，直接操作添加的属性不具备响应特性
直接操作的例子
var example1 = new Vue({ el: 'example1' data:{ items:{ name: 'john' } }, methods: { setAttribute: function () { Object.assign(this.userProfile, { age: 27, favoriteColor: 'Vue Green' }) } } })
