【vue3|第5期】Vue3响应式数据：ref 与 reactive 的深入解析

日期：2024年5月31日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

---

---

---

一、前言

在 Vue3 中，响应式数据是构建动态 UI 的基石。Vue3 引入了 组合式API（即 Composition API），并提供了 ref 和 reactive 两个函数来创建响应式数据。本文将详细介绍 ref 和 reactive 的使用方法、适用场景、区别以及它们之间的联系。

二、ref

ref 是 Vue3 中用于创建响应式引用（reference）的函数。它返回一个具有 value 属性的对象，该属性是响应式的。可以通过 .value 来访问或修改这个值。

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式引用，初始值为 0

console.log(count.value); // 输出：0

count.value++; // 修改引用的值
console.log(count.value); // 输出：1

（2-1）特性

• ref 主要用于创建基本类型（如 number、string、boolean 等）的响应式数据。
• ref 返回的是一个对象，而不是如数字、字符串等，因此你需要通过 .value 来访问或修改它的值。
• 在模板中，Vue 会自动解包 ref 的值，所以你不需要写 .value。

（2-2）使用场景

• 当你需要一个单独的响应式值时，比如一个计数器或者一个表单输入字段的值。
• 在 Composition API 中，ref 是一个非常常见的选择，因为它可以与 setup 函数中的其他逻辑很好地组合。

三、reactive

reactive 函数用于创建复杂数据结构（如对象、数组等）的响应式对象。，该对象的属性都是响应式的。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue 3'
});

console.log(state.count); // 输出：0
console.log(state.name); // 输出：'Vue 3'

state.count++; // 修改对象的属性值
console.log(state.count); // 输出：1

（3-1）特性

• reactive 主要用于创建复杂类型（如对象、数组等）的响应式数据。
• 返回的对象本身就是响应式的，你可以直接访问或修改它的属性。
• 在模板中，你可以像访问普通对象属性一样访问 reactive 对象的属性。

（3-2）使用场景

• 当你需要一个具有多个响应式属性的对象时，比如一个包含多个状态或属性的组件状态。
• 在 Options API 中，你可能已经习惯了使用 data 函数返回对象来管理状态，而 reactive 可以看作是这种模式的扩展，用于 Composition API。

四、ref 与 reactive 的区别与联系

（4-1）区别

内容	ref	reactive
用途	主要用于创建基本类型的响应式数据	用于创建复杂类型的响应式数据。
返回值	一个具有 value 属性的对象	直接返回响应式对象
模板使用	自动解包 ref 的值	对象属性则可以直接访问
内部实现	创建一个具有单个 .value 属性的响应式对象	通过使用 ES6 的 Proxy 对象来创建一个代理，该代理可以拦截对象的所有操作。
性能考量	一般情况，性能更优	对象的每个属性需要进行递归转换

（4-2）联系

• 响应式原理：两者都基于 Vue3 的响应式系统，当数据发生变化时，视图会自动更新。
• 组合使用：在实际开发中，可以根据需要组合使用 ref 和 reactive。例如，可以在 reactive 对象的属性中使用 ref。
• 互操作性：Vue 3 提供了 toRefs 和 toRef 函数，允许我们将 reactive 对象转换为 ref，反之亦然，这增加了两者之间的互操作性。

五、总结

ref 和 reactive 是 Vue3 中创建响应式数据的两个重要函数。它们各有特点，适用于不同的场景。通过深入理解它们的用法和区别，可以更加灵活地构建 Vue3 应用程序的响应式数据层。

---

参考文章：

• Vue.js

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/139349923