web0331/11.vue3/vue-project1/src/components/Demo12.vue

<template>
  <div>
    <h2>
        watch:监听数据变化
    </h2>
    <!-- 监听reactive引用数据类型多个个属性:
        写成数组 数组中用函数体 用逗号分割
    -->
     <p>
        我叫{{ obj.name }},今年{{ obj.age }}岁了,我有{{ obj.car.c1 }}和{{ obj.car.c2 }}
     </p>
     <button @click="changeAge">修改年龄</button>
     <button @click="changeCar1">修改第一辆车</button>
     <button @click="changeCar">修改所有车</button>
     <button @click="changePerson">修改整体</button>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive,watch} from "vue" 
let obj = reactive({
    name:"瑶一瑶",
    age: 4,
    car:{
        c1:"大众",
        c2:'奥迪'
    }
})
function changeAge() {
    obj.age = 4.5;
}
function changeCar1() {
    obj.car.c1 = '迈巴赫'
}
function changeCar() {
    obj.car = {
        c1:"自行车",
        c2:"摩托车"
    }
}
function changePerson() {
   let obj1 = {
        name:"瑶一瑶小肉包",
        age: 4.7,
        car:{
            c1:"拖拉机",
            c2:"挖掘机"
        }
    }
    Object.assign(obj,obj1)
}
watch([()=>obj.age,()=>obj.car],(news,olds)=>{
    console.log(news,olds)
})
</script>

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