原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
第
Vue3?Watch踩坑实战之watch监听无效
目录ref与reactivewatch总结
ref与reactive
ref函数和reactive函数都是用来定义响应式数据
但是reactive更适合定义引用类型、ref适合定义基本数据类型（可接收基本数据类型和对象)
reactive
1、深层次响应式，本质是将传入的数据包装成一个Proxy对象
2、参数必须是对象或者数组，如果要让对象的某个元素实现响应式时，需要使用toRefs，这样每个都需要采用value方式访问
ref
1、函数参数可以是基本数据类型，也可以接受对象类型
2、如果参数是对象类型时，其实底层的本质还是reactive
3、ref响应式原理是依赖于Object.defineProperty()的get()和set()的
watch
在自身组件监听reactive对象
leta=reactive({test:123,bg:456,hh:{hhh:78}})
//定时器1
setTimeout(()={
a.test=456
},2000)
//定时器2
setTimeout(()={
a.hh.hhh=56
},4000)
//定时器3
setTimeout(()={
a={}
},6000)
watch(a,()={
//定时器1，2可以触发监听，不需要deep也可以
//定时器3不能触发监听，因为对象的地址已经发生改变了
console.log(change)
//函数返回方式采用deep可以监听,不加deep不能监听
watch(
()=a,
()={
console.log(funcchange)
deep:true
)
为什么不加deep不能监听呢，直接从源码看
functionwatch(source,cb,options){
if(!isFunction(cb)){
warn2(
`\`watch(fn,options)\`signaturehasbeenmovedtoaseparateAPI.Use\`watchEffect(fn,options)\`instead.\`watch\`nowonlysupports\`watch(source,cb,options)signature.`
returndoWatch(source,cb,options);
functiondoWatch(source,cb,{immediate,deep,flush,onTrack,onTrigger}=EMPTY_OBJ){
//代码不完整，截取部分
...
if(isRef(source)){
getter=()=source.value;
forceTrigger=isShallow(source);
}elseif(isReactive(source)){
//这里，如果source是reactive
//则deep=true
//而deep为true后面会执行traverse
getter=()=source;
deep=true;
}elseif(isArray(source)){
isMultiSource=true;
forceTrigger=source.some((s)=isReactive(s)||isShallow(s));
getter=()=source.map((s)={
if(isRef(s)){
returns.value;
}elseif(isReactive(s)){
returntraverse(s);
}elseif(isFunction(s)){
returncallWithErrorHandling(s,instance,2/*WATCH_GETTER*/);
}else{
warnInvalidSource(s);
}elseif(isFunction(source)){
//如果是函数，
//最终getter
文档评论（0）