watch主要是监听data或props中的值的变化,但是如果这个值是一个对象,对象内的某个属性发生了改变,有可能会监听不到变化,此时的解决办法是:将代码一改写为代码二
代码一:(普通写法)
watch: {
obj(newValue, oldValue) {
//do something
console.log(newValue,oldValue)
}
}
代码二:(高级用法)
watch: {
obj:{
handler(newValue, oldValue) {
//do something
console.log(newValue,oldValue)
},
deep:true
}
},
deep:true是开启深层次的监听,即所有属性都加上监听器,如果其中一个发生改变了就执行handler函数。
有时候需要程序一执行就监听数据的变化,此时需要加上 immediate: true ,即首次加载就监听数据变化(默认是不开启的,默认只有发生改变才监听):
watch: {
obj:{
handler(newValue, oldValue) {
//do something
console.log(newValue,oldValue)
},
deep:true,
immediate: true
}
}
有时候只需监听对象的某个属性时可以采用如下代码:
watch: {
"obj.acount":{
handler(newValue, oldValue) {
//do something
console.log(newValue,oldValue)
},
deep:true,
immediate: true
}
}