前端vue3 watch
watch作用：监视数据的变化
当你监视的是 「基本类型值」（字符串 / 数字 / 布尔值，比如person2.name/ref(18).value）→ watch监视的是 **【值本身】**；
当你监视的是 「引用类型」（对象 / 数组 / Proxy/RefImpl，比如person2/ref({name:''})）→ watch监视的是 **【内存地址】**；
1、监视ref定义的基本数据类型：
let a=ref(0)
直接监视：
watch(a,(new,old)=>{
//操作内容
})
监视的是基本类型，所以值变化了，new和old就不同
2、监视ref定义的对象类型：
let person=ref({ name:"张三", age:18 }) function changeName(){ person.value.name+='~' } function changeAge(){ person.value.age+=1 } function changePerson(){ person.value={ //地址值会发生变化 name:"李四", age:20 } }使用方式：
watch(person,(newValue,oldValue)=>{
console.log("person的值变化了",newValue,oldValue);
})
此时，由于watch监视的是引用类型，看地址变化，因此调用changeName或changeAge改变单个属性时，地址不变化，不会触发监视，而调用changePerson时，person.value的地址会发生变化，因此会触发监视
解决方法：手动开启深度监视：
watch(person,(newValue,oldValue)=>{
console.log("person的值变化了",newValue,oldValue);
},{deep:true,immediate:true})//深度监视,立即监视（页面一刷新就先执行watch，而不是等person变化了再执行）
在这个watch的回调函数中，newValue和oldValue都是ref对象，需要.value才能获取到里面的值
此时，如果只有单个属性发生变化，newValue和oldValue的值是一样的，因为地址值没有变化，但是如果是全部发生了变化，也就是如果触发了changePerson函数，newValue和oldValue的值就不一样了，因为地址值发生了变化。
3、监视reactive定义的对象类型：
let person1=reactive({ name:"张三", age:18 }) function changeName1(){ person1.name+='~' } function changeAge1(){ person1.age+=1 } function changePerson1(){ Object.assign(person1, {//地址没有变化 name:"李四", age:20 }) }开启监视：
watch(person1,(newValue,oldValue)=>{
console.log("person1的值变化了",newValue,oldValue);
})
监视的是reactive定义的对象，默认开启深度监视，隐式创建深度监视，无法关闭，同上，由于地址没有发生变化（Object.assign不改变地址），所以newValue和oldValue的值是一样的
4、监视ref或reactive定义的对象类型中的某个属性：
let person2=reactive({ name:"张三", age:18, job:{ a:10, b:20 } }) function changeName2(){ person2.name+='~' } function changeAge2(){ person2.age+=1 } function changeJob1(){ person2.job.a+=1 } function changeJob2(){ person2.job.b+=1 } function changeJob(){ person2.job={ //地址值会发生变化 a:100, b:200 } }（1）如果该属性不是对象类型，而是比如name，需要写成函数形式，才能监视到变化，开启监视方式：
watch(()=>{return person2.name},(new,old)=>{
//内容
})
Vue 执行这个函数后，拿到的返回值是 person2.name → 也就是一个 字符串（基本数据类型），值为 '张三'。watch 最终监视的，是这个函数的【返回值】，而不是函数本身，也不是 person2 这个对象。所以值变化了，new和old就会不同
（2）若该属性值是**依然**是【对象类型】，可直接编，也可写成函数，建议写成函数。
直接写：
watch(person2.job,(new,old)=>{})
此时，如果job中的单个属性发生变化，会触发监视，但由于地址不变，new和old是相同的。但是如果调用了：
function changeJob(){
person2.job={ //地址值会发生变化
a:100,
b:200
}
}
来改变job中的内容的话，person2.job的地址就发生变化，相当于此时的person2.job就不是原来的person2.job，就不会触发watch，甚至之后再单单改变a或者b，也不会再触发了（因为watch是挂载在原来的person2.job上的而不是这个person2.job上）
写成函数形式，并开启深度监视后，无论是修改单个属性，还是全部属性，都会触发：
watch(()=>{return person2.job},(newValue,oldValue)=>{
console.log('person2的job变化了11',newValue,oldValue)
},{deep:true})//深度监视
5、监视上述多个数据，组成数组
//监视名字和单个车：
watch([()=>{return person2.name},()=>{return person2.job.a}],(newValue,oldValue)=>{
console.log('person2的name或job.a变化了',newValue,oldValue)
//value是数组[],new和oldvalue不同
},{deep:true})
个人学习记录，如果错误，欢迎指正，也欢迎补充！
