vue3如何监视Reactive对象中的属性

<template>
  <div class="divBox">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.brand1 }} 、 {{ person.car.brand2 }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCarName">修改汽车名称</button>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeCar">修改汽车</button>
  </div>
</template>

<script setup name="watchReactive">
import { ref, reactive, watch } from "vue";

const person = reactive({
  name: "张三",
  age: 18,
  car: { brand1: "奔驰", brand2: "奥迪", price: 100000 },
});

function changeName() {
  person.name = person.name + "~";
}
function changeAge() {
  person.age = person.age + 1;
}
function changeCarName() {
  person.car.brand1 = person.car.brand1 + "~";
}
function changeCarPrice() {
  person.car.brand2 = person.car.brand2 + "$";
}
function changeCar() {
  person.car = { brand1: "爱玛电动车", brand2: "小刀就是好", price: 88888 };
}

</script>

<script setup name="watchReactive">

//现在开始进行监视,不能监视对象的属性，只是一个字符串
// watch(person.name,(newValue,oldValue) => {
//     console.log("newValue",newValue);
//     console.log("oldValue",oldValue);
// });

//成功监视！

watch(()=>{return person.name},(newValue,oldValue) => {
    console.log("newValue",newValue);
    console.log("oldValue",oldValue);
});

//推荐指数****
watch(()=> person.name,(newValue,oldValue) => {
    console.log("newValue",newValue);
    console.log("oldValue",oldValue);
});

</script>

<script setup name="watchReactive">

//不能使用这种方式进行监视，他只是一个字符串
 watch(person.car.brand1,(newValue,oldValue) =>{
     console.log("newValue",newValue);
     console.log("oldValue",oldValue);
 })

<script/>

<script setup name="watchReactive">

/**可以使用这种方式进行监视，
 * 但是只能监视对象中的属性，不能监视对象本身
 * 对象本身，已经不是响应式的对象了，被重新赋值了
 */
 watch(person.car,(newValue,oldValue) =>{
    console.log("newValue",newValue);
    console.log("oldValue",oldValue);
})

<script/>

<script setup name="watchReactive">

//我们尝试监听数据中的对象属性
 watch(()=> person.car,(newValue,oldValue) =>{
     console.log("newValue",newValue);
     console.log("oldValue",oldValue);
 })

</script>

<script setup name="watchReactive">

//推荐程度*******
 watch(()=> person.car,(newValue,oldValue) =>{
     console.log("newValue",newValue);
     console.log("oldValue",oldValue);
 },{deep:true})

</script>

<script setup name="watchReactive">

/**
 * 监视对象内部多个属性
 */
// watch(()=>{return [person.name,person.car.brand1]},(newValue,oldValue) =>{
//     console.log("newValue",newValue);
//     console.log("oldValue",oldValue);
// },{deep:true})

watch(()=>[person.name,person.car.brand1],(newValue,oldValue) =>{
    console.log("newValue",newValue);
    console.log("oldValue",oldValue);
},{deep:true})
</script>

<script setup name="watchReactive">

//推荐程度*******
watch([() => person.name, () => person.car.brand1],
  (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);
  },{ deep: true });
</script>

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`Count is: ${count}`)
})

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`Count is: ${count}`)
  }
)