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 常搭配使用，按需选型最灵活