Vue3 中的 ref 和 reactive,到底该怎么选?

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

猜你喜欢

易控智驾港股IPO:矿区无人驾驶收入大增,亏损逐年扩大

易控智驾成立于2018年,作为全球领先的L4级无人驾驶解决方案公司,已在矿区运输领域实现大规模商业应用。 其核心产品为矿区无人驾驶解决方案“著山”,能在标准及极端工作条件下实现矿区无人驾驶运输,业务横跨煤炭…

易控智驾港股IPO:矿区无人驾驶收入大增,亏损逐年扩大

惊艳!央视晚会周深、王玉雯节目在盐田录制

都在演绎着青春独有的自信力量 “盐田的山海,自带青春滤镜!” 从建党百年版《少年》到火遍全网的《可可托海的牧羊人》,从登上央视春晚的《我的纸飞机》,到此次五四晚会上的《好相逢》《热烈的少年》,每一首歌都自带…

惊艳!央视晚会周深、王玉雯节目在盐田录制

张兰质问S妈:珠宝去哪了?为何不报警抓贼?当众揭露S家剧本真相

张兰的话语充满质疑,指责S家处理珠宝问题敷衍了事,隐瞒不报,仿佛是在暗示他们自己“监守自盗”。汪家称他们并未不让S家参加葬礼,原因只是没有收到任何通知;而S妈所谓“见不到孩子”的说法,则被揭露为她自己没有主动…

张兰质问S妈:珠宝去哪了?为何不报警抓贼?当众揭露S家剧本真相

智慧医疗护理对讲系统,多媒体信息发布系统知名品牌

多端预约:支持自助机、公众号、小程序取号,结合医生忙闲状态智能分配诊室,某政务中心排队时间缩短40%动态调度:云端资源引擎支持百万级并发,边缘网关确保离线应急,银行VIP客户等待时间≤8分钟2. 信创安全保…

智慧医疗护理对讲系统,多媒体信息发布系统知名品牌

法式浪漫遇上大师工艺, 梵克雅宝“时间的诗篇”高级制表展全球首站绽放上海

此次展览以全新视角演绎世家对于时间与诗意的艺术诠释,为上海市民呈现一场世界级的文化、艺术与美学的盛宴。 从“春意侬侬”限时春日花径到“时间的诗篇”高级制表展,梵克雅宝在上海的两次首发项目不仅收获来自媒体与公…

法式浪漫遇上大师工艺, 梵克雅宝“时间的诗篇”高级制表展全球首站绽放上海