[!info] related notes

• 所属 MOC: Vue MOC
• 上位主题: Vue 响应式系统, vue3
• 相关概念: vue-computed, Vue 中的 watch 和 watchEffect, React 状态模型 vs Vue3 响应式模型

Vue中的ref和reactive

ref 和 reactive 都用于创建响应式状态，但它们表达的粒度和使用习惯并不一样。

一句话定义

• ref 更适合表示一个响应式值
• reactive 更适合表示一个响应式对象

ref 的典型场景

• 数字、字符串、布尔值等基本类型
• 需要显式表示“这是一个响应式值”时
• 需要整体替换对象或数组时

const count = ref(0)
const user = ref({ name: 'Tom' })

在 JS 里访问时通常需要 .value。

reactive 的典型场景

• 表单对象
• 页面级状态对象
• 多字段紧密耦合的数据结构

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

两者最核心的差异

• ref 更像“包一层响应式容器”
• reactive 更像“直接把对象变成响应式代理”
• ref 在 JS 中通过 .value 取值
• reactive 直接访问属性

和 React 里的直觉怎么对照

如果用 React 的思路帮助记忆：

• ref 有一点像“一个明确包装起来的响应式值容器”
• reactive 更像“把整个对象接进响应式系统”

但要注意，这和 React 的 useRef 完全不是一回事。

React 的 useRef：

• 不参与响应式渲染
• 改了不会触发界面更新

Vue 的 ref：

• 本身就是响应式状态来源
• 改了会驱动依赖更新

这是很容易混淆的点。

怎么选更实用

• 基本类型优先 ref
• 结构化对象优先考虑 reactive
• 如果你需要经常整体替换对象，ref({}) 反而更顺手

常见误区

• 很多从 React 转到 Vue 的人，看到 ref 这个名字会误以为它主要是“拿 DOM 或保存可变值”
• 但在 Vue 里，ref 首先是响应式状态容器；模板里会自动解包，JS 逻辑里通常要自己写 .value
• 在 JS 中忘记写 .value
• 把 reactive 当成适合任意解构传递的容器
• 以为对象一定只能用 reactive，其实很多团队也常用 ref({})

最短记忆方式

• ref：一个值
• reactive：一个对象
• 选型重点不是教条，而是“你更常局部改属性，还是整体替换值”

面试要点

来自 vue-ref-vs-reactive-interview-question 的面试视角整理。

一句话回答

ref 适合把一个值作为独立响应式单元管理，reactive 适合让一个对象整体变成响应式；实际选择时更重要的是看状态边界和团队风格，而不只是数据类型。

最稳的回答主线

ref

• 适合单个值
• 也可以包对象
• 在组合式函数里经常更灵活

reactive

• 适合把一个对象整体代理成响应式
• 读写时更像普通对象

一句更像工程回答的话

如果状态天然就是一个独立字段，优先考虑 ref；如果状态本来就是一组紧密相关的对象结构，可以考虑 reactive。

常见误区

误以为对象就一定只能用 reactive

其实 ref 也可以包对象。

解构时忘记响应式丢失问题

对象结构被直接解构后，容易断开响应式语义，这也是很多人踩坑的地方。

最短记忆方式

ref 更像单值容器，reactive 更像对象代理。

Related notes

• Vue MOC
• Vue响应式系统