Vue2组合式API+Pinia：为何无法通过引用创建响应式快捷变量？

在Vue2 + 组合式API插件环境下，我在Pinia Store中定义了包含多个子对象的objData，每个子对象带有data属性及其他元数据。因该变量路径较长且多处使用，尝试创建指向其data属性的快捷变量，但直接赋值或用reactive包裹均无法保持响应性，仅使用computed时可行。

Pinia Store对象结构 #

objData: {
    "fruit": {
        data: {...},
        ...
    },
    "candy": {
        data: {...},
        ...
    },
}

setup函数代码 #

setup() {
    const myStore = useMyStore()
    // const fruit = myStore.objData['fruit'].data // <- 直接赋值，无效
    // const fruit = reactive(myStore.objData['fruit'].data) // <- 用reactive包裹，无效
    const fruit = computed(() => myStore.objData['fruit'].data) // 有效
    return {
        myStore,
        fruit,
    }
}

数据修改逻辑（组合式函数中） #

if (!("fruit" in store.objData)) {
    set(myStore.objData, "fruit", reactive({
        data: ref(null),
    }))
}
set(myStore.objData["fruit"], 'data', objNewData)

页面模板 #

<div>
    {{myStore.objData['fruits'].data.fruit_name}} 正常响应
    {{fruit.fruit_name}} 仅使用computed时正常响应
</div>

除computed外，其他方式仅能获取初始值，无法随Store更新，我有两个疑问：

1. 使用computed创建此类响应式快捷变量是否存在性能问题或不合理之处？
2. 为何无法通过直接引用响应式变量来创建快捷方式？我原以为只是指向内存地址。

1. 使用computed的性能与合理性 #

完全没问题，甚至是推荐的做法：

• Vue的computed自带缓存优化：只有依赖的响应式数据发生变化时，才会重新计算，否则直接返回缓存值，性能开销极低。
• 这种场景下用computed就是为了简化长路径访问，同时保留响应性，逻辑清晰且符合Vue响应式设计规范。
• 只要你的computed回调只是简单的属性访问（无复杂计算逻辑），几乎不会有性能问题。

2. 直接引用失效的原因 #

这是由Vue2的响应式原理决定的：

• 直接赋值：const fruit = myStore.objData['fruit'].data本质是把当前data的内存地址赋值给fruit。后续如果通过set修改了myStore.objData['fruit'].data的指向（比如替换成新的objNewData），fruit仍然指向原来的旧地址，自然不会更新。
• 用reactive包裹：reactive(myStore.objData['fruit'].data)会创建一个新的响应式对象，把原data的属性拷贝进去。后续修改原Store中的data时，这个新对象和原数据已经没有关联，所以不会同步更新。
• Vue2的响应式基于Object.defineProperty实现，它只能追踪对象属性的访问和修改，无法追踪变量引用的变化。而computed会依赖myStore.objData['fruit'].data这个属性的访问，当属性值变化时会触发重新计算，因此能保持响应性。

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