当前位置: 首页 > article >正文

reactive 与 ref 的区别

在 Vue.js 中,reactive 是 Vue 3 引入的一个新的 API,用于创建响应式对象。这种方法是 Composition API 的一部分,它提供了一种更灵活的方式来组织和重用逻辑。

reactive 的基本用法

使用 reactive,你可以将普通的 JavaScript 对象转换为响应式对象。当这个对象的属性发生变化时,Vue 会自动检测这些变化并更新视图。

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

在这个例子中,state 是一个响应式对象,我们可以在组件中使用它,并且当我们更改 state.count 的值时,所有使用到 state.count 的地方都会自动更新。

reactiveref 的区别

  • ref 用于包裹一个基本数据类型(如字符串、数字等),使其变为响应式的。访问或修改 ref 包裹的值时,需要通过 .value 属性。
  • reactive 直接接收一个对象,并使这个对象的所有嵌套属性都变为响应式的。访问或修改 reactive 返回的对象时,直接像操作普通对象一样即可。

响应式转换的注意事项

需要注意的是,reactive 是基于 ES6 的 Proxy 实现的,它会返回原始对象的响应式代理。这意味着当你操作返回的响应式对象时,实际上是通过代理间接操作原始对象的。

const original = { foo: 1 };
const observed = reactive(original);
console.log(observed.foo === original.foo); // true

另外,reactive 会深度地将一个对象内部的所有属性转换为响应式(包括对象内部嵌套的对象),但如果给响应式对象赋值一个新的非响应式对象,这个新对象不会自动变成响应式的。

使用场景

  • 当你需要管理的状态是一个复杂对象,并且你希望对象内部的修改都能触发视图更新时,推荐使用 reactive
  • 对于单一的基本类型值,或者当你需要引用一些可能会被替换的响应式对象时,使用 ref 更合适。

reactive 提供了一种强大且灵活的方式来创建和管理响应式状态,特别是在使用 Vue 3 的 Composition API 构建大型应用时,它可以帮助你更好地组织和复用逻辑。

什么是响应式对象

在 Vue.js 框架中,响应式对象是一个非常核心的概念。简单来说,响应式对象指的是 Vue 可以跟踪其属性变化的对象。当这些对象的状态(属性值)发生变化时,Vue 会自动确保视图与这些状态保持同步,即视图会相应地进行更新。

如何创建响应式对象

在 Vue 3 中,主要通过 reactiveref 函数来创建响应式对象。

  • 使用 reactive 创建响应式对象

reactive 函数接受一个普通 JavaScript 对象,并返回该对象的响应式代理。这个代理对象的所有嵌套属性也都是响应式的。

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

在上面的例子中,我们创建了一个响应式对象 state,其中包含一个属性 count。当我们更改 state.count 的值时,依赖 state.count 的任何视图都会自动更新。

  • 使用 ref 创建响应式数据

ref 函数可以将基本数据类型(如字符串、数字等)包裹起来,使其变为响应式。与 reactive 不同,通过 ref 创建的响应式数据在访问或修改时,需要使用 .value 属性。

import { ref } from 'vue';

const count = ref(0);

在此例中,count 是一个通过 ref 创建的响应式引用,存储的是数字 0。要修改 count 存储的值,我们需要通过 count.value 来进行。

响应式系统的工作原理

Vue 的响应式系统基于 ES6 的 Proxy 特性。当你使用 reactiveref 创建响应式对象时,Vue 内部会基于 Proxy 为原始对象创建一个代理(Proxy)。这个代理使得 Vue 能够在属性被访问或修改时进行拦截,以实现数据的响应式变化。

当响应式对象的属性值发生变化时,Vue 能够自动侦测到这些变化,并重新执行依赖这些数据的组件的渲染函数,从而更新视图。这个过程是自动且高效的,开发者无需手动更新 DOM。

总的来说,响应式对象是 Vue 数据响应系统的基石,它让状态与视图之间的同步变得自然且无缝,极大提升了开发效率和用户体验。


http://www.kler.cn/a/228315.html

相关文章:

  • 【2024年华为OD机试】(A卷,200分)- 优雅子数组 (JavaScriptJava PythonC/C++)
  • 计算机毕业设计hadoop+spark+hive图书推荐系统 豆瓣图书数据分析可视化大屏 豆瓣图书爬虫 知识图谱 图书大数据 大数据毕业设计 机器学习
  • css粘性定位超出指定宽度失效问题
  • Codeforces Round 998 (Div. 3)
  • 【Linux】19.基础IO(1)
  • 通过视觉语言模型蒸馏进行 3D 形状零件分割
  • Ubuntu+GPU搭建Stable-Diffusion教程
  • 安装配置Oracle 11g 、PLSQL及使用Navicat远程连接Oracle
  • DVI接口主机连接VGA显示器解决方案:DVI转VGA转换器DV
  • kafka客户端生产者消费者kafka可视化工具(可生产和消费消息)
  • 什么是死信队列
  • appium抓包总结
  • C++设计模式-里氏替换原则
  • ReactNative实现宽度变化实现的动画效果
  • Qt基础-QMap详解
  • 随机森林超参数的网格优化(机器学习的精华--调参)
  • Linux定时器和时间管理
  • arcpy高德爬取路况信息数据json转shp
  • 关于如何将Excel转成Word,可能有一些你想知道的技巧
  • Linux内存管理:(十二)Linux 5.0内核新增的反碎片优化
  • STM32单片机的基本原理与应用(六)
  • 阿里巴巴 Java 开发手册
  • Leetcode 3031. Minimum Time to Revert Word to Initial State II
  • DBA的节前紧急任务:一份全面的数据库自救指南
  • kubeadm部署k8s集群
  • Android BitmapShader setLocalMatrix缩放Bitmap高度重新onMeasure,Kotlin