watch监听不到数组对象的变化
Vue不能监听到数组和对象值的变化其实和双向绑定的原理有关。Vue双向绑定原理是利用js中的Object.defineproperty重定义对象的GET和SET方法,而同时这种方法存在着缺陷。就是只能监听到对象内已有的值。在监听对象中属性变化的方法中中,无疑是使用ES6的proxy更为优越。
**总结:
如果操作对象是数组,改变数组的值用Vue的
s
e
t
方法,改变数组的长度用数组的
s
p
l
i
c
e
方法使数组变化变成可监听的。如果操作对象是对象。如果操作的属性是对象内已经有的值,使用
set方法, 改变数组的长度用数组的splice方法使数组变化变成可监听的。 如果操作对象是对象。 如果操作的属性是对象内已经有的值,使用
set方法,改变数组的长度用数组的splice方法使数组变化变成可监听的。如果操作对象是对象。如果操作的属性是对象内已经有的值,使用watch,加上关键字deep深度监听对象,
如果操作的属性是对象内没有的新属性。使用$set使对象变成可监听的!
**
链接: https://blog.csdn.net/qq_38280242/article/details/102807862
一、利用索引直接改变arr的值
//普通监听
watch:{
arr:function (newValue,oldValue) {
console.log('arr改变了')
},
}
// this.arr=[1,2,3,4]
this.arr[0]=100 //watch监听不到数组变化
this.$set(this.arr,0,1234) //能监听到数据
二、修改数组的长度arr.length
//普通监听
watch:{
arr:function (newValue,oldValue) {
console.log('arr改变了')
},
}
// this.arr=[1,2,3,4]
this.arr.length=2 //watch监听不到数组变化
this.arr.splice(0,2) //能监听到数据
三、添加和修改对象属性和值
//普通监听
watch:{
obj:{
handel:function (newValue,oldValue) {
console.log('obj改变了')
},
deep:true
}
// obj:{ name:'wxs',
// age:21 }
obj.name='xxx' //watch监听不到数组变化要加上deep:true
this.$set(this.obj,'major','Vue') //能监听到数据
链接: https://betheme.net/news/txtlist_i64894v.html?action=onClick