📕我是廖志伟，一名Java开发工程师、《Java项目实战——深入理解大型互联网企业通用技术》（基础篇）、（进阶篇）、（架构篇）、《解密程序员的思维密码——沟通、演讲、思考的实践》作者、清华大学出版社签约作家、Java领域优质创作者、CSDN博客专家、阿里云专家博主、51CTO专家博主、产品软文专业写手、技术文章评审老师、技术类问卷调查设计师、幕后大佬社区创始人、开源项目贡献者。
📘拥有多年一线研发和团队管理经验，研究过主流框架的底层源码(Spring、SpringBoot、SpringMVC、SpringCloud、Mybatis、Dubbo、Zookeeper)，消息中间件底层架构原理(RabbitMQ、RocketMQ、Kafka)、Redis缓存、MySQL关系型数据库、 ElasticSearch全文搜索、MongoDB非关系型数据库、Apache ShardingSphere分库分表读写分离、设计模式、领域驱动DDD、Kubernetes容器编排等。
📙不定期分享高并发、高可用、高性能、微服务、分布式、海量数据、性能调优、云原生、项目管理、产品思维、技术选型、架构设计、求职面试、副业思维、个人成长等内容。
💡在这个美好的时刻，笔者不再啰嗦废话，现在毫不拖延地进入文章所要讨论的主题。接下来，我将为大家呈现正文内容。
🌟 【vue】创建响应式数据ref和reactive的区别
🍊 1、所谓响应式数据
在Vue页面中，template标签内的数据是渲染在页面的数据。通常，我们需要将script标签内的数据与template标签内的数据进行绑定，即在script标签内进行一些逻辑计算，改变一些数据的值。如果不使用响应式数据，script标签内更改了数据的值，template渲染在页面的值是不会发生改变的。
🎉 技术原理
响应式数据是Vue框架的核心特性之一，它允许开发者通过简单的数据绑定实现视图与数据的同步更新。Vue通过响应式系统，能够追踪依赖，并在数据变化时自动更新视图。
🎉 应用场景
- 数据绑定：将数据与视图进行绑定，实现数据变化时视图自动更新。
- 计算属性：基于响应式数据计算新的数据，实现数据的动态计算。
- 事件监听：监听数据变化，执行相应的操作。
🎉 优势与局限
| 方面 | 优势 | 局限 |
|---|---|---|
| 数据绑定 | 简化数据与视图的同步更新 | 需要一定的学习成本 |
| 计算属性 | 实现数据的动态计算 | 可能导致性能问题 |
| 事件监听 | 实现数据变化的监听 | 需要编写额外的代码 |
🎉 实际案例
// 创建响应式数据
const data = reactive({
count: 0
});
// 改变数据
data.count = 1;
// 视图更新
console.log(data.count); // 输出：1
🍊 2、ref创建基本类型响应式数据
ref用于创建基本类型（如数字、字符串）的响应式数据。当基本类型数据发生变化时，Vue会自动更新DOM。
🎉 技术原理
ref通过创建一个响应式引用对象，将基本类型数据包装起来，实现数据变化时自动更新DOM。
🎉 应用场景
- 创建基本类型响应式数据，如数字、字符串等。
- 在模板中使用基本类型响应式数据。
🎉 优势与局限
| 方面 | 优势 | 局限 |
|---|---|---|
| 创建基本类型响应式数据 | 简单易用 | 适用于基本类型数据 |
🎉 实际案例
// 创建响应式数据
const count = ref(0);
// 改变数据
count.value = 1;
// 视图更新
console.log(count.value); // 输出：1
🍊 3、reactive创建对象类型响应式数据
reactive用于创建对象类型的响应式数据。当对象类型数据发生变化时，Vue会自动更新DOM。
🎉 技术原理
reactive通过创建一个响应式代理对象，将对象类型数据包装起来，实现数据变化时自动更新DOM。
🎉 应用场景
- 创建对象类型响应式数据，如对象、数组等。
- 在模板中使用对象类型响应式数据。
🎉 优势与局限
| 方面 | 优势 | 局限 |
|---|---|---|
| 创建对象类型响应式数据 | 适用于对象类型数据 | 需要一定的学习成本 |
🎉 实际案例
// 创建响应式数据
const obj = reactive({
name: 'Vue'
});
// 改变数据
obj.name = 'React';
// 视图更新
console.log(obj.name); // 输出：React
🍊 4、ref定义对象类型响应式数据
ref也可以用于定义对象类型的响应式数据。当对象类型数据发生变化时，Vue会自动更新DOM。
🎉 技术原理
ref定义对象类型响应式数据时，Vue会自动将对象类型数据转换为响应式代理对象。
🎉 应用场景
- 定义对象类型响应式数据，如对象、数组等。
- 在模板中使用对象类型响应式数据。
🎉 优势与局限
| 方面 | 优势 | 局限 |
|---|---|---|
| 定义对象类型响应式数据 | 简单易用 | 适用于对象类型数据 |
🎉 实际案例
// 创建响应式数据
const obj = ref({
name: 'Vue'
});
// 改变数据
obj.value.name = 'React';
// 视图更新
console.log(obj.value.name); // 输出：React
🍊 5、总结：ref和reactive对比
- ref适用于基本类型数据，reactive适用于对象类型数据。
- ref创建的响应式数据是响应式的，reactive创建的响应式数据也是响应式的。
- ref创建的响应式数据可以通过.value访问，reactive创建的响应式数据可以通过代理访问。
🍊 6、补充：toRefs与toRef
- toRefs可以将对象解构为响应式数据。
- toRef可以将单个属性解构为响应式数据。
🎉 技术原理
toRefs和toRef是Vue提供的一些辅助函数，用于将对象或单个属性转换为响应式数据。
🎉 应用场景
- 将对象或单个属性转换为响应式数据，方便在模板中使用。
🎉 优势与局限
| 方面 | 优势 | 局限 |
|---|---|---|
| 转换对象或属性为响应式数据 | 方便在模板中使用 | 需要一定的学习成本 |
🎉 实际案例
// 创建响应式数据
const obj = reactive({
name: 'Vue',
age: 30
});
// 使用toRefs将对象解构为响应式数据
const { name, age } = toRefs(obj);
// 使用toRef将单个属性解构为响应式数据
const ageRef = toRef(obj, 'age');
// 改变数据
obj.name = 'React';
obj.age = 40;
// 视图更新
console.log(name.value); // 输出：React
console.log(ageRef.value); // 输出：40
博主分享
📥博主的人生感悟和目标
📙经过多年在CSDN创作上千篇文章的经验积累，我已经拥有了不错的写作技巧。同时，我还与清华大学出版社签下了四本书籍的合约，并将陆续出版。
- 《Java项目实战—深入理解大型互联网企业通用技术》基础篇的购书链接：https://item.jd.com/14152451.html
- 《Java项目实战—深入理解大型互联网企业通用技术》基础篇繁体字的购书链接：http://product.dangdang.com/11821397208.html
- 《Java项目实战—深入理解大型互联网企业通用技术》进阶篇的购书链接：https://item.jd.com/14616418.html
- 《Java项目实战—深入理解大型互联网企业通用技术》架构篇待上架
- 《解密程序员的思维密码--沟通、演讲、思考的实践》购书链接：https://item.jd.com/15096040.html
面试备战资料
八股文备战
| 场景 | 描述 | 链接 |
|---|---|---|
| 时间充裕（25万字） | Java知识点大全（高频面试题） | Java知识点大全 |
| 时间紧急（15万字） | Java高级开发高频面试题 | Java高级开发高频面试题 |
理论知识专题（图文并茂，字数过万）
| 技术栈 | 链接 |
|---|---|
| RocketMQ | RocketMQ详解 |
| Kafka | Kafka详解 |
| RabbitMQ | RabbitMQ详解 |
| MongoDB | MongoDB详解 |
| ElasticSearch | ElasticSearch详解 |
| Zookeeper | Zookeeper详解 |
| Redis | Redis详解 |
| MySQL | MySQL详解 |
| JVM | JVM详解 |
集群部署（图文并茂，字数过万）
| 技术栈 | 部署架构 | 链接 |
|---|---|---|
| MySQL | 使用Docker-Compose部署MySQL一主二从半同步复制高可用MHA集群 | Docker-Compose部署教程 |
| Redis | 三主三从集群（三种方式部署/18个节点的Redis Cluster模式） | 三种部署方式教程 |
| RocketMQ | DLedger高可用集群（9节点） | 部署指南 |
| Nacos+Nginx | 集群+负载均衡（9节点） | Docker部署方案 |
| Kubernetes | 容器编排安装 | 最全安装教程 |
开源项目分享
| 项目名称 | 链接地址 |
|---|---|
| 高并发红包雨项目 | https://gitee.com/java_wxid/red-packet-rain |
| 微服务技术集成demo项目 | https://gitee.com/java_wxid/java_wxid |
管理经验
【公司管理与研发流程优化】针对研发流程、需求管理、沟通协作、文档建设、绩效考核等问题的综合解决方案：https://download.csdn.net/download/java_wxid/91148718
希望各位读者朋友能够多多支持！
现在时代变了，信息爆炸，酒香也怕巷子深，博主真的需要大家的帮助才能在这片海洋中继续发光发热，所以，赶紧动动你的小手，点波关注❤️，点波赞👍，点波收藏⭐，甚至点波评论✍️，都是对博主最好的支持和鼓励！
- 💂 博客主页： Java程序员廖志伟
- 👉 开源项目：Java程序员廖志伟
- 🌥 哔哩哔哩：Java程序员廖志伟
- 🎏 个人社区：Java程序员廖志伟
- 🔖 个人微信号：
SeniorRD
🔔如果您需要转载或者搬运这篇文章的话，非常欢迎您私信我哦~
扫一扫
835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
