Vue响应式数据ref与reactive对比解析

最新推荐文章于 2025-12-09 14:55:03 发布
原创 最新推荐文章于 2025-12-09 14:55:03 发布 · 345 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue # Reactivity # Data Binding

📕我是廖志伟，一名Java开发工程师、《Java项目实战——深入理解大型互联网企业通用技术》（基础篇）、（进阶篇）、（架构篇）、《解密程序员的思维密码——沟通、演讲、思考的实践》作者、清华大学出版社签约作家、Java领域优质创作者、优快云博客专家、阿里云专家博主、51CTO专家博主、产品软文专业写手、技术文章评审老师、技术类问卷调查设计师、幕后大佬社区创始人、开源项目贡献者。

📘拥有多年一线研发和团队管理经验，研究过主流框架的底层源码(Spring、SpringBoot、SpringMVC、SpringCloud、Mybatis、Dubbo、Zookeeper)，消息中间件底层架构原理(RabbitMQ、RocketMQ、Kafka)、Redis缓存、MySQL关系型数据库、 ElasticSearch全文搜索、MongoDB非关系型数据库、Apache ShardingSphere分库分表读写分离、设计模式、领域驱动DDD、Kubernetes容器编排等。

📙不定期分享高并发、高可用、高性能、微服务、分布式、海量数据、性能调优、云原生、项目管理、产品思维、技术选型、架构设计、求职面试、副业思维、个人成长等内容。

Java程序员廖志伟

💡在这个美好的时刻，笔者不再啰嗦废话，现在毫不拖延地进入文章所要讨论的主题。接下来，我将为大家呈现正文内容。

优快云

🌟 【vue】创建响应式数据ref和reactive的区别

🍊 1、所谓响应式数据

在Vue页面中，template标签内的数据是渲染在页面的数据。为了实现数据的动态更新，我们需要将script标签内的数据与template标签内的数据进行绑定。在script标签内进行逻辑计算改变数据的值时，template渲染在页面的值也会相应地发生改变。这种能够自动追踪依赖和响应数据变化的数据结构，我们称之为响应式数据。

🍊 2、ref创建基本类型响应式数据

ref是Vue提供的一个用于创建基本类型（如字符串、数字等）的响应式数据的函数。使用ref创建响应式数据时，需要使用.value属性来访问和修改数据。

🎉 技术原理

使用Proxy对象拦截对数据的访问和修改，实现响应式。

🎉 应用场景

用于创建基本类型数据的响应式数据。

🎉 优势与局限

  • 优势：简单易用，性能较好。
  • 局限：只能用于基本类型和对象。

🎉 实际案例

计数器、状态管理。

技术原理应用场景优势与局限实际案例
使用Proxy对象拦截对数据的访问和修改，实现响应式用于创建基本类型数据的响应式数据简单易用，性能较好计数器、状态管理

🍊 3、reactive创建对象类型响应式数据

reactive是Vue提供的一个用于创建对象类型的响应式数据的函数。使用reactive创建响应式数据时，对象的所有属性都会变为响应式数据。

🎉 技术原理

使用Proxy对象拦截对对象的访问和修改，实现响应式。

🎉 应用场景

用于创建对象类型数据的响应式数据。

🎉 优势与局限

  • 优势：功能强大，可以处理复杂对象数据。
  • 局限：性能较差，需要额外的处理。

🎉 实际案例

表单数据、用户信息等。

技术原理应用场景优势与局限实际案例
使用Proxy对象拦截对对象的访问和修改，实现响应式用于创建对象类型数据的响应式数据功能强大，可以处理复杂对象数据表单数据、用户信息等

🍊 4、ref定义对象类型响应式数据

ref也可以用于定义对象类型的响应式数据。使用ref定义对象类型响应式数据时，需要使用.value属性来访问和修改数据。

🎉 技术原理

使用Proxy对象拦截对对象的访问和修改，实现响应式。

🎉 应用场景

用于创建对象类型数据的响应式数据。

🎉 优势与局限

  • 优势：简单易用，性能较好。
  • 局限：只能用于基本类型和对象。

🎉 实际案例

计数器、状态管理。

技术原理应用场景优势与局限实际案例
使用Proxy对象拦截对对象的访问和修改，实现响应式用于创建对象类型数据的响应式数据简单易用，性能较好计数器、状态管理

🍊 5、总结：ref和reactive对比

ref适用于基本类型和对象，操作需要.value。reactive适用于对象类型。二者在对象修改和使用场景上有差异。

🍊 6、补充：toRefs与toRef

toRefs可以将响应式对象属性转为ref对象。toRef是toRefs的简化版，用于获取单个响应式对象的属性。

🎉 技术原理

将响应式对象属性转为ref对象。

🎉 应用场景

用于将响应式对象属性转换为ref对象，方便在模板中使用。

🎉 优势与局限

  • 优势：简化模板中响应式对象属性的访问。
  • 局限：无。

🎉 实际案例

表单数据、用户信息等。

技术原理应用场景优势与局限实际案例
将响应式对象属性转为ref对象用于将响应式对象属性转换为ref对象，方便在模板中使用简化模板中响应式对象属性的访问表单数据、用户信息等

🍊 7、ref和reactive的使用场景

ref适用于简单数据管理，如计数器。reactive适合处理复杂对象数据，使整个对象都变成响应式，方便管理对象属性的变化。

🎉 技术原理

  • ref：使用Proxy对象拦截对数据的访问和修改，实现响应式。
  • reactive：使用Proxy对象拦截对对象的访问和修改，实现响应式。

🎉 应用场景

  • ref：用于创建基本类型数据的响应式数据。
  • reactive：用于创建对象类型数据的响应式数据。

🎉 优势与局限

  • ref：
    • 优势：简单易用，性能较好。
    • 局限：只能用于基本类型和对象。
  • reactive：
    • 优势：功能强大，可以处理复杂对象数据。
    • 局限：性能较差，需要额外的处理。

🎉 实际案例

  • ref：计数器、状态管理。
  • reactive：表单数据、用户信息等。
技术原理应用场景优势与局限实际案例
使用Proxy对象拦截对数据的访问和修改，实现响应式用于创建基本类型数据的响应式数据简单易用，性能较好计数器、状态管理
使用Proxy对象拦截对对象的访问和修改，实现响应式用于创建对象类型数据的响应式数据功能强大，可以处理复杂对象数据表单数据、用户信息等

🍊 8、ref和reactive的性能比较

ref的性能优于reactive，因为ref不需要进行额外的处理。reactive需要将对象转换为响应式对象，需要额外的处理。

🎉 技术原理

  • ref：使用Proxy对象拦截对数据的访问和修改，实现响应式。
  • reactive：使用Proxy对象拦截对对象的访问和修改，实现响应式。

🎉 应用场景

  • ref：用于创建基本类型数据的响应式数据。
  • reactive：用于创建对象类型数据的响应式数据。

🎉 优势与局限

  • ref：
    • 优势：简单易用，性能较好。
    • 局限：只能用于基本类型和对象。
  • reactive：
    • 优势：功能强大，可以处理复杂对象数据。
    • 局限：性能较差，需要额外的处理。

🎉 实际案例

  • ref：计数器、状态管理。
  • reactive：表单数据、用户信息等。
技术原理应用场景优势与局限实际案例
使用Proxy对象拦截对数据的访问和修改，实现响应式用于创建基本类型数据的响应式数据简单易用，性能较好计数器、状态管理
使用Proxy对象拦截对对象的访问和修改，实现响应式用于创建对象类型数据的响应式数据功能强大，可以处理复杂对象数据表单数据、用户信息等

🍊 9、ref和reactive的适用场景

ref适用于简单数据管理，如计数器。reactive适用于复杂对象数据，如表单数据、用户信息等。

🎉 技术原理

  • ref：使用Proxy对象拦截对数据的访问和修改，实现响应式。
  • reactive：使用Proxy对象拦截对对象的访问和修改，实现响应式。

🎉 应用场景

  • ref：用于创建基本类型数据的响应式数据。
  • reactive：用于创建对象类型数据的响应式数据。

🎉 优势与局限

  • ref：
    • 优势：简单易用，性能较好。
    • 局限：只能用于基本类型和对象。
  • reactive：
    • 优势：功能强大，可以处理复杂对象数据。
    • 局限：性能较差，需要额外的处理。

🎉 实际案例

  • ref：计数器、状态管理。
  • reactive：表单数据、用户信息等。
技术原理应用场景优势与局限实际案例
使用Proxy对象拦截对数据的访问和修改，实现响应式用于创建基本类型数据的响应式数据简单易用，性能较好计数器、状态管理
使用Proxy对象拦截对对象的访问和修改，实现响应式用于创建对象类型数据的响应式数据功能强大，可以处理复杂对象数据表单数据、用户信息等

🍊 10、ref和reactive的优缺点

ref的优点是简单易用，性能较好。缺点是只能用于基本类型和对象。reactive的优点是功能强大，可以处理复杂对象数据。缺点是性能较差，需要额外的处理。

🎉 技术原理

  • ref：使用Proxy对象拦截对数据的访问和修改，实现响应式。
  • reactive：使用Proxy对象拦截对对象的访问和修改，实现响应式。

🎉 应用场景

  • ref：用于创建基本类型数据的响应式数据。
  • reactive：用于创建对象类型数据的响应式数据。

🎉 优势与局限

  • ref：
    • 优势：简单易用，性能较好。
    • 局限：只能用于基本类型和对象。
  • reactive：
    • 优势：功能强大，可以处理复杂对象数据。
    • 局限：性能较差，需要额外的处理。

🎉 实际案例

  • ref：计数器、状态管理。
  • reactive：表单数据、用户信息等。
技术原理应用场景优势与局限实际案例
使用Proxy对象拦截对数据的访问和修改，实现响应式用于创建基本类型数据的响应式数据简单易用，性能较好计数器、状态管理
使用Proxy对象拦截对对象的访问和修改，实现响应式用于创建对象类型数据的响应式数据功能强大，可以处理复杂对象数据表单数据、用户信息等

优快云

博主分享

📥博主的人生感悟和目标

Java程序员廖志伟

📙经过多年在优快云创作上千篇文章的经验积累，我已经拥有了不错的写作技巧。同时，我还与清华大学出版社签下了四本书籍的合约，并将陆续出版。

面试备战资料

八股文备战
场景描述链接
时间充裕（25万字）Java知识点大全（高频面试题）Java知识点大全
时间紧急（15万字）Java高级开发高频面试题Java高级开发高频面试题

理论知识专题（图文并茂，字数过万）

技术栈链接
RocketMQRocketMQ详解
KafkaKafka详解
RabbitMQRabbitMQ详解
MongoDBMongoDB详解
ElasticSearchElasticSearch详解
ZookeeperZookeeper详解
RedisRedis详解
MySQLMySQL详解
JVMJVM详解

集群部署（图文并茂，字数过万）

技术栈部署架构链接
MySQL使用Docker-Compose部署MySQL一主二从半同步复制高可用MHA集群Docker-Compose部署教程
Redis三主三从集群（三种方式部署/18个节点的Redis Cluster模式）三种部署方式教程
RocketMQDLedger高可用集群（9节点）部署指南
Nacos+Nginx集群+负载均衡（9节点）Docker部署方案
Kubernetes容器编排安装最全安装教程

开源项目分享

项目名称链接地址
高并发红包雨项目https://gitee.com/java_wxid/red-packet-rain
微服务技术集成demo项目https://gitee.com/java_wxid/java_wxid

管理经验

【公司管理与研发流程优化】针对研发流程、需求管理、沟通协作、文档建设、绩效考核等问题的综合解决方案：https://download.youkuaiyun.com/download/java_wxid/91148718

希望各位读者朋友能够多多支持！

现在时代变了，信息爆炸，酒香也怕巷子深，博主真的需要大家的帮助才能在这片海洋中继续发光发热，所以，赶紧动动你的小手，点波关注❤️，点波赞👍，点波收藏⭐，甚至点波评论✍️，都是对博主最好的支持和鼓励！

🔔如果您需要转载或者搬运这篇文章的话，非常欢迎您私信我哦~

鸿蒙HarmonyOS开发生态：构建万物互联的未来
GY的的专栏
10-04 1863
鸿蒙系统的分布式技术实现了多设备之间的协同工作，为用户带来了更加便捷、智能的全场景体验。从最初的HarmonyOS 1.0，到HarmonyOS 2.0在手机、平板等设备的广泛应用，再到HarmonyOS 3.0和4.0的发布，鸿蒙系统的功能和应用范围不断扩大，用户体验持续优化。鸿蒙系统在技术上不断演进，从最初的智慧屏应用，到手机、平板、手表等多种设备的广泛使用，再到HarmonyOS NEXT的全面成熟与加速发展，鸿蒙系统的功能和应用范围不断扩大。鸿蒙生态的繁荣离不开开发者的积极参与和贡献。
精选资源
19.2领航者ZYNQ之嵌入式Vitis开发指南.pdf
12-11
Vitis集成了软件开发工具和硬件优化技术，大大简化了从软件到硬件的开发周期。 Vitis开发的关键优势在于它的统一软件平台，这意味着开发者可以使用统一的编程语言和工具集来构建并部署在FPGA上的应用程序，从而加速...
【鸿蒙2025领航者闯关】鸿蒙2025：从技术突破到生态共建，开发者的成长与蜕变
CodeSuc 的技术博客
12-08 1937
鸿蒙操作系统在2025年已成为全球开发者关注的焦点，其分布式技术实现了多设备协同的"超级终端"体验。本文作者作为移动开发者分享了从单端开发到多端架构师的成长历程，重点剖析了鸿蒙生态下的技术突破点：一是自适应UI开发技术，通过ArkUI框架实现跨设备界面适配；二是分布式数据管理能力，解决多端数据同步问题。文章结合代码实例展示了如何根据不同设备特性（手机/平板/智慧屏）设计弹性布局，并指出鸿蒙开发者需具备设备能力感知、跨端通信等核心技能，这些能力使开发者薪资较传统移动开发高出30%-50%。
【鸿蒙2025领航者闯关】鸿蒙生态共建：智慧医疗领域的分布式革新与实践
CodeSuc 的技术博客
12-03 4125
华为鸿蒙操作系统（HarmonyOS）凭借分布式技术为智慧医疗带来创新解决方案。本文聚焦"急诊急救""慢病管理""远程会诊"三大核心场景
【鸿蒙2025领航者闯关】鸿蒙OS在工业控制领域的技术突破与实战应用
CodeSuc 的技术博客
12-04 2516
摘要： 鸿蒙OS凭借分布式架构、微内核安全及模块化设计，为工业控制领域提供创新解决方案。其分布式软总线实现多设备高速互联（延迟<10ms），分布式数据管理统一工业数据格式，解决传统系统设备孤岛、协议不兼容等问题。通过机械加工车间案例，展示鸿蒙OS如何实现数控机床、传感器等设备的自动发现与数据同步，核心代码演示了设备连接与数据订阅流程，显著降低集成成本并提升实时性，为工业智能化转型提供技术支撑。
【鸿蒙2025领航者闯关】鸿蒙车载互联实战：用分布式技术重构出行体验
CodeSuc 的技术博客
12-02 2048
鸿蒙车载互联系统通过分布式技术解决数据孤岛与体验割裂问题，其核心在于三大支柱技术：分布式软总线实现设备毫秒级连接（如手机与车机），分布式数据管理保障跨端数据实时同步（如导航路线无缝接续），以及分布式任务调度实现硬件资源虚拟化（如调用车载摄像头）。该系统支持全场景协同，通过统一的通信协议与数据管理机制，构建"车-人-家"互联生态，典型应用包括车载导航跨端接续和智能家居联动场景。开发层面提供设备发现、数据对象同步等API，实现低延迟、高可靠的车载互联方案。
[鸿蒙2025领航者闯关] 鸿蒙 6 特性实战闯关：金融支付应用的安全升级之路
2302_79376097的博客
12-08 1398
特性与场景强绑定：AI防窥不是简单模糊屏幕，而是要结合支付场景精准控制模糊范围与时机，避免影响用户操作底层安全是核心保障：星盾架构省去了大量自定义加密代码，但需确保前后端协同适配，才能发挥其全链路防护能力智能化提升用户接受度：AI防诈功能的关键是“精准识别+人性化预警”，过度拦截会引发用户反感，需通过数据优化平衡安全与体验接下来我计划将鸿蒙6.0的“加密分享”特性融入账单分享功能，让金融安全覆盖更全场景。
【鸿蒙2025领航者闯关】从单端到多端：我的分布式全栈成长升级路
学IT，找陈寒
12-02 1738
2025 年初，我还是一名以 Java + SpringBoot 为主的后端开发者，前端常用 Vue 和 TS，鸿蒙开发只停留在“能跑 Demo”的阶段。2025 年 4 月，我将基于分布式技术开发的《设备巡检·协同版》上架应用市场，实现跨设备任务同步。单端逻辑还能应付，但一到设备协同、状态同步，我就完全抓不到“鸿蒙式开发”的核心思路。那次比赛让我真正体验到鸿蒙协同的魅力，也让我第一次在大型竞赛中担任“分布式负责人”。2025 年 8 月，我和团队参加了鸿蒙极客马拉松，做的是“跨设备文件快传工具”。
[鸿蒙2025领航者闯关]HarmonyOS中开发高德地图第七篇：地理编码与逆地理编码
尽吾所能 分享永久免费知识
12-06 2020
本篇教程将学习地理编码（地址转坐标）和逆地理编码（坐标转地址）功能。
[鸿蒙2025领航者闯关]HarmonyOS中开发高德地图第三篇：地图控制与UI设置
尽吾所能 分享永久免费知识
12-06 1318
本篇教程将学习如何切换地图类型、配置UI控件，以及监听地图事件。
[鸿蒙2025领航者闯关]HarmonyOS中开发高德地图第九篇：绑图与测距功能
尽吾所能 分享永久免费知识
12-06 1162
本篇教程将学习如何在地图上绑制各种图形（折线、多边形、圆形），以及实现测距和面积计算功能。创建文件 ： 3. AMapUtils 工具类 4. PolylineOptions 完整配置 5. PolygonOptions 完整配置 6. CircleOptions 完整配置 7. 实用技巧 7.1 绘制带箭头的折线 7.2 绘制渐变色折线 7.3 编辑已绘制的图形 本篇小结 本篇教程我们学习了：下一篇我们将整合所有功能，实现一个完整的地图应用。 班级 https://developer.hua
精选资源
ZYNQ 领航者FPGA开发板ZYNQ7020核心板+开发地板PDF原理图+主要器件技术手册.zip
03-14
ZYNQ 领航者FPGA开发板ZYNQ7020核心板+开发地板PDF原理图+主要器件技术手册，包括： 0-ZYNQ_7010核心板原理图_V1.5.pdf 0-ZYNQ_7020核心板原理图_V1.5.pdf 0-领航者ZYNQ底板原理图_V2.6.pdf AD9708.pdf AMS1117.pdf ...
领航者开发板ZYNQ之嵌入式LINUX开发指南
04-12
领航者开发板ZYNQ之嵌入式LINUX开发指南
WPF 国际化ResXManager的使用-梳理
最新发布
qq_59062726的博客
12-09 707
看了几篇WPF 中使用ResXManager的文章：WPF国际化 - ResXManager 多语言切换小白请先阅读完毕再接着往下看。有经验的随意。在代码中表示你的软件使用什么语言以及对应的资源文件。
多元算力融合实践：openEuler在中等配置硬件环境下的性能验证
bushibrnxiaohaij的博客
12-05 8855
在数字基础设施高速发展的今天，算力需求正朝着多元化、密集化、分布式方向演进。从中小企业的日常数据处理、开发者的AI模型训练，到边缘设备的轻量化推理，不同场景对算力的形态、性能、能效提出了差异化要求。openEuler作为面向数字基础设施的开源操作系统，凭借创新的技术架构与优化能力，实现了对中高端通用硬件算力的深度适配与高效调度，为各类计算场景提供了统一、可靠、高性能的技术底座。
WPF工业设备远程控制程序技术方案
ponygame的博客
12-08 1197
本文介绍了一个基于WPF的工业设备远程控制程序技术方案。该系统采用模块化分层架构，包含控制、监测、通信和UI四大功能模块，通过事件驱动和异步模式实现高效运行。软件采用MVVM模式分为表示层、业务逻辑层、数据访问层和通信层，支持Modbus/OPCUA等多种工业协议。WPF界面提供实时数据监测、图表展示和设备控制功能，通过数据绑定实现高效交互。方案强调性能优化（延迟<100ms）和扩展性，支持未来集成AI分析等功能。开发周期约2-3个月，适合工业自动化领域的远程监控应用。
WPF工业设备工艺配方流程程序技术方案
ponygame的博客
12-06 710
本文提出基于WPF的工业设备工艺配方流程管理方案，采用MVVM架构实现配方创建、编辑、实时监控和条件分支控制。系统分为表示层（WPF UI）、业务逻辑层（配方处理）、数据访问层（ORM存储）和服务层（设备通信），支持Modbus/OPC UA等协议异步通信。通过模块化设计、依赖注入和数据绑定实现灵活扩展，推荐使用.NET Core+EF Core等技术栈。方案包含配方实体定义、ViewModel逻辑处理和XAML界面示例代码，建议通过1-2月学习掌握WPF和工业协议开发要点，适用于制造业等自动化控制场景。
WPF 工业设备管理程序技术方案
ponygame的博客
12-08 951
本方案设计一个基于 WPF 的工业设备管理程序，用于集中管理多种工业设备（流量计、加热器、温度采集模块、电磁阀、通信设备等）。系统需实现对设备的驱动加载、在线状态监控、故障状态报警、配方适配性验证等核心功能。方案将围绕技术架构、软件分层、通信驱动、UI界面设计、依赖框架、示例代码和学习曲线进行阐述，目标是实现高性能、高灵活度、易于维护和扩展的系统。本方案提供了一个使用 WPF 构建高性能、高灵活性工业设备管理程序的详细设计。
WPF 操作之Dispatcher--- 只在多线程更新 UI 时使用。
u012545581的博客
12-08 253
注意：Dispatcher 不是触发动作的方式，而是线程调度工具；日常 UI 操作无需使用。在 ViewModel 中定义。在 XAML 中指定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值