Vue.js 3.x 中的响应式数据ref 与 reactive详解

更新时间：2024年01月02日 10:48:03 作者：此行月相随

ref 和 reactive 是 Vue.js 3 中用于创建响应式数据的两个关键函数,它们分别适用于不同类型的数据,帮助我们更好地组织和管理组件的状态,这篇文章主要介绍了Vue.js 3.x 中的响应式数据：ref 与 reactive,需要的朋友可以参考下

1. ref：处理基本数据类型的响应式数据

ref 主要用于创建包装基本数据类型的响应式数据。通过 ref，我们可以将数字、字符串、布尔等基本数据类型包装在一个对象中，以便进行响应式处理。

import { ref } from 'vue';
// 使用 ref 创建响应式数据
const count = ref(0);
// 访问 ref 的值
console.log(count.value); // 输出: 0
// 修改 ref 的值
count.value++;

在上述例子中，我们使用 ref 创建了一个包装了数字的响应式对象 count。注意，要访问和修改 ref 的值，需要使用 .value。

2. reactive：处理对象类型的响应式数据

相比之下，reactive 更适用于处理对象类型的响应式数据。通过 reactive，我们可以将整个对象变成响应式，包括对象的所有属性。(类似于vue2的data函数）

import { reactive } from 'vue';
// 使用 reactive 创建响应式对象
const state = reactive({
  message: 'Hello Vue',
  nested: {
    value: 42
  }
});
// 直接访问 reactive 对象的属性
console.log(state.message); // 输出: Hello Vue
// 修改 reactive 对象的属性
state.message = 'Vue 3 is awesome';
// 访问嵌套属性
console.log(state.nested.value); // 输出: 42

在上述例子中，我们使用 reactive 创建了一个响应式对象 state，其中包含了一个字符串属性 message 和一个嵌套对象属性 nested。

3. 如何选择：ref 还是 reactive？

使用 ref 当你处理基本数据类型，例如数字、字符串或布尔。
使用 reactive 当你处理对象类型，需要使对象的所有属性都成为响应式。

在实际开发中，你可能会同时使用 ref 和 reactive，根据数据的特性选择合适的 API。这种灵活性是 Vue.js 3 Composition API 的一个优势，使得管理组件状态变得更加直观和方便。

总结起来，ref 和 reactive 是 Vue.js 3 中用于创建响应式数据的两个关键函数，它们分别适用于不同类型的数据，帮助我们更好地组织和管理组件的状态。

到此这篇关于Vue.js 3.x 中的响应式数据：ref 与 reactive的文章就介绍到这了,更多相关Vue.js 响应式数据ref 与 reactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue中使用stylus报错的解决
如果你也和我一样，按照正常的流程下载并且配置了stylus，但是依旧报错，也许这篇文章就是你的菜，一起来看看吧
2022-08-08
vue中只渲染数组中的第一条或某一条方式
文章讲述了在Vue.js中如何根据数组索引渲染特定的数组元素,首先,介绍如何只渲染数组中的第一条数据,其次,讨论如何在特定页面渲染特定的数组元素,例如通过父组件传递参数来决定渲染哪一条数据,文章总结了个人经验,为开发者提供了一种有用的解决方案
2025-11-11
Vue+Canvas绘图使用的讲解
这篇文章主要介绍了Vue+Canvas绘图的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue实现a标签点击高亮方法
下面小编就为大家分享一篇vue实现a标签点击高亮方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
element-ui图片上传组件查看和限制方式
这篇文章主要介绍了关于element-ui图片上传组件查看和限制方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue实现移动端可拖拽式icon图标
这篇文章主要为大家详细介绍了vue实现移动端可拖拽式icon图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue+Ant Design进行大数据量下拉框卡顿与表单提交优化
在现代前端开发中,处理大数据量渲染和表单交互是常见的挑战,本文将探讨如何优化 Ant Design Vue 下拉框在大数据量情况下的性能问题,并解决表单提交后重复提示的问题,需要的可以了解下
2025-03-03
vue项目实现添加图片裁剪组件
这篇文章主要为大家详细介绍了vue项目实现添加图片裁剪组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue el-upload 上传文件格式校验方法
这篇文章主要介绍了vue el-upload 上传文件格式校验方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
Vue3项目中的hooks的使用教程
今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，快跟随小编一起来学习学习吧
2022-08-08