javascript - 如果我观看解构的 Prop ，Vue 3 watch 将无法工作

我试图在 Vue 3 中观看一个 Prop ，但奇怪的是，当我解构它时，观察者不起作用。但没有解构它按预期工作。我在这里缺少什么？
附言我正在使用 Vue 3 + Vite
这不起作用

export default {
    props: {
        modelValue: {
            type: Boolean,
            default: false,
        },
    },

    setup({ modelValue }, context)
    {
        watch(() => modelValue, (newValue, oldValue) => {
            console.log(newValue)
        })
    },
}

但是如果我不解构它，那么 就可以了

setup(props, context) {
    watch(() => props.modelValue, (newValue, oldValue) => {
        console.log(newValue)
    })
}

最佳答案

传递给 props 的 setup 是 reactive 对象，并且所有反应性都与对象本身周围的代理紧密相关。
如果您取此类对象的属性值，您将得到:

对象(如果值为对象)，也是响应式的

本身不能响应的值(例如整数)

解构只是值(value)分配:

const  { modelValue } = props

...与以下相同:

const modelValue = props.modelValue

您可以按照 docs 中所述使用 toRefs

export default {
    props: {
        modelValue: {
            type: Boolean,
            default: false,
        },
    },

    setup(props, context)
    {
        let { modelValue } = toRefs(props)

        watch(modelValue, (newValue, oldValue) => {
            console.log(newValue)
        })
    },
}

现在 modelValue 是 ref 所以它可以作为 watch 的第一个参数传递(不需要函数)并且在大多数地方你必须使用 modelValue.Value 来获取它的值

关于javascript - 如果我观看解构的 Prop ，Vue 3 watch 将无法工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/64926354/