watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组

一、框架：

<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>

三、数据、方法

监听（Watch）

单个数据的属性值

可以使用以下方式：

1.数据为String/number属性值

<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>

2.监听的数据为Object对象时

当我们监听函数中的对象时：

<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>

好处在于，我们可以针对没个属性进行监视！！！

vue3官方文档：

侦听数据源类型​

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

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 函数：

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

deep谨慎使用

深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。