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