1. 深度监听
- handler:其值是一个回调函数。监听到变化时应该执行的函数。
-
deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
-
immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
-
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时需要deep属性对对象进行深度监听
2. 演示代码如下:
<template>
<div class="watch">
<button @click="changeName">修改obj.name</button>
<input type="text" v-model="obj.name" />
<button @click="changeSex">修改obj.sex</button>
<input type="text" v-model="obj.sex" />
</div>
</template>
<script>
export default {
data() {
return {
obj: {
name: "温情",
sex: "男",
},
};
},
watch: {
obj: {
handler(newValue, oldValue) {
console.log("obj 发生了变化");
},
deep: true,
immediate: true,
},
},
methods: {
changeName() {
this.obj.name += "1";
},
changeSex() {
this.obj.sex += "1";
},
},
};
</script>
需要注意得到是 handler 是固定写法,不能用其他的。
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
上面的视图里 之所以刷新马上就执行了 handler函数,就是因为设置了 immediate 属性为 true