参考:https://blog.csdn.net/weixin_53312997/article/details/127606312
watch对象的某个属性
watch: {
'obj.a': {
handler(newVal, oldVal) {
console.log('obj.a changed',newVal);
},
}
},
一、watch的简单写法
watch: {
filterText(newValue, oldValue) {
console.log("filterText改变了");
},
},
二、watch的复杂写法以及immediate
data() {
return {
filterText: "",
}
},
watch: {
filterText: {
immediate: true,// 会在created执行之前就调用一次handler
deep: true, //深度监听
handler(newValue, oldValue) {
console.log("watch--immediate");
},
},
},
created() {
console.log("created");
},
mounted() {
console.log("mounted");
},
执行结果:
三、watch的deep
<script>
export default {
data() {
return {
person: {
name: 'tm',
age: 18
}
}
},
watch: {
person: {
deep: true,
handler(newValue, oldValue) {
console.log('person指向的地址 或者 person中的属性 改变了',newValue, oldValue);
//无论是person指向的地址改变了,还是person中的属性改变了,newValue(改变后的person对象)和oldValue(改变前的person对象)都是以对象的形式返回的
}
}
}
}
</script>
总结:
1、当watch设置 immediate: true时,handler是在created、mounted前执行的,所以在handler内获取dom元素会报错(dom元素还未挂载);
2、当watch未设置 immediate时,是等 被监听元素 发生改变时,才执行handler;
3、watch既可以监视data中的属性,也能监视computed中的属性