[!info] related notes

• 所属 MOC: Vue MOC
• 上位主题: Vue 响应式系统, Vue 3
• 相关概念: Vue 计算属性, 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：一个对象
• 选型重点不是教条，而是“你更常局部改属性，还是整体替换值”

学习检查

不看正文回答：

1. ref 和 reactive 的核心表示模型分别是什么？
2. 为什么“基本类型只能用 ref、对象只能用 reactive”是不准确的？
3. 需要频繁整体替换对象时，为什么 ref({}) 往往更自然？
4. 为什么直接解构 reactive 对象可能破坏响应式语义？
5. Vue ref 与 React useRef 为什么只是名字相似、职责却不同？
6. 给一个表单状态和一个可整体替换的用户对象，分别说明你会如何选。

Related notes

• Vue MOC
• Vue响应式系统