前端Vue篇之vue3 ref 能处理对象了?

在 Vue 3 中,ref 确实可以用来处理对象了。Vue 3 引入了 Composition API,这是一个新的编写组件的方式,它使得处理响应式数据更加灵活和高效。ref 是 Composition API 中的一个函数,用于创建一个响应式的引用数据。当你使用 ref 来处理基本数据类型(比如字符串、数字等)时,它会自动被包裹在一个对象里,你可以通过 .value 属性来访问或修改这个数据。

对于对象,Vue 3 提供了一个叫做 reactive 的函数,它专门用来创建响应式的对象。但这并不意味着 ref 不能处理对象。实际上,你也可以使用 ref 来处理对象,只是当你这么做时,整个对象会被作为一个响应式引用来处理,而不是对象内部的每个属性。这意味着,如果你直接修改对象内部的属性,这个修改不会触发界面更新。但如果你替换了整个对象,界面则会相应更新。

简而言之,使用 ref 来处理对象是完全可行的,只是它的工作方式与处理基本数据类型有所不同。如果你需要一个响应式的对象,并且希望对象内部的修改能够触发更新,那么使用 reactive 更加合适。如果你只是需要一个对象的引用,并且可以接受通过替换整个对象来触发更新,那么使用 ref 就足够了。

举个例子,假设你有一个用户对象,你可以这样使用 ref:

import { ref } from 'vue'const user = ref({name: 'John',age: 30
})// 访问属性
console.log(user.value.name) // "John"// 修改属性值不会触发更新
user.value.name = 'Jane'// 替换整个对象会触发更新
user.value = { name: 'Jane', age: 30 }

在上面的示例中,我们使用 ref 创建了一个包含对象的响应式引用 obj,然后可以通过 obj.value 来访问和修改对象的属性。请注意,在使用 ref 处理对象时,需要通过 obj.value 来访问对象的属性。

而如果你使用 reactive,则可以直接修改对象内的属性并触发更新:

import { reactive } from 'vue'const user = reactive({name: 'John',age: 30
})// 直接修改属性
user.name = 'Jane' // 这会触发界面更新

如果您需要更复杂的对象处理,推荐使用 reactivetoRefs 来处理对象,这样可以更好地管理对象的响应性和引用。

相关文章:
前端Vue篇之Vue3响应式:Ref和Reactive

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/792571.shtml

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

相关文章

配置code-server和texlive实现网页写tex

使用overleaf太卡了,有云服务器或者nas小主机,配置自己的code-servertexlive,来写论文。 之前用服务器配置过自己的overleaf,感觉不是很好用,缺少东西。 一、思路 使用docker先安装一个ubuntu,用dockerfil…

day63 单调栈part02

503. 下一个更大元素 II 中等 给定一个循环数组 nums ( nums[nums.length - 1] 的下一个元素是 nums[0] ),返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序,这个数字之后的第一个比它更…

【generate】如何维护一套icon组件库,直接输出svg为react component

https://github.com/ant-design/ant-design-web3/pull/761/files 实现了icon-preview(通过jsdoc, 鼠标放在组件上可以看到icon的样式),因为打包方式、产物以及命名上有一些不同,可能需要稍加改造。 这个同步脚本应该后续也用得上,略加改造同步…

Macbook文件清理软件 Mac电脑清理垃圾文件怎么清理

为了维护Macbook电脑的系统健康,我们需要定期给电脑进行全面清理,清除系统垃圾文件、软件缓存和系统内存。那么好用的Macbook文件清理软件有哪些呢?今天就给大家介绍几款好用的电脑清理软件并介绍Mac电脑清理垃圾文件怎么清理。 一、Macbook…

2024.3.6力扣每日一题——找出数组中的 K-or 值

2024.3.6 题目来源我的题解方法一 枚举遍历方法二 枚举遍历(优化) 题目来源 力扣每日一题;题序:2917 我的题解 方法一 枚举遍历 使用一个数组存储每一个比特位为1的数量,然后根据该数组得到结果的每一比特位是否为1…

29-控制流(下):iam-apiserver服务核心功能实现讲解

我们再来看下 iam-apiserver 中的核心功能实现。 这些关键代码设计分为 3 类,分别是应用框架相关的特性、编程规范相关的特性和其他特性。 应用框架相关的特性 应用框架相关的特性包括三个,分别是优雅关停、健康检查和插件化加载中间件。 优雅关停 …

基于SpringBoot和Vue的教务网络管理系统的设计与实现【附源码】

1、系统演示视频(演示视频) 2、需要交流和学习请联系

00-JAVA基础-注解及反射解析注解

注解 什么是注解 Java 注解(Annotation)是 JDK 5.0 引入的一种元素,用于为 Java 代码提供元数据。元数据是关于数据的数据,它为代码提供附加信息,而这些信息并不直接参与到程序的逻辑中,但可以被编译器或…

【shell】shell脚本设置ulimit -c unlimited但脚本结束后系统ulimit -c未生效

问题现象 在程序启动脚本中设置了ulimit -c unlimited,但是查看系统环境ulimit -c却未生效,仍显示0 脚本如下 #! /bin/bash ulimit -c unlimited echo "password" | sudo -S sysctl -w kernel.core_pattern/your_path/core.%e.%p.%t.%s./test…

Spring Boot | Spring Boot的“数据访问“、Spring Boot“整合MyBatis“

目录: 一、Spring Boot”数据访问概述“二、Spring Boot”整合MyBatis”1. 基础环境搭建 (引入对应的“依赖启动器” 配置数据库的“相关参数”)① 数据准备 (导入Sql文件)② 创建项目,引入相应的启动器,编写数据库对应的“实体类”③额外添加pom.xml文…

联想 Y9000P 连接网线速度慢 的 问题解决

参考帖子:求助,拯救者Y9000P 2022 i73060版本 有线网非常慢 无线网正常【笔记本吧】_百度贴吧 问题原因: 网卡驱动版本不对。不能用Win11版,要用Win10版。 问题解决: 1、卸载原驱动 2、下载Win10 驱动 并安装 下载…

redis特殊数据类型-Hyperloglog(基数统计)用法

一,Hyperloglog介绍 Redis HyperLogLog 是用来做基数统计的算法,HyperLogLog 的优点是,在输入元素的数量或者体积非常非常大时,计算基数所需的空间总是固定的、并且是很小的。花费 12 KB 内存,就可以计算接近 2^64 个不…

ETL工程师介绍

ETL工程师是负责ETL(Extract, Transform, Load)过程的专业人员。ETL是数据仓库和数据集成的关键组成部分,用于从多个不同的数据源中提取数据,对数据进行转换和清洗,最后加载到目标数据存储中。 ETL工程师的主要职责包…

MFC通用静态库制作与使用

开发环境VS2013 1、新建工程,选择Win32 Project,命名,选择路径等 2、选择Static library ,勾选MFC 3、点击完成。在工程中添加相应的头文件、源文件等通用功能函数或者类。 4、在其他工程引入使用。在使用的工程项目设置中Linker…

tsv、csv、xls等文件类型区别及处理(python版)

目录 前言 介绍 tsv、csv、txt的区别 读取/生成 不同格式数据文件(python) 一、读取/生成csv数据文件 二、读取/生成txt数据文件 三、读取/生成tsv数据文件 四、读取/生成xls数据文件 不同文件格式转化 总结 前言 考虑到进行机器学习、深度学习…

vue快速入门(五)v-show与v-if

注释很详细&#xff0c;直接上代码 上一篇 新增内容 v-if与v-show底层的区别v-if与v-show的效果 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice…

删除中间节点(狸猫换太子法)

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 每一个裂缝都是为透出光而努力&#…

【形式化方法模型在软件工程中的应用】

文章目录 前言什么是形式化方法模型&#xff1f;常见的形式化方法模型1. Z语言优点&#xff1a;缺点&#xff1a; 2. B-Method优点&#xff1a;缺点&#xff1a; 3. Alloy优点&#xff1a;缺点&#xff1a; 前言 形式化方法通过数学和形式化语言来描述和验证软件系统的行为。 …

C++模板基础1——定义函数模板

函数模板定义格式 模板函数定义格式如下&#xff1a; template <typename T> 返回类型 函数名(参数列表) {// 函数体 }其中&#xff0c;template<typename T>是模板声明&#xff0c;用于定义模板参数 T。可以使用不同的关键字代替 typename&#xff0c;例如 clas…

腾讯云4核8G服务器最多能承载多少用户在线?谁知道?

腾讯云4核8G服务器价格&#xff1a;轻量4核8G12M优惠价格646元15个月、CVM S5服务器4核8G配置1437元买1年送3个月。腾讯云4核8G服务器支持多少人同时在线&#xff1f;支持30个并发数&#xff0c;可容纳日均1万IP人数访问。腾讯云百科txybk.com整理4核8G服务器支持多少人同时在线…