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

📕我是廖志伟，一名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标签内进行逻辑计算改变数据的值时，template渲染在页面的值也会随之改变。这种能够自动追踪依赖和响应数据变化的特性，我们称之为响应式数据。

🎉 技术原理

Vue的响应式数据是通过Object.defineProperty()方法实现的。该方法可以监听对象属性的变化，并在属性值发生变化时执行相应的回调函数。

🎉 应用场景

响应式数据在Vue中广泛应用于数据绑定、计算属性、监听器等场景。

🎉 优势与局限

优势：

• 自动追踪依赖，实现数据的响应式更新。
• 简化数据操作，提高开发效率。

局限：

• 性能开销较大，对于大量数据或复杂的数据结构，响应式更新可能会影响性能。
• 代码可读性较差，对于不熟悉Vue响应式原理的开发者来说，理解代码逻辑较为困难。

🎉 实际案例

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

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

ref用于创建基本类型（如字符串、数字等）的响应式数据。使用ref创建响应式数据时，需要通过.value属性访问和修改数据。

🎉 技术原理

ref底层使用reactive创建响应式数据，并通过.value属性暴露给模板。

🎉 应用场景

适用于创建基本类型的响应式数据，如字符串、数字等。

🎉 优势与局限

优势：

• 简单易用，适用于基本类型的响应式数据。
• 性能较好，相较于reactive，ref在处理基本类型数据时性能更优。

局限：

• 适用于基本类型数据，对于复杂的数据结构，需要使用reactive。

🎉 实际案例

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment
    };
  }
};
</script>

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

reactive用于创建对象类型的响应式数据。使用reactive创建响应式数据时，对象的所有属性都会变为响应式数据。

🎉 技术原理

reactive底层使用Object.defineProperty()方法实现响应式数据，并递归处理对象属性。

🎉 应用场景

适用于创建对象类型的响应式数据，如对象、数组等。

🎉 优势与局限

优势：

• 适用于复杂的数据结构，如对象、数组等。
• 支持对象属性的响应式更新。

局限：

• 性能开销较大，相较于ref，reactive在处理复杂数据结构时性能较差。

🎉 实际案例

<template>
  <div>
    <p>{{ state.name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: 'Vue'
    });
    const updateName = () => {
      state.name = 'React';
    };
    return {
      state,
      updateName
    };
  }
};
</script>

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

ref也可以用于定义对象类型的响应式数据。ref底层创建响应式数据时，底层还是使用reactive来创建的。

🎉 技术原理

ref底层使用reactive创建响应式数据，并通过.value属性暴露给模板。

🎉 应用场景

适用于创建对象类型的响应式数据，如对象、数组等。

🎉 优势与局限

优势：

• 简单易用，适用于对象类型的响应式数据。
• 性能较好，相较于reactive，ref在处理对象类型数据时性能更优。

局限：

• 适用于对象类型数据，对于复杂的数据结构，需要使用reactive。

🎉 实际案例

<template>
  <div>
    <p>{{ obj.name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const obj = ref({
      name: 'Vue'
    });
    const updateName = () => {
      obj.value.name = 'React';
    };
    return {
      obj,
      updateName
    };
  }
};
</script>

🍊 5、总结：ref和reactive对比

ref适用于基本类型和对象，操作需.value。reactive适用于对象类型。二者在对象修改和使用场景上有差异。toRefs与toRef可以将响应式对象属性转为ref对象，前者可批量，后者单个。

🍊 6、补充：toRefs与toRef

toRefs可以将响应式对象的所有属性转换为ref对象。toRef可以将响应式对象的一个属性转换为ref对象。

🎉 技术原理

toRefs和toRef底层使用reactive创建响应式数据，并通过.value属性暴露给模板。

🎉 应用场景

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

🎉 优势与局限

优势：

• 简化模板中数据的使用，提高代码可读性。
• 适用于将响应式对象属性转换为ref对象。

局限：

• 性能开销较大，相较于直接使用响应式对象，toRefs和toRef在处理大量数据时性能较差。

🎉 实际案例

<template>
  <div>
    <p>{{ name }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: 'Vue'
    });
    const { name } = toRefs(state);
    const updateName = () => {
      state.name = 'React';
    };
    return {
      ...toRefs(state),
      updateName
    };
  }
};
</script>

博主分享

📥博主的人生感悟和目标

📙经过多年在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

面试备战资料

八股文备战

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

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

开源项目分享

管理经验

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

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

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

• 💂 博客主页： Java程序员廖志伟
• 👉 开源项目：Java程序员廖志伟
• 🌥 哔哩哔哩：Java程序员廖志伟
• 🎏 个人社区：Java程序员廖志伟
• 🔖 个人微信号： SeniorRD

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