Vue3实战笔记(49)—Vue 3响应式魔法:ref vs reactive深入对决

文章目录

  • 前言
  • [一、 ref 和 reactive主要差异](#一、 ref 和 reactive主要差异)
  • 总结

前言

Vue 3 中的 ref 和 reactive 都是用于创建响应式数据的工具,但它们之间存在一些重要的区别。今天聊聊它们之间的主要差异:


一、 ref 和 reactive主要差异

数据类型:

ref 主要用于处理基本数据类型(如 string、number、boolean 等)的响应式数据。当你使用 ref 创建一个响应式引用时,它返回的是一个对象,该对象具有一个指向内部值的 value 属性。

reactive 则用于处理复杂数据类型(如对象、数组等)的响应式数据。它直接返回一个响应式代理对象,你可以直接访问和修改其属性。

使用方式:

对于 ref 创建的响应式数据,你需要通过 .value 来访问和修改其值。例如:const count = ref(0); console.log(count.value); count.value++;

对于 reactive 创建的响应式数据,你可以直接访问和修改其属性。例如:const state = reactive({ count: 0 }); console.log(state.count); state.count++;

模板中的使用:

在 Vue 3 的模板中,当你使用 ref 创建的响应式数据时,你仍然需要通过 .value 来访问其值。但是,如果你是在 setup 函数中返回的响应式引用,Vue 会自动解包它,因此在模板中你不需要使用 .value。

对于 reactive 创建的响应式数据,你可以在模板中直接访问其属性,无需任何额外操作。

解构问题:

当从 reactive 对象中解构出属性时,这些属性将失去其响应性。这是因为解构操作返回的是原始值的副本,而不是响应式代理。

为了保持响应性,你可以使用 toRefs 函数来解构 reactive 对象。这将返回一个普通的对象,其属性是响应式引用,因此你可以在模板中直接访问它们而无需使用 .value。

返回值:

ref 返回一个对象,该对象具有一个指向内部值的 value 属性。

reactive 返回一个响应式代理对象,你可以直接操作其属性。


总结

总的来说,ref 和 reactive 都是Vue 3中强大的响应式API,选择使用哪一个取决于具体的使用场景和性能考虑。对于基本数据类型或需要替换对象的场景,ref 是合适的选择;而对于需要创建一个响应式状态容器的对象,reactive 是更好的选择。

轻挥一袖桃花雨,醉卧云水笑春阳。

相关推荐
pe7er23 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er30 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
西岭千秋雪_34 分钟前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
XvnNing36 分钟前
【Verilog硬件语言学习笔记4】FPGA串口通信
笔记·学习·fpga开发
islandzzzz42 分钟前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端44 分钟前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
海棠蚀omo1 小时前
C++笔记-位图和布隆过滤器
开发语言·c++·笔记
大胡子大叔1 小时前
webrtc-streamer视频流播放(rstp协议h264笔记)
笔记·webrtc·rtsp·webrtc-streamer
超人不会飛1 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦1 小时前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改