深入 Vue3 响应式：为什么有的要加.value，有的不用？从设计到源码彻底讲透

悟空瞎说
37 阅读9分钟

大家好，我是一名拥有 10 年前端开发经验的老前端，从 jQuery 时代一路走到现在，见证了前端框架的迭代与演进。Vue3 作为目前前端主流框架，其响应式系统的重构是核心亮点之一，但日常开发中，ref 需要加.value、reactive 不用加这个问题，几乎是所有开发者都会遇到的疑惑。

今天这篇文章，我会从设计初衷、JS 语言限制、响应式原理、源码实现四个维度，把.value的来龙去脉彻底讲透，帮你从根本上理解 Vue3 的设计哲学，告别死记硬背。

一、先抛核心结论：为什么会有.value？

先给大家一个最直白的答案：Vue3 必须用 .value，是 JavaScript 这门语言本身的限制导致的，而非 Vue 故意设计复杂；.value 是为了让「基础类型」也能拥有响应式能力。

我们日常开发的痛点：

vue

<script setup>
// 1. 基础类型用 ref → 必须加 .value
const count = ref(0)
console.log(count.value) // 0
count.value++

// 2. 对象/数组用 reactive → 不用加 .value
const user = reactive({ name: '张三', age: 18 })
console.log(user.name) // 张三
user.age++
</script>

为什么同样是响应式数据，用法天差地别？接下来我们从JS 语言特性→Vue2 响应式缺陷→Vue3 响应式设计→源码解析一步步拆解。

二、前置知识：JS 中的两种数据类型

要理解.value，必须先搞懂 JavaScript 最核心的知识点：值类型 vs 引用类型

1. 值类型（原始类型）

  • 类型：string/number/boolean/null/undefined/Symbol/BigInt
  • 存储：栈内存，直接存值
  • 传递：值拷贝，赋值后互不影响
  • 关键特性：无法被引用，没有 “地址” 概念

js

let a = 10
let b = a
b = 20
// a 还是 10，b 是 20 → 完全独立

2. 引用类型

  • 类型：object/array/function
  • 存储：栈内存存地址，堆内存存数据
  • 传递：地址拷贝，多个变量指向同一个数据
  • 关键特性：可以被引用，修改属性会影响所有指向它的变量

js

const obj = { count: 10 }
const obj2 = obj
obj2.count = 20
// obj.count 也变成 20 → 共享同一个引用

三、Vue2 响应式的痛点：为什么要重构？

Vue2 的响应式基于 Object.defineProperty，它有一个致命缺陷：只能劫持对象的属性，无法劫持原始值

js

// Vue2 伪代码
let count = 0
Object.defineProperty(window, 'count', {
  get(){ return count },
  set(val){ count = val }
})
// 这种方式只能劫持全局变量，无法封装复用

这就导致：

  1. 原始类型无法独立响应式：必须包裹在对象里
  2. 解构丢失响应式：const { name } = reactive(user) 会失效
  3. 数组需要重写方法：性能开销大

Vue3 团队的目标很明确：打造一套真正通用、无缺陷的响应式系统，同时支持原始类型和引用类型。

四、Vue3 响应式核心设计：Proxy 与 Ref 容器

1. 引用类型的解决方案：reactive + Proxy

对于对象 / 数组，JS 天生支持引用传递，Vue3 直接用 ES6 的 Proxy 劫持整个对象：

js

const user = reactive({ name: '张三' })
  • reactive 接收一个对象，返回一个 Proxy 代理对象
  • 代理对象和原对象用法完全一致，不需要加任何额外语法
  • 访问 / 修改属性时，自动触发依赖收集 / 更新

这就是为什么 reactive 不用加 .value：Proxy 完美适配引用类型，无语法负担。

2. 原始类型的困境：无法被 Proxy 代理

核心问题来了：Proxy 只能代理「对象 / 数组」，不能代理原始类型！

js

// 报错！Proxy 只能接收对象作为 target
const count = new Proxy(10, {})

这是 JavaScript 标准规定的，不是 Vue 的问题。

那原始类型怎么实现响应式？Vue 团队给出了唯一解：包装成对象

3. 终极方案：Ref —— 原始类型的「响应式容器」

ref 的本质：把一个原始类型的值，包裹在一个单属性对象里，用 .value 作为唯一访问入口。

一个极简的 ref 伪代码：

js

function ref(value) {
  // 用对象包装原始值，让 Proxy 可以代理
  return {
    _isRef: true,
    value: value // 所有读写都通过 value 属性
  }
}

这样一来：

  • 原始类型 → 变成了引用类型（对象）
  • Proxy 可以正常代理
  • 我们就可以监听值的变化

这就是 .value 的唯一来源：为了突破 JS 语言限制，给原始类型套上响应式外壳。

五、源码级解析：ref 到底是怎么实现的？

光看伪代码不够，我们直接看 Vue3 官方源码，彻底扒开 ref 的底层实现。

源码版本：Vue 3.4+，核心文件：packages/reactivity/src/ref.ts

1. ref 函数入口

typescript

运行

export function ref<T = any>(value: T): Ref<T> {
  // 如果已经是 ref，直接返回
  if (isRef(value)) {
    return value
  }
  // 调用核心创建方法
  return createRef(value)
}

2. createRef 核心创建逻辑

typescript

运行

function createRef(rawValue: unknown, shallow = false) {
  // 如果已经是 ref，直接返回
  if (isRef(rawValue)) {
    return rawValue
  }
  // 创建 RefImpl 实例
  return new RefImpl(rawValue, shallow)
}

3. RefImpl 类：ref 的真正本体（重点！）

typescript

运行

class RefImpl<T> {
  private _value: T
  private _rawValue: T
  public readonly __v_isRef = true // 标识是 ref 对象

  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = value
    // 如果是深层响应式，会把对象自动转为 reactive
    this._value = __v_isShallow ? value : toReactive(value)
  }

  // getter：访问 .value 时触发
  get value() {
    // 依赖收集（track 是 Vue 响应式核心）
    trackRefValue(this)
    return this._value
  }

  // setter：修改 .value 时触发
  set value(newVal) {
    // 判断值是否变化
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = this.__v_isShallow ? newVal : toReactive(newVal)
      // 触发视图更新（trigger 是 Vue 响应式核心）
      triggerRefValue(this)
    }
  }
}

源码核心总结：

  1. ref 本质是 RefImpl 类的实例对象
  2. 这个对象只有一个公开属性：value
  3. 我们读写 xxx.value，本质是调用类的 get/set 访问器
  4. get 收集依赖，set 触发更新 → 实现响应式
  5. 内置标识 __v_isRef: true，让 Vue 能识别这是 ref

六、源码级解析：reactive 为什么不用 .value？

再对比看 reactive 源码，你就彻底明白两者的区别。

核心文件：packages/reactivity/src/reactive.ts

typescript

运行

export function reactive(target: object) {
  // 如果是 ref，直接返回原始值
  if (isRef(target)) {
    return target.value
  }
  // 创建 Proxy 代理对象
  return createReactiveObject(
    target,
    false,
    mutableHandlers, // 代理的 get/set 逻辑
    mutableCollectionHandlers
  )
}

createReactiveObject 最终会返回：

js

// 伪代码
new Proxy(target, {
  get(target, key) {
    track(target, key) // 收集依赖
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    const result = Reflect.set(target, key, value)
    trigger(target, key) // 触发更新
    return result
  }
})

reactive 与 ref 的核心差异：

  1. reactive 代理整个对象，直接访问属性即可
  2. ref 代理的是包装对象的 value 属性，必须通过 .value 访问
  3. 两者底层依赖收集 / 更新逻辑完全一致，只是数据载体不同

七、语法糖：为什么模板里不用加 .value？

大家肯定有疑问：为什么在 <template> 里用 ref，不用加 .value？

vue

<template>
  <!-- 自动解包，不用写 count.value -->
  <div>{{ count }}</div>
</template>

这不是魔法，是 Vue 编译器自动帮我们加了！

编译原理：

模板代码：

html

预览

<div>{{ count }}</div>

编译后生成的渲染函数：

js

export function render(_ctx, _cache, $props, $setup) {
  // 编译器自动识别 $setup.count 是 ref，自动访问 .value
  return createElementVNode("div", null, $setup.count.value)
}

编译器源码逻辑：

Vue 在编译时会检查变量是否有 __v_isRef 标识，如果是，就自动追加 .value。

这就是模板自动解包，目的是减少开发冗余。

八、进阶：ref 自动解包规则（避坑必看）

Vue3 对 ref 做了智能解包，但有明确规则，这也是面试高频考点：

1. 顶层 ref 自动解包

js

const count = ref(0)
// 模板/setup 顶层直接用，自动解包
count // 等价于 count.value

2. reactive 中的 ref 自动解包

js

const count = ref(0)
const state = reactive({ count })

// 自动解包，不用写 state.count.value
console.log(state.count) // 0

3. 数组 / 集合中的 ref 不解包

js

const arr = reactive([ref(0)])
// 必须加 .value
console.log(arr[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 必须加 .value
console.log(map.get('count').value)

4. 解构会丢失自动解包

js

const state = reactive({ count: ref(0) })
// 解构后变成普通 ref，必须加 .value
const { count } = state
console.log(count.value)

核心记忆口诀：

  • 顶层 ref + reactive 内的 ref → 自动解包
  • 数组 / 集合 / 解构后的 ref → 必须手动 .value

九、为什么不设计成：所有响应式都不用 .value？

很多新手会吐槽：为什么不让 ref 也像 reactive 一样，不用加 .value？这样不更统一吗？

我给大家两个无法反驳的理由：

1. JS 语言死限制：原始类型无法劫持

js

// 理想中的语法
let count = $ref(0)
count++

这种语法在 JS 中绝对无法实现，因为：

  • count 是原始类型，存的是值，不是引用
  • 你修改 count 只是修改变量本身，没有任何办法监听这个行为

除非 TC39 标准新增语法，否则 Vue 永远做不到。

2. 宏语法：Vue 曾尝试过（$ref）

Vue3 早期推出过 ref 宏语法：

js

let count = $ref(0)
count++ // 不用 .value

本质是编译时转译：

js

const __ref_count = ref(0)
Object.defineProperty(window, 'count', {
  get: () => __ref_count.value,
  set: v => __ref_count.value = v
})

但最终被废弃，原因：

  • 破坏 JS 原生语义，调试困难
  • 解构、传递会出问题
  • 团队学习成本高
  • 不符合 Vue 渐进式设计理念

所以： .value 是目前最平衡、最可靠、最符合 JS 原生语义的方案。

十、14 年老前端给你的最佳实践

结合我多年的开发经验，给大家总结一套实用、可落地的 ref/reactive 使用规范：

1. 基础类型优先用 ref

js

const count = ref(0)
const name = ref('')
const loading = ref(false)

2. 多个关联对象用 reactive

js

const form = reactive({
  username: '',
  password: ''
})

3. 函数返回响应式数据，必须用 ref

js

// 正确：ref 可以独立传递，不会丢失响应式
function useCount() {
  const count = ref(0)
  return count
}

// 错误：reactive 解构后丢失响应式，不适合独立返回
function useUser() {
  const user = reactive({ name: '' })
  return user // 不推荐
}

4. 不要滥用 reactive 包裹基础类型

js

// 反面教材
const state = reactive({ count: 0 })

// 推荐
const count = ref(0)

5. script setup 中，用 computed 时记得加 .value

js

const doubleCount = computed(() => count.value * 2)

十一、总结：一张图看懂 .value 本质

最后用一句话总结全文核心：.value 不是 Vue 的设计缺陷，而是 JS 语言限制下的最优解；ref 是原始类型的响应式容器，reactive 是引用类型的响应式代理。

表格

类型数据类型实现方式语法核心原因
ref原始类型 / 对象RefImpl 包装对象.valueJS 原始类型无法被 Proxy 代理
reactive对象 / 数组Proxy 直接代理无 .valueJS 引用类型天然支持代理

写在最后

我想告诉大家：学习 Vue3 响应式，不要死记硬背 .value 规则，而是要理解语言底层限制 + 框架设计哲学。

.value 看似是一个小语法点，背后却是 Vue 团队对 JS 语言的深刻理解，以及对响应式系统的极致打磨。理解了这一点，你才算真正入门 Vue3 响应式原理。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，后续我会继续分享更多前端底层原理、源码解析、实战经验。

有任何疑问，欢迎在评论区交流！

avatar
文章
阅读
粉丝