HoRain云--Vue3响应式：ref与reactive终极指南-CSDN博客

维度	ref	reactive
适用数据类型	基本类型（`string`/`number`/`boolean`）和对象	仅对象或数组（基本类型需包装为对象）
访问方式	通过 `.value` 访问（JS 中）	直接访问属性（如 `state.count`）
模板中使用	自动解包（无需 `.value`）	直接访问属性
重新赋值	支持整体替换（`ref.value = newObj`）	❌ 不可替换整个对象（需用 `Object.assign` 合并）
解构行为	解构后仍保持响应性	❌ 解构会丢失响应性，需配合 `toRefs`
响应式原理	劫持 `.value` 的 `get/set`（基于 `Proxy` 或 `Object.defineProperty`）	深度代理整个对象（基于 `Proxy`）
TypeScript 支持	显式类型声明（`Ref<T>`）	自动推断嵌套属性类型

💡 关键差异总结：

ref 是值的容器，通过 .value 提供响应性；
reactive 是对象的代理，深度追踪所有属性变化。

ref 的实现
- 包装原始值为 { value: ... } 对象，劫持 .value 的访问和修改。
- 若值为对象，内部自动转为 reactive 代理（如 ref({x:1}) 等价于 reactive({x:1})），但仍保留 .value 访问方式。
reactive 的实现
- 基于 Proxy 深度代理对象，递归转换所有嵌套属性。
- 拦截属性的 get/set/delete 操作，实现细粒度依赖追踪。

⚠️ 性能注意：

reactive 对大型对象可能因深度代理产生开销，可用 shallowReactive 优化；
ref 对基本类型更轻量，但包装对象时与 reactive 性能接近。

基本类型数据（计数器、开关状态）：

const count = ref(0);  // 数字类型
const isOpen = ref(false);  // 布尔类型

需整体替换的对象/数组：

const user = ref({ name: 'Alice' });
user.value = { name: 'Bob' };  // 直接替换引用

DOM 引用：

<input ref="inputRef"> 
<script>const inputRef = ref(null);</script>

复杂对象结构（表单状态、嵌套数据）：

const form = reactive({ 
  username: '', 
  address: { city: 'Beijing' }  // 嵌套属性自动响应
});

数组操作（直接修改元素）：

const list = reactive(['a', 'b']);
list[0] = 'z';  // 直接索引修改仍响应

在 reactive 对象中嵌套 ref，ref 会自动解包：

const count = ref(0);
const state = reactive({ count });  // 模板中直接使用 state.count

组合式函数返回时，用 toRefs 保持解构响应性：

function useFeature() {
  const state = reactive({ x: 1, y: 2 });
  return { ...toRefs(state) };  // 解构后仍响应
}

响应性丢失
- 问题：直接解构 reactive 对象会失去响应性。
- 解决：使用 toRefs 转换：
```
const state = reactive({ a: 1 });
const { a } = toRefs(state);  // a 为 Ref 类型
```
类型推断错误
- 问题：reactive 嵌套复杂类型时 TS 推断可能失败。
- 解决：显式声明接口：
```
interface User { name: string; age: number; }
const user = reactive<User>({ name: '', age: 0 });
```
异步更新陷阱
- 问题：reactive 直接替换对象无效。
- 解决：用 Object.assign 合并更新：
```
const state = reactive({ count: 0 });
Object.assign(state, { count: 10 });  // 保持响应性
```

基础原则：
- 简单值 → ref
- 复杂对象 → reactive
- 需解构 → reactive + toRefs
进阶策略：
- 性能敏感场景 → 大型对象用 shallowRef/shallowReactive 减少深度代理。
- 类型安全 → 优先 ref 的显式泛型（Ref<string>）。
终极口诀：

“基本用 ref，对象用 reactive；解构靠 toRefs，替换靠 .value” ✅。