web250825/vue3/project3/src/components/Demo11.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" 
let obj = reactive({
    name:"图图",
    age:3
})
function changeName() {
    obj.name = '蜡笔小新';
}
function changePerson() {
    Object.assign(obj,{
        name:'瑶一瑶',
        age:4
    })
}
// 监听reactive引用数据类型 可以监听到属性
watch(obj,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{
    deep:true,
    immediate: true
})
</script>

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