Vue 3组合式API中嵌套响应式对象如何正确使用.value？

阿华AIGC实验室

2026-5-9

Vue 3组合式API中嵌套响应式对象的.value使用指南

嘿，这个问题是Vue 3组合式API里新手很容易踩的坑，我来给你讲清楚正确的用法～

首先看你给出的代码：你用reactive创建了someObj这个嵌套响应式对象，这种情况下任何层级都不需要加.value。正确的计算属性写法应该是这样：

import { reactive, computed } from 'vue'
const someObj = reactive({ a: { b: { c: 1 } } })
const doubleSomeObj = computed(() => {
  return someObj.a.b.c * 2
})

为什么不用加`.value`？

reactive的设计就是专门用来处理对象/数组类型的响应式数据，它会递归地把对象的所有嵌套属性都转化为响应式的。当你直接访问someObj.a.b.c时，Vue会自动追踪这个属性的依赖，完全不需要手动添加.value——这个语法是专门给ref类型准备的。

那什么时候需要加`.value`？

只有当你用ref创建响应式数据时，才需要使用.value。比如如果把someObj改成ref创建，写法就变成这样：

import { ref, computed } from 'vue'
const someObj = ref({ a: { b: { c: 1 } } })
const doubleSomeObj = computed(() => {
  // 只在最外层的ref变量上加.value，子属性直接访问
  return someObj.value.a.b.c * 2
})

这里的逻辑是：ref会把传入的值（不管是基本类型还是对象）包装成一个带有.value属性的响应式容器。所以你需要先通过.value拿到容器内部的对象，之后的嵌套属性因为已经被Vue自动转化为reactive类型了，所以直接访问就行，不用再加.value。