Vue 3 watch 无法监听解构属性的终极指南：原因、解决方案和最佳实践

vue.js

2024-03-07 01:05:22

Vue 3 中解构属性的 watch 监听

问题

在 Vue 3 中，如果你尝试监听解构的 prop，你会发现 watch 监听器不起作用。

原因

Vue 3 使用响应式代理来跟踪数据的更改。当 prop 被解构时，Vue 会创建一个该 prop 的局部副本，而不是跟踪原始 prop 的更改。

解决方案

1. 使用原始 prop 名称

watch(() => props.modelValue, (newValue, oldValue) => {
    // ...
})

2. 使用函数返回解构属性

watch(() => {
    const { modelValue } = props
    return modelValue
}, (newValue, oldValue) => {
    // ...
})

深入探讨

1. 响应式代理

响应式代理是一个 JavaScript 对象，它可以自动跟踪其属性的更改并触发对应的响应函数。当 Vue 侦听一个响应式属性时，它会在属性的值发生变化时执行相应的处理逻辑。

2. 解构 prop 的副本

当 prop 被解构时，Vue 会创建一个局部副本。这个副本不再是原始 prop 的响应式代理，因此 watch 监听器不会对它进行跟踪。

真实世界示例

考虑以下示例：

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

    setup(props, context) {
        // 使用原始 prop 名称
        watch(() => props.modelValue, (newValue, oldValue) => {
            console.log('Using original prop name:', newValue)
        })

        // 使用函数返回解构属性
        watch(() => {
            const { modelValue } = props
            return modelValue
        }, (newValue, oldValue) => {
            console.log('Using function to return destructured prop:', newValue)
        })
    },
}