W250511/17.Vue3/project/src/components/Demo9.vue

<template>
  <div>
    <h2>Demo9</h2>
    <p>watch:监听reactive/ref定义的引用数据类型中的某个属性</p>
    <p>我叫{{ obj.name }},今年{{ obj.age }}岁,我有一个{{ obj.car.c1 }}和一个{{ obj.car.c2 }}</p>
    <button @click="changePerson">修改整体</button>
    <button @click="changeName">修改名字</button>
    <button @click="changeCar1">修改第一辆车</button>
    <button @click="changeCar">修改整体车</button>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive,watch} from "vue" 
let obj = reactive({
    name:'小明',
    age:10,
    car:{
        c1:'摩托车',
        c2:"自行车"
    }
})
console.log(obj,'obj')
function changeName() {
    obj.name = '小红';
}
function changePerson() {
    // obj = {
    //     name:'天天',
    //     age: 7
    // }
    // obj.name = '天天';
    // obj.age = 7;
    Object.assign(obj,{
        name:'天天',
        age: 7,
        car:{
            c1:1,
            c2:2
        }
    })
}
function changeCar1() {
    obj.car.c1 = '摩托车1'
}
function changeCar() {
    obj.car = {
        c1:"花花",
        c2:'图图'
    }
}
watch(()=>obj.car,(newValue,oldValue)=>{
  console.log(newValue,oldValue,'第四种')
},{
  deep: true,
  immediate: true
})
// watch(()=>obj.name,(newValue,oldValue)=>{
//   console.log(newValue,oldValue,'第四种')
// },{
//   deep: true,
//   immediate: true
// })
</script>

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