如果我观看一个被破坏的道具，Vue 3 手表将无法工作

Question

我正在尝试在 Vue 3 中观看道具，但奇怪的是，当我解构它时，观看者无法正常工作。但如果不解构，它会按预期工作。我在这里错过了什么？

P.S。我正在使用 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 将导致值失去反应性。 (vue/no-setup-props-destructure)

link to the docs rule

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

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

Answer 2

传递给 setup 的

props 是 reactive 对象，所有反应都与对象本身周围的代理密切相关。

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

对象（如果值为对象），也是反应式的
不能自行反应的值（例如整数）

解构只是赋值：

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 得到它的值

如果我观看一个被破坏的道具，Vue 3 手表将无法工作

Vue 3 watch doesn’t work if I watch a destructured prop

javascript

vue.js

vuejs3

vue-composition-api