Vue
【vue3】CompositionAPI中watch侦听器的使用方法
03-31 10:23作用:监视数据的变化(和Vue2中的watch作用一致)
特点:Vue3中的watch只能监视以下四种数据:
1.ref定义的数据。
2.reactive定义的数据。
3.函数返回一个值(getter函数)。
4.一个包含上述内容的数组。
使用watch监视ref定义的变量
基本用法
watch(被监听的数据, (新值, 旧值)=>{ ... })
案例

解除监视

使用watch监视ref定义的对象
监视 ref 定义的对象类型数据,和基本数据类型用法一致

直接写数据名,监视的是对象的地址值,若想监视对象内部的数据,要手动开启深度监视。
注意:
若修改的是 ref 定义的对象中的属性, newValue 和 oldValue 都是新值,因为它们是同一个对象。
若修改整个 ref 定义的对象, newValue 是新值,oldValue 是旧值,因为不是同一个对象了。

使用watch监听reactive定义的对象
监视 reactive 定义的对象类型数据,且默认开启了深度监视。

打印的结果如图

微信小程序