Vue3中setup返回函数为何无法通过ref.value访问toRefs包装属性？

你遇到的问题本质是Vue3的自动解包机制在起作用，具体解释如下：

• 当你在setup中返回ref对象（包括toRefs生成的ref）时，Vue会自动将这些ref解包后挂载到组件实例（也就是this）上。这时候通过this.first访问到的已经是原始值"a"，而非ref对象，所以this.first.value自然会得到undefined——因为原始值没有.value属性。

• 这个机制和模板中的逻辑完全一致：你在模板里写{{first}}就能直接显示值，不需要写{{first.value}}，就是因为Vue对模板中的ref做了自动解包。

两种正确的写法 #

写法1：通过this访问解包后的值

直接去掉.value即可：

f() {
  console.log(this.first); // 输出"a"
}

写法2：在setup闭包中直接使用ref变量

如果想保留ref的特性（比如后续要修改值触发响应式更新），可以在setup内部保留ref的引用，此时需要用.value：

setup() {
  let info = reactive({
    first: "a",
    last: "b"
  });
  // 保留ref引用
  const { first, last } = toRefs(info);
  const f = () => {
    console.log(first.value); // 输出"a"
  };
  return { first, last, f };
}

补充说明 #

只有当ref处于组件实例（this）或模板上下文中时，Vue才会自动解包。如果是在setup内部直接操作未被挂载到实例的ref，或者在普通的JS对象中嵌套的ref，还是需要手动使用.value来访问值。

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