Vue3 中的 ref 和 reactive，到底该怎么选？

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

❗你可能遇到的问题：

1. 👇这段代码会出错或不起作用：

js

复制编辑

const obj = ref({ name: 'Vue' })

obj.name = 'React' // ❌ 错了！

因为 ref 包装后，正确写法是：

js

复制编辑

jrhz.info

obj.value.name = 'React' // ✅ 正确

1. 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