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

Vue3中的ref和shallowRef、reactive和shallowReactive

一:ref、reactive简介

  • ref和reactive是Vue3中定义响应式数据的一种方式。
  • ref通常用来定义基础类型数据。
  • reactive通常用来定义复杂类型数据。

二、shallowRef、shallowReactive简介

  • shallowRef和shallowReactive是Vue3中定义浅层次响应式数据的方式

三、Api使用对比

注意:监听不到变化的数据,在页面中其它数据变化被监听到时,会同步改变

shallowRefshallowReactive
修改浅层数据正常监听正常监听
修改深层数据无法监听无法监听
修改对象数据自身正常监听无法监听
修改数组对象自身正常监听正常监听

1、shallowRef

① 定义基础数据

let sum = shallowRef(0)sum.value++  // 数据正常监听

② 定义对象、数组

// 1、定义对象
let personRef = shallowRef({name:'李四',age:18,
})
//    修改深层数据
personRef.value.name = '小猪佩奇'; // 监听不到
//    修改浅层数据(自身)
personRef.value = {name:'小猪佩奇',age:2}; // 数据可正常监听// 2、定义数组
let listRef = shallowRef([1,2,3,4])
//    修改深层数据
listRef.value[0] += 2; // 监听不到
//    修改浅层数据(自身)
listRef.value = [9,99,999]; // 数据可正常监听

2、shallowReactive

①、定义对象

let personRea = shallowReactive({name:'张三',age:25,children:{name:'张XX',age:1}
})
//    修改浅层次数据
personRea.name = '张思锐'; // 可正常监听
personRea.children = {name:'张Y',age:1.5}; // 可正常监听
//    修改深层次数据
personRea.children.name = '张YY'; // 数据监听不到
//    修改数据本身
Object.assign(personRea,{name:'张三三',age:26,children:{name:'张XX',age:2}
}); // 数据监听不到

②、定义数组

let listRea = shallowReactive([{a:1},{a:2}
])
// 修改浅层次数据
listRea[0] = {a:99}; // 可正常监听
// 修改深层次数据
listRea[0].a += 2; // 监听不到
// 修改数据本身
listRea.length = 0 // 可正常监听

四、关于浏览器插件Vue.js.devtools的提醒

注意:通过shallowRef和shallowReactive定义的数据改变时未被监听到时,在浏览器插件Vue.js devtools中也监听不到变化,但是在页面中别的响应式数据变化时,会触发改变

1、 

相关文章:

Vue3中的ref和shallowRef、reactive和shallowReactive

一:ref、reactive简介 ref和reactive是Vue3中定义响应式数据的一种方式。ref通常用来定义基础类型数据。reactive通常用来定义复杂类型数据。 二、shallowRef、shallowReactive简介 shallowRef和shallowReactive是Vue3中定义浅层次响应式数据的方式 三、Api使用对比…...

go包与依赖管理

包(package) 包介绍 Go语言中支持模块化的开发理念,在Go语言中使用包(package)来支持代码模块化和代码复用。一个包是由一个或多个Go源码文件(.go结尾的文件)组成,是一种高级的代码…...

C++文件操作基础 读写文本、二进制文件 输入输出流 文件位置指针以及随机存取 文件缓冲区以及流状态

一、写入文本文件 文本文件一般以行的形式组织数据。 包含头文件&#xff1a;#include <fstream> 类&#xff1a;ofstream&#xff08;output file stream&#xff09; ofstream 打开文件的模式&#xff08;方式&#xff09;&#xff1a;类内open()成员函数参数2.参数1是…...

nginx部署前端(vue)项目及配置修改

目录 一、前端应用打包 二、部署前端应用 1、上传前端文件夹 2、修改nginx配置文件 3、重启nginx 三、查看效果 nginx安装参考&#xff1a;linux安装nginx-CSDN博客 一、前端应用打包 打包命令 npm run build 打包成功如下&#xff0c;会在项目路径下生成dist文件夹 二…...

FreeRTOS

1.新建一个无FreeRTOS的工程&#xff0c;取名为Motor&#xff0c;根据风扇模块PDF原理图和操作文档让风扇转动 2.新建一个包含FreeRTOS的工程&#xff0c;取名为Semaphore 具体步骤&#xff1a;创建两个任务和一个共享资源&#xff0c;在两个任务中使用信号量来同时访问共享资源…...

windows 10/11 home左键点击开始菜单无反应

用户电脑点开始没反应&#xff0c;用户配置文件出错。 用户电脑是home版 windows hello指纹设置不了,其实是不能使用默认帐号administrator。 使用windowspe启用administrator用户&#xff0c;重启使用administrator删除出错用户。 直接使用administrator用户windows hello…...

05.领域驱动设计:认识领域事件,解耦微服务的关键

目录 1、概述 2、领域事件 2.1 如何识别领域事件 1.微服务内的领域事件 2.微服务之间的领域事件 3、领域事件总体架构 3.1 事件构建和发布 3.2 事件数据持久化 3.3 事件总线 (EventBus) 3.4 消息中间件 3.5 事件接收和处理 4、案例 5、总结 1、概述 在事件风暴&a…...

「仙逆」王麻子结丹救下老婆,极识斩杀金丹修士,元婴期下第一人

Hello,小伙伴们&#xff0c;我是拾荒君。 国漫《仙逆》第21期超前爆料&#xff0c;据透露王麻子因急需天离丹来突破至金丹期&#xff0c;购买了被斗邪派预定的百兽灵炉&#xff0c;却遭其宗派追杀。虽然王麻子已触及结丹边缘&#xff0c;但面对五名邪派长老&#xff0c;他毫无…...

GoogleNet Inception v2 和 Inception v3详解

1 GoogleNet Inception v2 v1具体结构&#xff1a; v2具体结构&#xff1a; 1 引入Batch Normalization&#xff08;BN&#xff09;: Inception v2在每个卷积层之后引入了BN。这有助于解决深层网络中的梯度消失问题&#xff0c;同时加快训练过程并提高模型的收敛速度。BN通过…...

在虚拟机上安装ubuntu

记得看目录哦&#xff01; 软件自取1. 新建虚拟机2. Ubuntu的汉化 软件自取 链接&#xff1a;百度网盘自取哦&#xff01;&#xff01;&#xff01; 提取码&#xff1a;8888 1. 新建虚拟机 文件–新建虚拟机 完成完会自动启动&#xff0c;等待一段时间&#xff0c;我等了一个…...

nav02 学习03 机器人传感器

机器人传感器 移动机器人配备了大量传感器&#xff0c;使它们能够看到和感知周围的环境。这些传感器获取的信息可用于构建和维护环境地图、在地图上定位机器人以及查看环境中的障碍物。这些任务对于能够安全有效地在动态环境中导航机器人至关重要。 机器人的传感器类似人的感官…...

Mysql-InnoDB-数据落盘

概念 1 什么是脏页&#xff1f; 对于数据库中页的修改操作&#xff0c;则首先修改在缓冲区中的页&#xff0c;缓冲区中的页与磁盘中的页数据不一致&#xff0c;所以称缓冲区中的页为脏页。 2 脏页什么时候写入磁盘&#xff1f; 脏页以一定的频率将脏页刷新到磁盘上。页从缓冲区…...

<el-date-picker>时间戳单位

神级操作&#xff0c;搞了半天&#xff0c;秒是大X&#xff0c;毫秒是小x&#xff0c;yue了。 // 秒 <el-date-pickerv-model"timestamp"value-format"X" ></el-date-picker>// 毫秒 <el-date-pickerv-model"timestamp"value-fo…...

如何搭建Nextcloud云存储网盘并实现无公网ip访问本地文件【内网穿透】

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

力扣hot100 子集 回溯 超简洁

Problem: 78. 子集 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 参考题解 复杂度 时间复杂度: 添加时间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) 空间复杂度: 添加空间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) Code class Solution {List<Li…...

Linux系统Shell脚本编程之条件语句

一、条件测试 Shell 环境根据命令执行后的返回状态值 " $? " 来判断是否执行成功&#xff0c;当返回值为0时表示成功&#xff0c;否则表示失败或异常&#xff08;非0值&#xff09;。使用专门的测试工具 test 命令&#xff0c;可以对特定条件进行测试&#xff0c;并…...

Jmeter连接数据库报错Cannot load JDBC driver class‘com.mysql.jdbc.Driver’解决

问题产生: 我在用jmeter连接数据库查询我的接口是否添加数据成功时,结果树响应Cannot load JDBC driver class com.mysql.jdbc.Driver 产生原因: 1、连接数据库的用户密码等信息使用的变量我放在了下面,导致没有取到用户名密码IP等信息,导致连接失败 2、jmeter没有JDB…...

C# 获取计算机信息

目录 一、本机信息 1、本机名 2、获得本机MAC地址 3、获得计算机名 4、显示器分辨率 5、主显示器分辨率 6、系统路径 二、操作系统信息 1、操作系统类型 2、获得操作系统位数 3、获得操作系统版本 三、处理器信息 1 、处理器个数 四、CPU信息 1、CPU的个数 2、…...

第4章 python深度学习——(波斯美女)

第4章 机器学习基础 本章包括以下内容&#xff1a; 除分类和回归之外的机器学习形式 评估机器学习模型的规范流程 为深度学习准备数据 特征工程 解决过拟合 处理机器学习问题的通用工作流程 学完第 3 章的三个实例&#xff0c;你应该已经知道如何用神经网络解决分类问题和回归…...

[UI5 常用控件] 03.Icon, Avatar,Image

文章目录 前言1. Icon2. Avatar2.1 displayShape2.2 initials2.3 backgroundColor2.4 Size2.5 fallbackIcon2.6 badgeIcon2.7 badgeValueState2.8 active 3. Image 前言 本章节记录常用控件Title,Link,Label。 其路径分别是&#xff1a; sap.m.Iconsap.m.Avatarsap.m.Image 1…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

渗透实战PortSwigger Labs指南:自定义标签XSS和SVG XSS利用

阻止除自定义标签之外的所有标签 先输入一些标签测试&#xff0c;说是全部标签都被禁了 除了自定义的 自定义<my-tag onmouseoveralert(xss)> <my-tag idx onfocusalert(document.cookie) tabindex1> onfocus 当元素获得焦点时&#xff08;如通过点击或键盘导航&…...