一、问题
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添加的属性,不能监听到普通对象的变化。
/*
希望对你有帮助!
如有错误,欢迎指正,非常感谢!
*/