shallowReactive浅层式响应对象

一、

 reactive 和ref 都是深层响应式对象: 就是不管对象有多少层,修改此对象任一属性都会响应式处理

 shallowReactive 和shallowRef 浅层响应式对象: 只会修改第一层对象,修改此对象第一层属性,视图会有同步变化,非第一层,数值会变,视图不会变。

例如有这样一个对象

{
id:1,name:'张三',car:{price: 7000,color: 'red'}
}

vue3中定义shallowReactive 对象后,修改id。视图会同步变化,如果修改的是car.price。视图不会变化,除非先修改car.price 对象,然后再修改id,这时第一层对象触发,会把这个对象更新。具体例子如下:

<script setup> /*** reactive 和ref 都是深层响应式对象: 就是不管对象有多少层,修改此对象任一属性都会响应式处理* shallowReactive 和shallowRef 浅层响应式对象:* * */import {reactive,ref,shallowReactive} from 'vue';const state = reactive({id:1,name:'张三',car:{price: 7000,color: 'red'}});function updateStateId() {state.id++;};function updateStatePrice() {state.car.price++;};const stateRef = ref({id:1,name:'张三',car:{price: 7000,color: 'red'}});function updateRefStateId() {stateRef.value.id++;};function updateRefStatePrice() {//直接改非第一层数据,视图不更新,也就是多层级的数据是非响应式的stateRef.value.car.price++;};const shallowstate = shallowReactive({id:1,name:'张三',car:{price: 7000,color: 'red'}});function updateIdByShallowReactive() {shallowstate.id++;};function updatePriceByShallowReactive() {//直接改非第一层数据,视图不会更新,也就是多层级的数据是非响应式的shallowstate.car.price++;};function updatePriceAndIdByShallowReactive() {//直接改非第一层数据,视图不会更新,也就是多层级的数据是非响应式的shallowstate.car.price++;//当修改了第一层数据,也修改其他层数据,此时会将此对象所有的数据都更新视图//原理:当改变底层数据会触发该状态的监听器,将此状态所有数据更新到视图中shallowstate.id++;};</script><template><div><p>reactive=={{ state.id }}=={{ state.car }}</p><button @click="updateStateId">更新reactive</button><button @click="updateStatePrice">更新reactiveprice</button><p>ref=={{ stateRef.id }}=={{ stateRef.car }}</p><button @click="updateRefStateId">更新ref</button><button @click="updateRefStatePrice">更新ref price</button><h4>function updatePriceAndIdByShallowReactive() {<br>//直接改非第一层数据,视图不会更新,也就是多层级的数据是非响应式的<br>shallowstate.car.price++;<br>//当修改了第一层数据,也修改其他层数据,此时会将此对象所有的数据都更新视图<br>shallowstate.id++;<br>};</h4><p>shallowReactive=={{ shallowstate.id }}=={{ shallowstate.car }}</p><button @click="updateIdByShallowReactive">shallowReactive更新id</button><button @click="updatePriceByShallowReactive">shallowReactive更新car.price</button><button @click="updatePriceAndIdByShallowReactive">shallowReactive更新car.price和id</button></div>
</template><style scoped></style>

点击更新ref对象数据id++ 按钮,id属性加1

点击更新ref对象数据car.price++,car.price属性加1

点击更新reactive对象数据id++按钮,id属性加1

点击更新reactive对象数据car.price++,car.price属性加1

点击更新shallowReactive对象属性id++,id属性加1

点击更新shallowReactive对象属性car.price++,car.price属性加1,视图不更新。还是7000

点击更新shallowReactive对象属性car.price和id++,car.price和id属性都加1,并且shallowReactive视图更新。看到下图id加了1,price 加了2。

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

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

相关文章

Webapi 日志过滤器(接口日志记录)

/// <summary> /// 日志过滤器 /// </summary> public class LogFilter : IAsyncActionFilter {private readonly ILogger<LogFilter> _logger;public LogFilter(ILogger<LogFilter> logger){_logger logger;}public async Task OnActionExecutionAsy…

WorkPlus Meet局域网视频会议软件的领先解决方案

局域网视频会议软件在现代企业中发挥着重要的作用&#xff0c;而在众多选项中&#xff0c;为何选择WorkPlus Meet作为局域网视频会议软件&#xff1f; 选择局域网视频会议软件时需要考虑到企业的需求。WorkPlus Meet提供了稳定、高效的局域网视频会议功能&#xff0c;能够满足…

关于d3dx9_43.dll文件丢失的解决办法,六种详细方法

当d3dx9_43.dll文件缺失时&#xff0c;系统会显示错误信息来提示用户。这些错误信息可能会包含类似于"d3dx9_43.dll未找到"或"找不到d3dx9_43.dll"等字样。通常出现这样的字样那就是导致应用程序通常无法正常启动或执行相关功能。那么出现这样的功能有什么…

哔哩哔哩后端Java一面

前言 作者&#xff1a;晓宜 个人简介&#xff1a;互联网大厂Java准入职&#xff0c;阿里云专家博主&#xff0c;csdn后端优质创作者&#xff0c;算法爱好者 最近各大公司的春招和实习招聘都开始了&#xff0c;这里分享下去年面试B站的的一些问题&#xff0c;希望对大家有所帮助…

【自动化】C#中的全双工通信与半双工通信:读写问题及应用实例

引言&#xff1a; 在网络编程和嵌入式系统中&#xff0c;串口通信是一个常见的任务。C#语言通过SerialPort类为开发者提供了实现串口通信的便捷方式。在串口通信中&#xff0c;根据通信双方能否同时发送和接收数据&#xff0c;可以将通信模式分为全双工和半双工两种。本文将详细…

c语言:于龙减

于龙减 任务描述 于老师觉得于龙加法还不够刺激&#xff0c;于是又设计了于龙减。 两个非负整数的于龙减“A&#xff0d;B”的意义是&#xff1a;在A的所有数字中&#xff0c;凡是在B中出现的数字都划掉&#xff0c;A中剩下的数就是结果&#xff0c;如果不剩结果就是0。 于龙…

【Golang星辰图】Go语言游戏开发:选择合适的库加速你的开发过程

打造出色的游戏体验&#xff1a;使用Go库进行游戏和图形开发 前言 Go语言通过其简洁、高效和并发性的特性&#xff0c;逐渐在开发领域中崭露头角。对于游戏和图形开发&#xff0c;Go也有一些优秀的库和引擎可供选择。本文将介绍几个流行的Go库&#xff0c;包括ebiten、raylib…

Centos7安装ffmpeg

Centos7安装ffmpeg 用到的包压缩并安装 用到的包 压缩并安装 tar xvJf ffmpeg-5.0.1.tar.xz yum install -y gcctar -zxvf yasm-1.3.0.tar.gz cd yasm-1.3.0 ./configure make && make install yasm --versionyum install -y bzip2tar jxvf nasm-2.14.02.tar.bz2 cd n…

C语言向C++过渡的基础知识(二)

目录 C中的函数重载 函数重载介绍 函数类型的使用 C中的引用 引用的介绍 引用的使用 引用与指针的对比 常量引用 引用在实际中的使用 函数返回值 返回值和返回引用时间消耗对比 函数形式参数 形式参数为值与形式参数为引用时间消耗对比 内联函数 内联函数的特点…

Spring MVC文件上传配置

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 文件上传 Spring MVC文件上传基于Servlet 3.0实现&#xff1b;示例代码如下&#xff1a; Overrideprotected void customizeRegistration(ServletRegistration.Dynamic reg…

Guitar Pro 8.1功能介绍及如何安装安装破解教程

音乐创作是许多音乐人的核心工作&#xff0c;而吉他作为其中最为常用的乐器之一&#xff0c;其创作和演奏的重要性也不言而喻。在创作过程中&#xff0c;如何更好地记录和编辑音乐成为了许多音乐人所面临的挑战。而Guitar Pro 8.1则是一款专业的吉他音乐编辑软件&#xff0c;它…

T1.数据库MySQL

二.SQL分类 2.1 DDL 2.1.1数据库操作 1). 查询所有数据库 show databases ; 2). 查询当前数据库 select database(); 3)创建数据库 create database [if not exists] 数据库名 [default charset 字符集] [collate 排序规则] ; 4&#xff09;删除数据库 drop database …

【机器学习系列】M3DM工业缺陷检测部署与训练

一.基础资料 1.Git 地址 地址 2.issues issues 3.参考 参考 csdn 二.服务器信息 1.GPU 服务器 GPU 服务器自带 CUDA 安装(前提是需要勾选上)CUDA 需要选择大于 11.3 的版本登录服务器后会自动安装 GPU 驱动 2.CUDA 安装 GPU 服务器自带 CUDA CUDA 版本查看 3.登录信…

欢迎来到实力至上教室-名言(解释来自文心一言)-04

人在这世上是无法独自生存的。因为学校和社会都是由众多人所组成。——绫小路清隆 首先&#xff0c;从生物学的角度看&#xff0c;人类作为社会性动物&#xff0c;天生就具有与他人互动和合作的本能。无论是在原始社会还是现代文明中&#xff0c;人类都需要通过集体合作来确保生…

小红书图片怎么提取?小红书图片提取原图方法!

说到小红书&#xff0c;不少女性群体都知道这个&#xff0c;他的价值很高而且变现对于大多数做自媒体的小伙伴来说&#xff0c;也是不错的选择&#xff01; 小红书对于普通大众还是互联网创作者来说&#xff0c;都太实用了&#xff0c;唯一的缺点可能就是当我们需要存储他的图…

2.VDMA视频流显示通路搭建

1.简介 本节主要讲解如何基于ZYNQ7020搭建一个视频流接收以及显示的数据通路。为后续的算法图像验证提供基础。 2.项目框架 整个项目简略框架如图&#xff0c;img_gen负责产生图像像素点&#xff0c;给到video in to AXI_Stream模块后转化为AXI_Stream数据流给到VDMA&#xff…

STM32---SG90舵机控制(HAL库,含源码)

写在前面&#xff1a;在嵌入式的项目中&#xff0c;舵机是一个十分常见的元器件模块&#xff0c;其主要的功能是实现机械转动&#xff0c;实质上舵机是一个伺服的驱动器&#xff0c;适用于那些需要角度不断变化并可以保持的控制系统。例如在机器人的电控制器系统中&#xff0c;…

深入解析 Kafka生产者:关键特性与最佳实践

引言 Apache Kafka作为一个高度可扩展且具有高效性的消息中间件&#xff0c;已经成为现代大数据生态系统中的核心组件之一。在本文中&#xff0c;我们将专注于Kafka中的一个重要角色——生产者&#xff08;Producer&#xff09;&#xff0c;探讨其核心功能、工作原理及其关键配…

用户数据的FLASH存储与应用(FPGA架构)

该系列为神经网络硬件加速器应用中涉及的模块接口部分&#xff0c;随手记录&#xff0c;以免时间久了遗忘。 一 背景 我们知道&#xff0c;在FPGA做神经网络应用加速时&#xff0c;涉及到权重参数的存储和加载。通常在推理过程中&#xff0c;会将权重参数存储在外部DDR或片上S…

c++简单实现avl树

文章目录 AVL树节点类节点类的构造函数 AVLinsert()插入RotateL(左单旋)RotateR(右单旋)RotateLR(右双旋)RotateRL(左双旋) Find(查找)IsBalance(检查是否是avl树) AVL树 AVL树:又名高度平衡树&#xff0c;在二叉搜索树的基础上加上了一个条件&#xff0c;条件是左右子树高度差…