Vue3中watch的用法代码示例

本篇文章小编给大家分享一下Vue3中watch的用法代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

一、API介绍

watch(WatcherSource, Callback, [WatchOptions])

type WatcherSource = Ref | (() => T)

interface WatchOptions extends WatchEffectOptions {
    deep?: boolean // 默认：false
  immediate?: boolean // 默认：false
  
}

参数说明：

WatcherSource: 用于指定要侦听的响应式变量。WatcherSource可传入ref响应式数据，reactive响应式对象要写成函数的形式。

Callback: 执行的回调函数，可依次接收当前值newValue，先前值oldValue作为入参。

WatchOptions：支持 deep、immediate。当需要对响应式对象进行深度监听时，设置deep: true;默认情况下watch是惰性的，当我们设置immediate: true时，watch会在初始化时立即执行回调函数。

除此之外，vue3的watch还支持侦听多个响应式数据，也能手动停止watch监听。

二、监听多个数据源

现象：当改变名字和年龄时，watch都监听到了数据的变化。当age大于26时，我们停止了监听，此时再改变年龄，由于watch的停止，导致watch的回调函数失效。

结论：我们可以通过watch侦听多个值的变化，也可以利用给watch函数取名字，然后通过执行名字()函数来停止侦听。

三、侦听数组

现象：当将数组定义为响应式数据ref时，如果不加上deep:true，watch是监听不到值的变化的；而加上deep:true，watch可以检测到数据的变化，但老值和新值一样，即不能获取老值。当数组定义为响应式对象时，不作任何处理，watch可以检测到数据的变化，但老值和新值一样；如果把watch的数据源写成函数的形式并通过扩展运算符克隆一份数组返回，就可以在监听的同时获得新值和老值。

结论：定义数组时，最好把数据定义成响应式对象reactive，这样watch监听时，只需要把数据源写成函数的形式并通过扩展运算符克隆一份数组返回，即可在监听的同时获得新值和老值。

四、侦听对象

现象：当把对象定义为响应式对象reactive时，采用函数形式的返回，如果不加上deep:true，watch是监听不到值的变化的；而加上deep:true，watch可以检测到数据的变化，但老值和新值一样，即不能获取老值；若把watch的数据源写成函数的形式并通过深拷贝克隆（这里用了lodash库的深拷贝）一份对象返回，就可以在监听的同时获得新值和老值。

结论：定义对象时，最好把数据定义成响应式对象reactive，这样watch监听时，只需要把数据源写成函数的形式并通过深拷贝克隆一份对象返回，即可在监听的同时获得新值和老值。