vue3使用watch失效的一个原因

在使用vue3时，如果发现watch监听未生效，可能是以下这个原因

在控制台报了如下一个watch警告

runtime-core.esm-bundler.js:40

[Vue warn]: Invalid watch source: undefined A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

at <AddUpBrandVoucher modelValue=false onUpdate:modelValue=fn ref="addUpRef" ... >

at <BrandVoucher class="router-view" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > ... >

at <KeepAlive key=1 max=10 >

at <BaseTransition appear=false persisted=false mode=undefined ... >

at <Transition name="fade" >

at <RouterView class="router-view" >

at <ElMain style= {background: '#f3f4f6'} >

at <ElContainer>

at <Admin onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > >

at <RouterView>

at <App>

这种原因是因为watch里面监听的值的类型不符合要求，watch监听的值要是以下几个类型：

函数类型，该函数返回一个值

ref对象

reactive对象

以上数据类型的数组

如果要监听ref对象中的某个值，要用第一种方式

例如图中，需要监听的值是一个ref对象里面的String类型的值，红框中监听值的写法是不对的，需要将监听值写成黄色框中的样子，以一种函数返回值书写。

vue3使用watch失效的一个原因相关推荐

小程序中maring-top、maring-left、maring-right、maring-bottom失效/没有用的原因及解决方案
小程序中maring-top.maring-left.maring-right.maring-bottom失效/没有用的原因及解决方案我在做小程序的时候经常遇到这种情况,明明是设置好了maring- ...
技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效
#vue3-cli4.5项目技巧1 router-link导航鼠标切换样式 vue3中.router-link-exact-active失效 vue3exact-active-classs失效 vue ...
【第三篇】MySQL 索引失效的常见原因【重点】
1.1 概述有时候不知道小伙伴有没有跟我一样的情况,明明已经建立了索引,但是通过explain发现语句并没有使用上索引,这可能是某些原因导致了我们的索引失效.所以本篇主要介绍的是索引失效的常见 ...
asciidoc文件阅读_可搜索的文件？是的你可以。选择AsciiDoc的另一个原因
asciidoc文件阅读 Elasticsearch是一个基于Apache Lucene的灵活,功能强大的开源,分布式实时云搜索和分析引擎,可提供全文搜索功能. 它是面向文档且无架构的. Asciid ...
可搜索的文件？是的你可以。选择AsciiDoc的另一个原因
Elasticsearch是一个基于Apache Lucene的灵活,功能强大的开源,分布式实时云搜索和分析引擎,可提供全文搜索功能. 它是面向文档且无架构的. Asciidoctor是一个纯Ruby ...
SQLServer 可更新订阅数据冲突的一个原因
原文:SQLServer 可更新订阅数据冲突的一个原因可更新订阅为什么有冲突? 可更新订阅中,当升级增加一个字段时,通常在发布服务器的发布数据库中增加,对表增加字段后,发布自动同步到订阅数据库中(复 ...
你缺钱只有一个原因就是你每天做赚钱的动作太少了
你缺钱只有一个原因就是你每天做赚钱的动作太少了,或者不正确. 学习是离钱很远的动作,输出分享价值,社交搞流量这些才是离赚钱最近的行为动作. 动作不正确是思维不正确,好好调整自己的思维,把注意力聚焦到赚 ...
陶瓷电容—导致失效的七大原因解析
1)潮湿对电参数恶化的影响空气中湿度过高时,水膜凝聚在电容器外壳表面,可使电容器的表面绝缘电阻下降.此外,对于半密封结构电容器来说,水分还可渗透到电容器介质内部,使电容器介质的绝缘电阻绝缘能力下降. ...
道路裂缝伸缩缝灌缝选用沥青灌封胶的另外一个原因
沥青灌封胶是道路路面专用裂缝修补材料,目前行业内用的灌缝材料还有普通沥青.乳化沥青.环氧树脂.聚氨酯等,嘉格沥青灌封胶胶应该比其他灌缝材料更专业,这也是道路裂缝伸缩缝灌缝选用沥青灌封胶的原因. 相比普 ...

vue3使用watch失效的一个原因

vue3使用watch失效的一个原因相关推荐

最新文章

热门文章