【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw
假期第六篇,对于基础的知识点,我感觉自己还是很薄弱的。
趁着假期,再去复习一遍
1、shallowReactive与shallowRef
shallowReactive:只处理对象最外层属性的响应式(浅响应式)
shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理(浅引用)
使用:
如果有一个对象数据,结构比较深,但变化时只是外层属性发生变化====>shallowReactive
如果有一个对象数据,后续功能不会修改该对象中的属性,而是生成新的对象来替换====>shallowRef
shallowReactive 和 shallowRef 是 Vue 3 中的两个 API,用于创建“浅响应式”对象和“浅引用”数据。
1、shallowReactive:它创建了一个浅响应式对象。与 reactive 不同,shallowReactive 只会对对象的第一层属性进行响应式处理,而不会递归地对嵌套属性进行响应式转换。这意味着嵌套属性将保持为普通的 JavaScript 对象,并且在被访问或修改时不会触发更新
2、shallowRef:它创建了一个浅引用数据。与 ref 不同,shallowRef 只会对值进行浅引用处理,而不会递归地对值进行深度引用。这意味着当修改引用对象的属性时,不会触发重新渲染
shallowReactive示例:
用reactive定义的person对象,点击按钮的时候,深层次的对象,job.job1.work可以正常改变
用shallowReactive定义person对象,工作变了按钮其实已经点击了,但是深层次的对象,job.job1.work没有任何改变
shallowRef示例:
用ref定义的简单数据类型
用shallowRef定义的简单数据类型,效果和ref定义的简单数据类型的是一样的
区别在于,用shallowRef定义的对象数据类型,点击按钮不会触发数据改变,那为什么ref定义的对象就可以?因为ref的底层其实还是求助了reactive,变成一个proxy代理对象,也是响应式的。
打印ref和shallowRef定义的对象x,一个是proxy对象,一个是纯对象
2、readonly与shallowReadonly
readonly:让一个响应式数据变为只读的(深只读)
shallowReadonly:让一个响应式数据变为只读的(浅只读)
使用:不希望数据被修改时
readonly 和 shallowReadonly 是 Vue 3 中的两个 API,用于创建只读的响应式对象。
1、readonly:它创建了一个深度只读的响应式对象。与 reactive 不同,readonly
只能对已经存在的响应式对象进行只读包装,而不能进行响应式转换。这意味着无法对只读对象的属性进行修改或删除,并且也无法向只读对象中添加新的属性。
2、shallowReadonly:它创建了一个浅只读的响应式对象。与 readonly 不同,shallowReadonly 只会对对象的第一层属性进行只读包装,而不会递归地对嵌套对象进行只读转换。这意味着嵌套对象仍然可以被修改或删除,但是对其属性的修改将被视为非响应式的
readonly示例:
不允许修改,且控制台有提示,目标源是只读的。这里不是改了没有响应式回显到页面上,而是完全没有改变
shallowReadonly示例:
shallowReadonly只会对对象的第一层属性进行只读包装,而不会递归地对嵌套对象进行只读转换
3、toRaw与markRaw
toRaw:将一个由reactive生成的响应式对象转为普通对象
使用:用于读取响应式对象的普通对象,对这个普通对象的所有操作,不会引起页面更新
markRaw:标记一个对象,使其永远不会再成为响应式对象
使用:
1、有些值不应该设为响应式的,例如复杂的第三方类库等
2、当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能
toRaw 和 markRaw 是 Vue 3 中用于处理响应式对象的工具函数,它们都与 Vue 3 的响应式系统紧密相关。
1、 toRaw 函数用于获取一个响应式对象的原始(非代理)版本。这是因为当我们使用 Vue 3 的响应式系统时,会自动地将对象转换为可观察(observable)的代理对象。而有时候我们需要访问一个对象的原始版本,而不是其代理的响应式版本。通过 toRaw 函数,我们可以轻松地获取一个对象的非响应式副本
2、markRaw 函数则用于标记一个对象,使其永远不会被转换为响应式对象。通过 markRaw 标记的对象不会被观察,也不会触发任何响应式依赖的更新。这在某些情况下很有用,特别是当我们有一些特殊的对象,我们希望它们保持不可变或不受响应追踪时
toRaw 示例:
markRaw 示例:
给person对象定义一个新的属性,点击添加车的时候添加新的属性car
页面刚加载,控制台就给出了提示,无法读取car,因为car没有定义在实例对象身上
因为return的时候,先把person对象通过运算符展开,代码走到这的时候,person身上并没有car,所以模板区获取不到就会提示
所以直接把person对象都返回出去
页面不报错了,如果在addCar方法中添加的属性不想被响应式,如果car是一个异常复杂的对象,不仅提供了name,price,还有其他属性,并且纯展示,不需要修改。如果换数据的话,会通过接口给你新的数据,不需要自己手动改,那这个时候就需要markRaw 了,虽然继续使用reactive响应式也可以,但是响应式辛辛苦苦处理出来的数据,只是拿来纯展示,效率上就有问题了
数据变了,但是person.car已经不再是响应式数据
相关文章:

【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw
假期第六篇,对于基础的知识点,我感觉自己还是很薄弱的。 趁着假期,再去复习一遍 1、shallowReactive与shallowRef shallowReactive:只处理对象最外层属性的响应式(浅响应式) shallowRef:只处理…...

手机建模教程 | 如何从易模App中导出模型?有哪些格式?含贴图吗?
很多小伙伴使用易模App是为了能快速地将已有实物的物体“变成”三维模型后转到自己习惯的3D软件中去编辑,于是,大家都关心模型能否导出,以及导出格式有没有自己想要的? 博雅仔告诉大家,当然可以导出! 在导出…...
数据分析技能点-机器学习优化思想
优化思想,这个听起来极其专业和高端的词汇,其实它无处不在,悄无声息地影响着我们的生活和决策。从寻找最快的上班路线,到决定如何配置投资组合,优化思想都是一个不可或缺的元素。而在机器学习领域,优化思想更是扮演着至关重要的角色。 文章目录 优化的基础优化问题与实际…...

应用架构的演进:亚马逊的微服务实践
当你在亚马逊上购物时,或许不会想到,你看到的这个购物网站,其背后技术架构经历了什么样的变迁与升级。 还记得上世纪 90 年代,那个只卖书的网上书店吗?那时的亚马逊,不过是一个架构简单的网站,所有的功能都堆积在一个庞大的软件堡垒里。随着更多业务的增加、更新和迭代,这个软…...

leetCode 55.跳跃游戏 贪心算法
给你一个非负整数数组 nums ,你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。判断你是否能够到达最后一个下标,如果可以,返回 true ;否则,返回 false 。 示例 1: 输入…...

CF505B Mr. Kitayuta‘s Colorful Graph
Mr. Kitayuta’s Colorful Graph 题面翻译 给出一个 n n n 个点, m m m 条边的无向图,每条边上是有颜色的。有 q q q 组询问 对于第 i i i 组询问,给出点对 u i , v i u_i,v_i ui,vi。求有多少种颜色 c c c 满足:有至…...

c#设计模式-结构型模式 之 组合模式
🚀简介 组合模式又名部分整体模式,是一种 结构型设计模式 ,是用于把一组相似的对象当作一个 单一的对象 。组合模式 依据树形结构来组合对象 ,用来表示部分以及整体层,它可以让你将对象组合成树形结构,并且…...
【Rust日报】2023-09-30 使用Rust做web抓取
CockroachDB 用rust重新实现 嘿,伙计们,我在 Rust 中实现了一个分布式 SQL 数据库。它就像 CockroachDB 和谷歌Google Spanner。告诉我你的想法。 注意: 这不是生产级别的数据库,这是一个以学习为目的的项目。有许多特性,但是缺少…...

【密评】商用密码应用安全性评估从业人员考核题库(三)
商用密码应用安全性评估从业人员考核题库(三) 国密局给的参考题库5000道只是基础题,后续更新完5000还会继续更其他高质量题库,持续学习,共同进步。 501 多项选择题 《个人信息保护法》要求个人信息处理者应当采取哪些…...
MySQL进阶_查询优化和索引优化
文章目录 第一节、索引失效案例1.1 数据准备1.2 全值匹配我最爱1.3 最佳左前缀法则 第一节、索引失效案例 可以从以下维度对数据库进行优化: 索引失效、没有充分利用到索引–索引建立关联查询太多JOIN (设计缺陷或不得已的需求)–SQL优化服务器调优及各个参数设置…...
Hadoop2复安装过程详细步骤
1、在vmware中更改了虚拟机的网络类型,--->NAT方式,(虚拟交换机的ip可以从vmvare的edit-->vertual network editor看到) 2、根据这个交换机(网关)的地址,来设置我们的客户端windows7的ip&…...
【Java-LangChain:面向开发者的提示工程-7】文本扩展
第七章 文本扩展 扩展是将短文本(例如一组说明或主题列表)输入到大型语言模型中,让模型生成更长的文本(例如基于某个主题的电子邮件或论文)。这种应用是一把双刃剑,好处例如将大型语言模型用作头脑风暴的伙…...

竞赛 基于设深度学习的人脸性别年龄识别系统
文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 基于深度学习机器视觉的…...

从技能需求到就业前景,了解前端和后端开发的优缺点和个人选择
文章目录 每日一句正能量一、引言前端开发后端开发 二、两者的对比分析三、技能转换和跨领域工作四:介绍全栈开发后记 每日一句正能量 命运决定的不是你的人生,能决定你人生的只有自己。 一、引言 前端和后端是Web开发中两个不可或缺的领域。前端开发主…...

Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法
Flutter笔记 AnimationMean、AnimationMax 和 AnimationMin三个类的用法 作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 :291148484163.com 本文地址:https://blog.csdn.net/qq_28550263/…...

华为云云耀云服务器L实例评测|云耀云服务器L实例部署Gogs服务器
华为云云耀云服务器L实例评测|云耀云服务器L实例部署Gogs服务器 一、云耀云服务器L实例介绍1.1 云耀云服务器L实例简介1.2 云耀云服务器L实例特点 二、Gogs介绍2.1 Gogs简介2.2 Gogs特点 三、本次实践介绍3.1 本次实践简介3.2 本次环境规划 四、远程登录华为云云耀云…...

操作系统--分页存储管理
一、概念介绍 分页存储:一是分内存地址,二是分逻辑地址。 1.分内存地址 将内存空间分为一个个大小相等的分区。比如,每个分区4KB。 每个分区就是一个“页框”,每个页框有个编号,即“页框号”,“页框号”…...

【算法练习Day10】有效的括号删除字符串中的所有相邻重复项逆波兰表达式求值
📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:练题 🎯长路漫漫浩浩,万事皆有期待 文章目录 有效的括号删除字符串中的所…...
10.1 校招 实习 内推 面经
绿泡*泡: neituijunsir 交流裙 ,内推/实习/校招汇总表格 1、自动驾驶一周资讯 - 苹果汽车项目泡汤?纵目科技IPO终止,腾讯与岚图汽车合作升级,158亿元现金收购比亚迪“史上最大”并购案 自动驾驶一周资讯 - 苹果汽车…...
Redis中Set类型的操作
Set的结构与list相似,但底层存储结构是hashtable,因此它的值是唯一的,同时添加的顺序与保存的顺序并不一致。每一个Set类型的key中可以存储2^32-1个元素。 一、应用场景 1、保存用户的收藏 在小说网站中保存用户的收藏,收藏 的小…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...