ref vs reactive#
| ref | reactive |
|---|
| 数据类型 | 任意（推荐基础类型） | 仅对象/数组 |
| 访问方式 | .value | 直接访问属性 |
| 解构/展开 | 保持响应式（需 .value） | 丢失响应式 |
| 适用场景 | 单个值、原始类型、需要替换整个对象 | 复杂对象、表单数据 |
代码对比#
// ref: 包装成对象，通过 .value 读写
const count = ref(0);
console.log(count.value); // 读取
count.value++; // 修改
const user = ref({ name: 'Tom' });
user.value.name = 'Jerry'; // 修改属性
user.value = { name: 'Bob' }; // 替换整个对象 ✅
// reactive: 代理对象，直接访问
const state = reactive({ count: 0, name: 'Tom' });
console.log(state.count); // 直接读
state.count++; // 直接改
// 不能替换整个对象
state = { count: 1 }; // ❌ 报错
javascript
关键陷阱：解构丢失响应式#
// reactive 解构 = 响应式丢失
const state = reactive({ x: 1, y: 2 });
const { x, y } = state; // x, y 变成普通数字
// ref 解构 .value 也丢失
const pos = ref({ x: 1, y: 2 });
const { x, y } = pos.value; // 同样丢失
// ✅ 解决方案：toRefs
import { toRefs } from 'vue';
const { x, y } = toRefs(reactive({ x: 1, y: 2 }));
// x, y 是 ref，保持响应式
javascript
选择指南#
| 场景 | 推荐 | 原因 |
|---|
| 数字、字符串、布尔 | ref | 语义清晰 |
| 对象需要整体替换 | ref | user.value = newUser |
| 复杂对象、嵌套数据 | reactive | 代码简洁，不用写 .value |
| 表单数据 | reactive | 字段多，直接访问方便 |
| 从函数返回响应式数据 | ref | 解构安全 |
一句话#
简单值用 ref（记得 .value），复杂对象用 reactive（别解构）。