如果我观看解构的道具，Vue 3 手表将无法工作答案

【问题标题】：Vue 3 watch doesn’t work if I watch a destructured prop如果我观看解构的道具，Vue 3 手表将无法工作
【发布时间】：2021-03-03 16:26:53
【问题描述】：

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

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

【问题讨论】：

您不需要引用您的代理。因此，如果属性发生变化，代理可以拦截。通过解构，你将你的解构属性分配给一个变量，你失去了引用

标签： javascript vue.js vuejs3 vue-composition-api

【解决方案1】：

props 传递到 setup 是 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 来获取它的值

【讨论】：

哦，你救了我的命！谢谢，我不知道我需要像这样将 props 转换为 refs。
如果您将props 对象作为一个整体传递，则您不需要。但是，如果您想将对象拆分为更小的部分并保持“部分”的反应性（同样适用于任何 reactive 对象）

【解决方案2】：

解构props 将导致值失去反应性。 (vue/no-setup-props-destructure)

link to the docs rule

因此，您可以改为在 watch 中使用解构，如下所示：

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

【讨论】：