【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

文章目录

一、前言
二、ref
- （2-1）特性
- （2-2）使用场景
三、reactive
- （3-1）特性
- （3-2）使用场景
四、ref 与 reactive 的区别与联系
（4-1）区别
（4-2）联系
五、总结

在这里插入图片描述

一、前言

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

二、ref

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

import { ref } from 'vue';const count = ref(0); // 创建一个响应式引用，初始值为 0console.log(count.value); // 输出：0count.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，反之亦然，这增加了两者之间的互操作性。