问题：使用Vue3中的watch时报错Invalid watch source: undefined A watch source can only be a getter/effect funct

博客zhu虎康

于 2024-03-26 16:24:56 发布

阅读量1.8k

点赞数 3

分类专栏：遇见Bug_Vuejs 文章标签： watch

本文链接：https://blog.csdn.net/qq_53810245/article/details/137050123

版权

遇见Bug_Vuejs 专栏收录该内容

48 篇文章

订阅专栏

文章讨论了在Vue.js中遇到的Invalidwatchsource错误，指出问题在于使用非函数类型的监听值。作者提供了正确的代码示例，即使用箭头函数返回props值，以及处理对象监听时可能出现的问题

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- 问题
- 分析

问题

在这里插入图片描述
报错如下：

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 <Index onVnodeUnmounted=fn ref=Ref<
undefined > key=“/running-attention/safe/picture” > at <KeepAlive
key=1 include= [‘monitor’] >

分析

代码写法:

watch(props.visible, (newVal) => {
    if (newVal) {
        xxxx....
    }
})

一开始以为是不能直接用这种简单数据类型,改成了对象,后面看了官方文档,发现是写错了
监听值要用函数返回 () => props.visible
正确写法:

watch(() => props.visible, (newVal) => {
    if (newVal) {
        xxxx....
    }
})

如果你监听的是一个对象, 如:


```javascript
watch(props.formData, (newVal) => {
	if (newVal) {
	xxxx....
	}
})


控制台不会报错,但是不会进入你的 (newVal) => {}函数中,可能半天都找不到问题