如果我观看解构的道具，Vue 3 手表将不起作用

Question

我正在尝试在 Vue 3 中观看道具，但奇怪的是，当我解构它时，观察者不起作用。但没有解构它按预期工作。我在这里缺少什么？

PS 我正在使用 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)
    })
}

Answer 1

props传入的setup是反应性对象，并且所有反应性都与对象本身周围的代理紧密相关。

如果您取此类对象的属性值，您将得到：

1. 对象（如果值是对象），也是反应式的
2. 本身不能响应的值（例如整数）

解构只是价值分配：

const  { modelValue } = props

...与以下相同：

const modelValue = props.modelValue 

您可以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它来获取它的值

Answer 2

解构props将导致该值失去反应性。（vue/无设置道具解构）

链接到文档规则

所以你可以做的是使用解构，如下所示watch：

watch(() => {
  const { modelValue } = props;
  console.log(modelValue);
});