Vue3 watch方法----监视对象

使用watch时，如果想监视对象的内部属性值。需要使用watch的第三个参数的配置对象，手动开启深度监视。

//使用watch时如果想监视对象内部的属性值，需要使用watch的第三个参数，手动开启深度监视
watch(person, (newValue, oldValue)=>{console.log('person发生了变化',newValue, oldValue);
}, {deep:true
})

注意：在对象中如果这个person没有经过深度拷贝的话，那么newValue和oldValue的值是一样的。

如果想要监视对象里面的某个属性，那么需要时用箭头函数返回这个属性，例如：

watch(()=>{return person.name}, (newVal, oldVal) => {console.log(newVal, oldVal);
}) 

<template><!-- watch；监视ref定义的对象类型的数据--><div class="person">姓名:{{ person.name }}年龄：{{ person.age }}<button @click="changeName">修改姓名</button><button @click="changeAge">修改年龄</button></div>
</template>
<script setup lang="ts">
// 需求：当值大于多少时，执行什么操作
import { reactive, watch } from "vue";
let person = reactive({name:"zhangsan",age:18
})
function changeName() {person.name = "王五"
}
function changeAge() {person.age = 20
}watch(()=>{return person.name}, (newVal, oldVal) => {console.log(newVal, oldVal);}) </script><style scoped>
.person {background: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
button {margin: 0 5px;
}
</style>

上述代码，只有在person.name发生改变的时候，watch方法才会发生改变。

如果监视一个整个的对象，那么建议函数返回值，并且开启深度监视，如下（person.car是一个对象）：

watch(()=>{return person.car}, (newVal, oldVal) => {console.log(newVal, oldVal);
}, {deep:true
})