Vue3中setup内obj.count无法动态更新数据的问题咨询

为什么obj.count赋值给form.count无法动态更新？ #

当你把ref(1)创建的count放入reactive对象obj时，Vue会自动对ref进行解包——也就是说obj.count此时是原始数值1，而非ref对象。执行form.count = obj.count时，本质是把当前的数值1直接赋值给form.count，这是一次值传递，form.count成为了独立的普通数值，不再和obj.count或count有响应式关联。后续点击修改count++时，obj.count会因为响应式自动更新，但form.count不会同步变化，因为它只是一个静态数值。

而当你把form.count赋值为obj时，传递的是reactive对象的引用，所以obj内部的count变化时，form.count（也就是obj本身）的属性会同步更新，自然能触发响应式，但此时传递的是整个对象。

解决方法 #

方法1：直接绑定ref对象 #

让form.count直接引用原始的count ref，由于form是reactive对象，会自动解包ref，后续count的变化会同步到form.count：

setup(props) {
    let count = ref(1)
    let form = reactive({
        name: props.user.name,
        count: count, // 直接赋值ref对象
    })
    return { form, count }
}

此时点击count++，form.count会同步更新，传递的是单一数值。

方法2：使用toRef创建响应式引用 #

通过toRef从obj中提取count的响应式引用，赋值给form.count，这样两者会共享同一个响应式数据源：

import { ref, reactive, toRef } from 'vue'

setup(props) {
    let count = ref(1)
    let obj = reactive({ count })
    let form = reactive({
        name: props.user.name,
        count: toRef(obj, 'count'), // 创建响应式引用
    })
    return { form, count, obj }
}

方法3：使用计算属性 #

通过computed监听obj.count的变化，动态返回最新值：

import { ref, reactive, computed } from 'vue'

setup(props) {
    let count = ref(1)
    let obj = reactive({ count })
    let form = reactive({
        name: props.user.name,
        count: computed(() => obj.count), // 计算属性依赖obj.count
    })
    return { form, count, obj }
}

内容的提问来源于stack exchange，提问作者mrDandaleonx