vue数组、对象变异监测

数组变异

Vue 包含一组观察数组的变异方法， 所以它们也将会触发视图更新。这些方法如下：

push()、pop()、shift()、unshift()、splice()、sort()、reverse()，使用这些方法使得数组变异会及时触发视图更新。

 

注意事项

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[index] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[index] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set

Vue.set(vm.items,index, newValue)    //vm.items 数组对象 ,index 需要修改的对象下标, newValue 对象新值

 

//Array.prototype.splice

example1.items.splice(indexOfItem, 1, newValue)   //splice()方法的替换用法

为了解决第二类问题，你可以使用 splice：

example1.items.splice(newLength) //splice()方法的新增用法

 

对象变异

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)  //vm.userProfile  需要修改的对象, 'age' 修改的属性 , 27 属性的新值

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

this.$set(this.userProfile, 'age', 27)

 

如果文章对你有帮助，麻烦帮忙点个赞哦！嘿嘿！做一个靠谱的技术博主！