VIP32/vue3/my_project/src/components/Demo4.vue

<template>
    <div id="demo4">
        <h2>姓名：{{person.name}}</h2>
        <h2>年龄：{{person.age}}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改人</button>
        <!-- watch:reactive -->
        
    </div>
</template>

<script setup name="demo4" lang="ts">
    import {reactive,watch} from "vue";
    let person = reactive({
        name:"孙悟空",
        age:18
    })
    function changeAge() {
        person.age += 1;
    }
    function changeName() {
        person.name += '~';
    }
    function changePerson() {
        // person = {}
        Object.assign(person,{name:"猪八戒",age:100})
    }

    // 情况三：watch监听reactive时 
    // 默认开启深度监听 属性及对象的新旧值都是相同的
    watch(person,(newValue,oldValue)=>{
        console.log(newValue,oldValue);
    })
</script>

<style>

</style>