【Vue3】Vue3中监视watch和watchEffect使用（图文+代码）

前言：watch结构三部分：

1、监视变量名，

2、监视回调值（新值newValue和旧值oldValue）

 3、监视参数

参数解读：

1、immediate:true：监听的这个对象是否会【立始输出】，也就是监听没开启动作时，就先输入初始值。

2、deep：true  是否深度监视，也就是针对对象或数组内的值监视。

一、监视ref所定义的一个响应式数据

 

1、immediate:true：监听的这个对象是否会【立始输出】，也就是监听没开启动作时，就先输入初始值。

2、deep：true  是否深度监视，也就是针对对象或数组内的值监视。

二、多个变量同时监视时

 

三、监视reactive所定义的一个响应式数据的整个数组对象变化

 

注意：无法正确获取oldvalue

四、监视reactive所定义的一个响应式数据某个属性（对象数组的某个值）

 

五、监视reactive所定义的一个响应式数据某个属性（对象数组中的子对象数组的变化）

增加deep:true参数

 

 

六、watchEffect使用

watch：提前指定具体变量元素，同时需要写返回值。
watchEffect：不提前指定具体元素，不需要返回值，有点像computed。

如下例：

const xl = person.age，变量指向person.age，person.age改变时，就是被监视

 

 

最后，感谢：“上归谷”的张老师