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
})