★ ★ ★ ★ ★

在 Vue 3 中，ref 和 reactive 有何区别？

⚡ 速记答案（30 秒）

ref：包一份"值"，典型用于基本类型；访问要 .value，可以整体重新赋值。reactive：包"对象/数组"，通过 Proxy 深度代理内部属性；不能直接给整个变量重新赋值。

📖 详细讲解

标准面试回答（推荐记住）

ref 适合包装基本类型，访问时需要 .value，可以整体替换；reactive 用于对象和数组，通过 Proxy 深度代理，不能直接替换整个对象。模板中两者都会自动解包。解构 reactive 对象会丢失响应性，需要用 toRef 或 toRefs。

ref vs reactive 核心区别

特性	ref	reactive
适用类型	任意类型	对象/数组
访问方式	需要 .value	直接访问
整体替换	✅ 支持	❌ 丢失响应性
模板解包	自动	自动
解构	保持响应性	需要 toRefs

使用建议

推荐使用 ref：
• 基本类型（string、number、boolean）
• 需要整体替换的对象
• 组件 ref 引用

推荐使用 reactive：
• 复杂对象状态
• 表单数据
• 不需要整体替换的场景

常见陷阱

// ❌ 解构丢失响应性
const { count } = reactive({ count: 0 })

// ✅ 使用 toRefs 保持响应性
const { count } = toRefs(state)

// ✅ 或使用 toRef 单个属性
const count = toRef(state, 'count')

✅ 面试要点

•清楚两者的使用场景区别
•理解解构丢失响应性的原因
•知道 toRef/toRefs 的用途

💻 代码示例

ref vs reactive 对比

import { ref, reactive, toRefs } from 'vue'

// ref - 适合基本类型
const count = ref(0)
count.value++ // 需要 .value

// reactive - 适合对象
const state = reactive({ count: 0, name: 'Vue' })
state.count++ // 直接访问

// ❌ 错误：整体替换会丢失响应性
// state = { count: 1, name: 'React' }

// ✅ 正确：解构需要 toRefs
const { count: countRef, name } = toRefs(state)