web250825/vue3/project3/src/components/Demo22.vue

<template>
  <div>
    <h1>Watch:监听reactive引用数据类型</h1>
   <p>我叫{{ obj.name }},今年{{ obj.age }}岁</p>
   <button @click="changeName">修改名字</button>
   <button @click="changePerson">修改整体</button>
  </div>
</template>

<script lang="ts" setup>
import {reactive,watch} from "vue" 
interface Person {
    name:string,
    age:number
}
let obj:Person = reactive({
    name:"图图",
    age:3
})
function changeName():void {
    obj.name = '蜡笔小新';
}
function changePerson():void {
    Object.assign(obj,{
        name:'瑶一瑶',
        age:4
    })
}
// 监听reactive引用数据类型 可以监听到属性
watch(obj,(newValue:Person,oldValue:Person | undefined)=>{
    console.log(newValue,oldValue)
},{
    deep:true,
    immediate: true
})
</script>

<style lang="scss" scoped>
</style>