Vue3中怎么使用watch监听对象的属性值
导读:本文共3984字符,通常情况下阅读需要13分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:这篇文章主要介绍“Vue3中怎么使用watch监听对象的属性值”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3中怎么使用watch监听对象的属性值”文章能帮助大家解决问题。Vue3 中使用 watch 侦听对象中的具体属性1.前言<scriptlang="ts"setup> //接受父组件传递的数据const... ...
目录
(为您整理了一些要点),点击可以直达。watch 的基本用法
watch() 默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数
第一个参数:侦听源,侦听源可以是一下几种
第二个参数:侦听源发生变化时要触发的回调函数。
(newValue, oldValue) => { /* code */}
当侦听多个来源时,回调函数接受两个数组,分别对应源数组中的新值和旧值
( [ newValue1, newValue2 ] , [ oldValue1 , oldValue2 ]) => {/* code */}
第三个参数:可选对象,可以支持一下这些选项
因为watch
的侦听源只能是上面的4中情况
从源码中可以看出,watch
接收三个参数:source
侦听源、cb
回调函数、options
侦听配置,最后会返回一个doWatch
doWatch
依然接受三个参数:source
侦听源、cb
回调函数、options
侦听配置
这里着重对侦听源的源码进行分析(source标准化)
如果source
是ref
类型,getter
是个返回source.value
的函数,forceTrigger
取决于source
是否是浅层响应式。
如果source
是reactive
类型,getter
是个返回source
的函数,并将deep
设置为true
。 当直接侦听一个响应式对象时,侦听器会自动启用深层模式
例子
如果source
是个数组,将isMultiSource
设为true
,forceTrigger
取决于source
是否有reactive
类型的数据,getter
函数中会遍历source
,针对不同类型的source
做不同处理。
如果source
是个function
。存在cb
的情况下,getter
函数中会执行source
,这里source
会通过callWithErrorHandling
函数执行,在callWithErrorHandling
中会处理source
执行过程中出现的错误;不存在cb
的话,在getter
中,如果组件已经被卸载了,直接return
,否则判断cleanup
(cleanup
是在watchEffect
中通过onCleanup
注册的清理函数),如果存在cleanup
执行cleanup
,接着执行source
,并返回执行结果。source
会被callWithAsyncErrorHandling
包装,该函数作用会处理source
执行过程中出现的错误,与callWithErrorHandling
不同的是,callWithAsyncErrorHandling
会处理异步错误。
其他情况getter
会被赋值为一个空函数
Vue3中怎么使用watch监听对象的属性值的详细内容,希望对您有所帮助,信息来源于网络。