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 定义的对象类型数据,且默认开启了深度监视。

打印的结果如图




微信小程序
大潇博客 版权所有 Copyright ©2016~2026
京ICP备17004217号-6  合作QQ:284710375
天玺科技