vue3 watch 报错 Invalid watch source

在 vue3 中使用 watch 监听弹框的 visible,控制台报错警告

runtime-core.esm-bundler.js:40 [Vue warn]: Invalid watch source: true A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

代码写法:

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

一开始以为是不能直接用这种简单数据类型,改成了对象,后面看了官方文档,发现是写错了

监听值要用函数返回 () => props.visible

正确写法:

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

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

watch(props.formData, (newVal) => {

if (newVal) {

xxxx....

}

})

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

之前 vue2 总是直接写值,所以一定一定要检查自己的语法写得对不对