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.mzph.cn/news/668390.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 用户管理

重点: 视图,函数,存储过程,触发器,事件( 了解 ) 用户管理,密码管理 grant revoke 权限管理 MySQL 架构( 了解 ) 存储引擎:MyISAM 和 InnoDB …

算法训练营day22, 回溯2

216. 组合总和 III func combinationSum3(k int, n int) [][]int { //存储全部集合 result : make([][]int, 0) //存储单次集合 path : make([]int, 0) var backtrace func(k int, n int, sum int, startIndex int) backtrace func(k int, n int, sum int, startIndex int) {…

【JavaScript 漫游】【008】错误处理机制

文章简介 本文为【JavaScript 漫游】专栏的第 008 篇文章,记录了笔者所学习到的错误处理机制的所有知识点。 Error 实例对象原生错误类型,包括 SyntaxError、ReferenceError、RangeError、TypeError、URIError对象自定义错误throw 语句try...catch 结构…

【iOS ARKit】3D人体姿态估计实例

与2D人体姿态检测一样,在ARKit 中,我们不必关心底层的人体骨骼关节点检测算法,也不必自己去调用这些算法,在运行使用 ARBodyTrackingConfiguration 配置的 ARSession 之后,基于摄像头图像的3D人体姿态估计任务也会启动…

Python中的HTTP代理与网络安全

在当今数字化的世界里,网络安全已经成为我们无法忽视的重要议题。无数的信息在网络上传递,而我们的隐私和敏感数据也在这个过程中可能面临被窃取或滥用的风险。在Python编程中,HTTP代理作为一种工具,能够在网络安全方面发挥重要的…

docker重建镜像

DockerFile如下: FROM k8s-registry.qhtx.local/base/centos7-jdk8-haitong0704RUN yum -y update && yum install -y python3-devel && yum install -y python36 RUN mv /usr/bin/python /usr/bin/python_old RUN ln -s /usr/bin/python3 /usr/bi…

虹科技术|一文详解IO-Link Wireless技术如何影响工业无线自动化

导读:在工业无线自动化的飞速发展进程中,IO-Link Wireless技术成为了一项具有颠覆性的创新。它将IO-Link协议与无线连接完美结合,解决了传统通信技术在工业应用中的痛点。本文将深入解析IO-Link Wireless技术的原理、应用领域、优势以及实际案…

小华和小为的聚餐地点 - 华为OD统一考试

OD统一考试(C卷) 分值: 200分 题解: Java / Python / C++ 题目描述 小华和小为是很要好的朋友,他们约定周末一起吃饭。 通过手机交流,他们在地图上选择了多个聚餐地点(由于自然地形等原因,部分聚餐地点不可达)。 求小华和小为都能到达的聚餐地点有多少个? 输入描述…

[晓理紫]每日论文分享(有中文摘要,源码或项目地址)--强化学习、模仿学习、机器人

专属领域论文订阅 关注{晓理紫|小李子},每日更新论文,如感兴趣,请转发给有需要的同学,谢谢支持 如果你感觉对你有所帮助,请关注我,每日准时为你推送最新论文。 为了答谢各位网友的支持,从今日起…

WINDOWS搭建NFS服务器

下载并安装 Networking Software for Windows 启动配置 找到安装目录(如C:\Program Files\nfsd),双击nfsctl.exe,菜单Edit->Preferences 启动后: 配置Export Exports->Edit exports file 其他的几句我都删除…

(Flutter 常用插件整理

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Flutter 常用插件整理 # Flutter 城市列表,联系人列表,索引&悬停 https://github.com/flutterchina/azlistviewazlistview: ^2.0.0# Dart 汉字转拼音 https://github.com/flutterchina/lpinyinlpinyin…

selenium之鼠标动作链

定位除了使用xpath,css选择器定位外,还可以使用鼠标动作链来进行定位; 导入模块:from selenium.webdriver import ActionChains鼠标移动事件: ActionChains(driver).move_to_element(元素的位置).perform()鼠标左击事件&#xff…

XML:可扩展标记语言

XML:可扩展标记语言 主要内容 XML介绍DTDXSDDOM解析SAX解析 学习目标 知识点要求XML介绍掌握DTD掌握XSD掌握DOM解析掌握SAX解析掌握 一、XML介绍 1. 简介 XML(Extensible Markup Language)可扩展标记语言。严格区分大小写。 2. XML和…

react将选中本文自动滑动到容器可视区域内

// 自动滚动到可视区域内useEffect(() > {const target ref;const wrapper wrapperRef?.current;if (target && wrapperRef) {const rect target.getBoundingClientRect();const wrapperRect wrapper.getBoundingClientRect();const isVisible rect.bottom &l…

RPM与YUM

RPM RPM是Red Hat Package Manager的缩写,它是一种用于安装、卸载、升级和管理RPM包的工具。RPM使用一种数据库记录的方式来将软件安装到Linux系统,可以自动解决依赖性问题,并且提供了查询和校验等功能。 以下是使用rpm的基本操作&#xff…

python Flask 写一个简易的 web 端程序(附demo)

python Flask 写一个简易的 web 端程序 (附demo) 介绍简单介绍装饰器 app.route("/") 进阶增加接口设置端口 静态网页核心代码完整代码 介绍 Flask 是一个用于构建 Web 应用程序的轻量级 Python Web 框架。它设计简单、易于学习和使用&#x…

Python XML 转 JSON,XML 转字典

今天我们将学习如何在 Python 中将 XML 转换为 JSON 和 XML 转换为字典。我们可以使用 Python 的 xmltodict 模块来读取 XML 文件并将其转换为字典或 JSON 数据。我们还可以在大型 XML 文件上进行流式处理,并将其转换为字典。在进入编码部分之前,让我们首…

[N-139]基于springboot,vue宠物领养系统

开发工具:IDEA 服务器:Tomcat9.0, jdk1.8 项目构建:maven 数据库:mysql5.7 系统分前后台,项目采用前后端分离 前端技术:vue3element-plus 服务端技术:springbootmybatis-plusr…

Vue-easy-tree封装及使用

1.使用及安装 下载依赖 npm install wchbrad/vue-easy-tree引入俩种方案 1.在main.js中引入 import VueEasyTree from "wchbrad/vue-easy-tree"; import "wchbrad/vue-easy-tree/src/assets/index.scss" Vue.use(VueEasyTree)2.当前页面引入 import VueEa…

构建企业私域流量池:新时代的客户管理策略

随着互联网的发展和数字化时代的来临,企业面临的竞争环境日趋激烈。为了在众多竞争者中脱颖而出,许多企业开始转向私域流量的建设。私域流量是企业通过自有渠道获取的、可以自由支配的流量,对于提升品牌忠诚度、促进销售增长具有重要意义。本…