Invalid watch source: 8700713675579406. A watch source can only be a getter/effect function, a ref

一、问题

1.setup中使用 watch监听时报错：vue.esm.js?9b69:5059 [Vue warn]: Invalid watch source: 8700713675579406. A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

found in

2.代码如下

        watch(currentOperaMsg.careid, (newval, oldval) => {
            console.log("reload",reload)
            reload();
        });

 二、解决方法

1.错误原因：watch监听的东西 不正确，上面的报错明确指出 watch只能监听一个 getter/effet 函数，或者一个ref变量，或一个reactive对象，或由上述三种类型组成的数组（一次性监听多个变量）。

   我代码中的currentOperaMsg 是响应式的对象。但是currentOperaMsg中的属性 careid不是响应式的。需要转换成一个 getter函数，才可以被正常监听。

2.正确代码

        watch(() => currentOperaMsg.careid, (newval, oldval) => {
            console.log("reload",reload)
            reload();
        });

三、总结

1.setup中 watch监听的 只能是 ： 一个 getter/effect函数(对应响应式变量才有其对应的getter函数），或一个ref变量、reactive类型的对象，或由上述三种类型组成的数组（一次性监听多个变量）。

2.如果要监听的不是响应式数组或对象，要转换成响应式的才可以监听；对于响应式对象的属性需要用getter函数解析后才能监听.

3.特别注意:无论是组合式API还是选项式 API 都只能监听到响应式变量的 状态变化（组合式API：ref或reactive声明的变量及其属性;选项式API:data中声明的变量或通过vue.$set添加的属性，不能监听到普通对象的变化。

 

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/