一、情景说明
在Vue2中，watch的用法如下
https://blog.csdn.net/Brave_heart4pzj/article/details/135604394
这一篇，来学习Vue3中的watch用法
二、案例
1、监视ref定义的数据【基本类型】
引入函数
import {ref,watch} from 'vue'
定义变量
// 数据let sum = ref(0)
watch监视变量
注意：
1、监视的ref变量，不可以写成sum.value
2、这里居然可以递归调用哦！！！
// 监视，情况一：监视【ref】定义的【基本类型】数据const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)if(newValue >= 10){stopWatch()}})
2、监视ref定义的数据【对象类型】
引入函数
import {ref,watch} from 'vue'
定义变量
// 数据let person = ref({name:'张三',age:18})
watch监视变量
监视的是对象的地址值
若想监视对象内部属性的变化，需要手动开启深度监视
watch的第一个参数是：被监视的数据
watch的第二个参数是：监视的回调
watch的第三个参数是：配置对象（deep、immediate等等…）
注意：
如果这里不配置deep项，则修改person里面的属性，不会触发监视。
watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{deep:true})
3、监视reactive定义的数据
引入函数
import {reactive,watch} from 'vue'
定义变量
// 数据let person = reactive({name:'张三',age:18})
watch监视变量
默认是开启深度监视的，且无法关闭
watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)})
4、有一个返回值的函数
解决，watch单独监视对象中某个属性的变化的情况
引入函数
import {reactive,watch} from 'vue'
定义变量
// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})
watch监视变量
1、监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
watch(()=> person.name,(newValue,oldValue)=>{console.log('person.name变化了',newValue,oldValue)})
2、监视响应式对象中的某个属性，且该属性是对象类型的
可以直接写，也能写函数，更推荐写函数，根据需要开启深度监视
watch(()=>person.car,(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})
5、一个包含上述内容的数组
引入函数
import {reactive,watch} from 'vue'
定义变量
// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})
watch监视变量
监视多个属性，用数组组装后，即可进行监视
watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})
