Vue3响应式原理：为何用.value？

Vue 3 的响应式系统中，ref 必须通过 .value 访问其值，根本原因在于 ref 返回的并非原始数据，而是一个由 getter/setter 封装的响应式包装对象——Vue 正是借此拦截对 .value 的读写来实现依赖收集与更新触发；虽然模板中会自动解包（如 {{ count }} 等价于 {{ count.value }}），但在 script 中必须显式使用 .value，且该机制仅作用于顶层 ref 变量；而基本类型之所以必须用 ref 而非 reactive，则是因为 Proxy 无法代理原始值，ref 通过将其包裹为带 value 属性的对象巧妙绕过这一限制，真正让简单数据也具备响应能力。

ref 为什么必须用 .value？本质是“包装器”设计

ref 不是直接返回原始值，而是返回一个响应式包装对象，这个对象内部用 .value 存放真实数据。Vue 需要通过这个属性拦截读写——在 getter 中收集依赖，在 setter 中触发更新。没有 .value 这一层，Vue 就无法追踪变化。

模板里不用 .value，是因为 Vue 做了自动解包

模板编译时，Vue 会识别 ref 类型变量，并自动访问其 .value。所以你在 {{ count }} 里写的是 ref 变量名，实际运行时等价于 {{ count.value }}。这不是语法糖，而是编译阶段的智能处理。

• 仅限模板中自动解包；在 script 中必须显式写 .value
• 解包只发生在顶层 ref 变量，嵌套对象属性（如 user.name）不会被解包
• 如果把 ref 赋给普通变量（如 const c = count），解包逻辑就失效，后续修改不会响应

对比 reactive：为什么基本类型非得用 ref？

JavaScript 的基本类型（string、number、boolean）无法被 Proxy 直接代理，而 reactive 底层依赖 Proxy。所以 Vue 用 ref 绕过这个限制：

• reactive({ count: 0 }) → 可以响应，因为是对象
• reactive(0) → 报错，Proxy 不能代理原始值
• ref(0) → 成功，因为返回的是 { value: 0 } 对象，Proxy 可代理该对象

手把手看底层做了什么

简化版逻辑如下（非源码直抄，但反映核心机制）：

function ref(raw) {
  const refObject = {
    _raw: raw,
    __v_isRef: true,
    get value() {
      track(refObject, 'value') // 收集依赖
      return refObject._raw
    },
    set value(newVal) {
      refObject._raw = newVal
      trigger(refObject, 'value') // 触发更新
    }
  }
  return refObject
}

正是这个 getter/setter，让 .value 成为响应式入口。你每次读写它，Vue 都能感知。

今天关于《Vue3响应式原理：为何用.value？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！