Vue计算属性为何无法直接访问包装对象属性？

在Vue 3里，computed()返回的是Ref对象，不是你直接定义的计算结果对象。Ref是Vue响应式系统的包装类型，它本身只有一个.value属性，用来指向实际的响应式值。

看你的代码示例：

const storageNode = computed(() => ({
  type: "Chicken",
  id: "probablyFake",
}))

const onButton = () => {
  const id = storageNode.id;  // 始终返回undefined
  const vid = storageNode.value.id; // 正常取值
}

• storageNode.id是在访问Ref对象自身的id属性，但Ref对象根本没有这个属性，所以结果是undefined。
• storageNode.value才能拿到你通过计算属性生成的那个对象，此时访问.id自然能得到正确的值。

你之所以有误解，大概率是混淆了模板和脚本里的用法：

• 在Vue 3的模板中使用Ref对象时，会自动解包，不用手动加.value，比如写{{ storageNode.id }}就能正常显示值。
• 但在<script setup>或者组合式API的脚本逻辑里，必须通过.value访问Ref内部的实际值。项目里到处用.value是正确的规范写法，不是什么混乱的操作。

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