监听info对象中的a属性值变化：
<script>
const vm = Vue({
data() {
return {
b: true,
info:{
a: 1,
b:2,
c: 3
}
}
}
</srcipt>
第一种方式：使用deep
为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
只要info中的属性发生变化（可被监测到的），便会执行handler函数；
如果想监测具体的属性变化，如a变化时，才执行handler函数，则可以利用计算属性computed做中间层。
watch:{
info:{
handler(newVal){
console.log(newVal);
},
deep: true
}
}
第二种方式：watch结合computed，computed返回对象的的该属性，对computed的操作函数进行watch监听。
computed:{
//该计算属性返回要监视的对象属性值
infoa(){
return this.info.a;
}
},
watch:{
//开始监听返回该对象属性值计算属性
infoa: function(newVal, oldVal){
console.log(newVal, oldVal);
}
}
第三种方式：
watch:{
'info.a'(newVal, oldVal){
if(newVal != oldVal && newVal != ""){
this.vDisable = false;
var appName = newVal.split("-")[0]
this.getVersionData(appName)
}
}
}
评论0