Vue3 中 ref 与 reactive 使用场景总结（含对比与示例）
🌟 Vue3 中 ref 与 reactive 使用场景总结（含对比与示例）
📌 本文将帮你彻底理解：
什么时候使用ref？什么时候使用reactive？两者到底有什么区别？如何结合使用？看完这一篇就够了！
✳️ 一、基本定义
| 特性 | ref() | reactive() |
|---|---|---|
| 作用 | 包装基本类型或对象为响应式 | 包装对象/数组为响应式 |
| 返回值 | 包装后的对象为 { value: 原始值 } | 返回的是原始对象的 Proxy |
| 解构使用 | 需要 .value 访问 | 可直接访问属性（但解构会失去响应式） |
| 使用频率 | 高 | 中高 |
🧠 二、选择依据与使用场景
✅ 使用 ref() 的场景：
| 场景 | 示例 |
|---|---|
| 1. 管理基本类型数据 | const count = ref(0) |
| 2. 想响应式访问 DOM 或组件实例 | const inputRef = ref(null) |
| 3. 异步加载中状态、定时器等 | const loading = ref(false) |
4. 单个对象响应式，且需保持 .value 明确性 | const user = ref({ name: 'Jin' }) |
| 5. 组合式函数中需要透明封装响应式值 | return { state: ref(...) } |
✅ 使用 reactive() 的场景：
| 场景 | 示例 |
|---|---|
| 1. 响应式对象或数组 | const user = reactive({ name: '张三', age: 18 }) |
| 2. 多层嵌套的对象 | const form = reactive({ user: { name: '' }, tags: [] }) |
| 3. 表单、配置项、复杂数据结构 | const config = reactive({ theme: 'dark', size: 'small' }) |
| 4. 频繁修改属性值，不需要解构使用 | user.age++ |
🧪 三、常见问题与最佳实践
❓ Q1：为什么不能对 reactive 对象解构？
const state = reactive({ count: 0 });
const { count } = state; // ❌ 失去响应式
✅ 正确方式：
watch(() => state.count, (val) => { ... });
❓ Q2：ref 和 reactive 能混用吗？
可以，组合使用是常见实践：
const form = reactive({ name: '', age: 0 });
const loading = ref(false);
❓ Q3：如何在模板中使用 ref？
无需加 .value，模板中会自动解包：
<template><div>{{ count }}</div>
</template><script setup>
const count = ref(0)
</script>
📘 四、实用示例对比
示例 1：基本类型计数器（推荐 ref）
const count = ref(0);
const increment = () => count.value++;
示例 2：表单响应式数据（推荐 reactive）
const form = reactive({username: '',password: '',
});
示例 3：ref + 对象（组合式封装）
const user = ref({ name: 'Jin', age: 20 });
// user.value.name = '李四';
✅ 总结对比表
| 使用目的 | 推荐方式 | 理由 |
|---|---|---|
| 基本类型 | ref | 简洁清晰 |
| 引用类型（对象/数组） | reactive | 自动展开，无需 .value |
| DOM/组件实例引用 | ref | 用于 ref="xxx" |
| 嵌套对象响应式 | reactive | 多层属性修改方便 |
| 与组件交互、组合式封装 | ref | 更好控制数据流 |
📌 建议记忆口诀：
- 基本类型用
ref，对象数组选reactive- 模板中免
.value，脚本中别忘.value- 组合 API 常搭配使用，按需选型最灵活