Vue3 的 Composition API 引入了两个核心概念:ref 和 reactive,它们是响应式的基石。但不少人搞不清楚两者什么时候该用谁,写着写着还会报错或数据不更新。
别急,这一篇文章帮你分清它们的本质差异、使用场景和最佳实践。
🧠一句话区别:
- ref 用于基本类型(如数字、字符串),或者想包装成响应式的单个变量。
- reactive 用于对象或数组,让整个结构响应式。
🧪 示例对比:
js
复制编辑
// 引入响应式 API
import { ref, reactive } from 'vue'
// 基本类型用 ref
const count = ref(0)
count.value++ // 访问和修改都要 .value
// 复杂对象用 reactive
const user = reactive({
name: 'Tom',
age: 18
})
user.age++ // 直接访问,无需 .value
❗你可能遇到的问题:
- 👇这段代码会出错或不起作用:
js
复制编辑
const obj = ref({ name: 'Vue' })
obj.name = 'React' // ❌ 错了!
因为 ref 包装后,正确写法是:
js
复制编辑
jrhz.infoobj.value.name = 'React' // ✅ 正确
- ref 里的对象取值太麻烦?可以用 toRefs 或 reactive 代替:
js
复制编辑
const obj = reactive({ name: 'A', age: 20 })
const { name, age } = toRefs(obj)
🎯使用建议总结:
场景推荐使用基础数据(数字、布尔、字符串)ref表单数据、用户信息(对象)reactive单个响应式值包装ref多个值封装且需解构reactive + toRefs
📌 常见辅助函数:
函数用途ref()创建响应式变量(基础类型)reactive()创建响应式对象(深层响应)toRefs()把 reactive 对象转换成 reftoRaw()获取响应式对象的原始数据
引用地址:https://blog.csdn.net/qqqdqd/article/details/149209167