Vue.js 如果我观看解构的props，Vue 3 手表将无法正常工作

发布于11月20日

我试图在Vue 3中观看props ，但奇怪的是，当我分解props 时，观察者就不工作了.但在不 destruct struct 的情况下，它可以按预期工作.我错过了什么？

P.S. I am using Vue 3 + Vite

This is not working

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

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

但如果我不分解它，那么it works

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

推荐答案

props传给setup的是reactive个物体，所有的react 都与物体周围的代理紧密相连.

如果对该对象的属性取值，则可以得到:

对象(如果值为Object)，它也是被动的
值(例如整数)，该值本身不能react

而解构只是价值分配:

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