原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
Vue3中怎么使用watch监听对象的属性值
watch()默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数
第一个参数：侦听源，侦听源可以是一下几种
一个函数，返回一个值一个ref一个响应式对象（reactive）或是由以上类型的值组成的数组
第二个参数：侦听源发生变化时要触发的回调函数。
(newValue,oldValue)={/*code*/}
当侦听多个来源时，回调函数接受两个数组，分别对应源数组中的新值和旧值
([newValue1,newValue2],[oldValue1,oldValue2])={/*code*/}
第三个参数：可选对象，可以支持一下这些选项
immediate：侦听器创建时立即触发回调deep：如果源是一个对象，会强制深度遍历，以便在深层级发生变化时触发回调函数flush：调整回调函数的刷新时机onTrack/onTrigger：调试侦听器的依赖
2.原因
因为watch的侦听源只能是上面的4中情况
constobj=reactive({count:0})
//错误，因为watch()中的侦听源是一个number，最终source返回的getter函数是一个空，所以就得不到侦听的数据
watch(obj.count,(count)={
console.log(`countis:${count}`)
//正确，主要思想是，将侦听源转化为以上4种类型（转化为getter函数是最简单方便的）
watch(
()=obj.count,
(count)={
console.log(`countis:${count}`)
)
3.watch源码分析
exportfunctionwatchT=any,ImmediateextendsReadonlyboolean=false(
source:T|WatchSourceT,
cb:any,
options:WatchOptionsImmediate
):WatchStopHandle{
if(__DEV__!isFunction(cb)){
warn(
`\`watch(fn,options)\`signaturehasbeenmovedtoaseparateAPI.`+
`Use\`watchEffect(fn,options)\`instead.\`watch\`nowonly`+
`supports\`watch(source,cb,options)signature.`
returndoWatch(sourceasany,cb,options)
}
从源码中可以看出，watch接收三个参数：source侦听源、cb回调函数、options侦听配置，最后会返回一个doWatch
4.doWatch源码分析
functiondoWatch(
source:WatchSource|WatchSource[]|WatchEffect|object,
cb:WatchCallback|null,
{immediate,deep,flush,onTrack,onTrigger}:WatchOptions=EMPTY_OBJ
):WatchStopHandle{
//...
//当前组件实例
constinstance=currentInstance
//副作用函数，在初始化effect时使用
letgetter:()=any
//强制触发侦听
letforceTrigger=false
//是否为多数据源。
letisMultiSource=false
}
doWatch依然接受三个参数：source侦听源、cb回调函数、options侦听配置
这里着重对侦听源的源码进行分析（source标准化）
文档评论（0）