【vue3学习笔记】shallowReactive与shallowRef;readOnly与shallowReadOnly;toRaw与markRaw

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

课程 P158节 《shallowReactive与shallowRef》笔记:

在这里插入图片描述

reactive()与shallowReactive():reactive()处理后的数据是响应式的,对象内嵌套的深层结构全部是响应式的。shallowReactive()处理后的数据是浅层响应式的,即只有第一层的数据是响应式的,嵌套结果,第二层都不是响应式。shallowReactive()只考虑对象类型的第一层的响应式,里面的不考虑。

ref()与shallowRef():传入基本类型时,ref()与shallowRef()没有区别;传入对象类型时,ref()会将对象变成响应式,包括对象中的嵌套层次;shallowRef()则不会去处理对象类型的响应式

分别将用ref()与shallowRef()定义的数据打印出来观察,会发现使用shallowRef()定义的数据的value值只是一个普通的对象:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意:使用shallowRef()定义的对象数据,对象的第一层与深层都不会是响应式的,比如:

在这里插入图片描述

此时修改姓名、年龄、薪水都不会起作用:

在这里插入图片描述

但 p对应的对象整体是响应式的,也就是说如果将 p重新赋值另一个对象,p是响应式的,如下图,当点击替换时,是可以奏效的:

在这里插入图片描述

在这里插入图片描述

课程 P159节 《readOnly与shallowReadOnly》笔记:

在这里插入图片描述
经过 readonly 的作用,person就被包装成了一个只读的对象,此时修改其属性,不会产生作用,数据根本改不了,同时控制台会产生警告:
在这里插入图片描述

在这里插入图片描述

readonly的一个使用场景:假如数据是在别人创建的组件中定义的,传递给你使用时,不希望你修改数据,此时就可以将不希望被修改的数据使用 readonly 加工,之后就不用担心该数据被误修改了。

课程 P160节 《toRaw与markRaw》笔记

在这里插入图片描述

toRaw:把响应式数据还原为原始数据:
注意:toRaw只能处理reactive缔造的响应式对象,被其处理过的对象会还原为原始对象,没有响应性,即修改其数据,页面不会变化;
在这里插入图片描述
在这里插入图片描述
markRaw:当一个对象嵌套层次非常多,非常复杂且页面只需要用其做展示,不需要修改其数据时,可以使用markRaw。如下场景:person是一个响应式对象数据,addCar方法为其添加一个car属性,假设car属性的值是一个层级非常复杂的对象,此时如果直接person.car={}的方式添加,由于person是响应式数据,给其追加属性也会是响应式的,如果追加的属性层级很深且后续其并不需要响应式,直接追加就会有性能上的问题。使用markRaw来追加这个属性,就可以实现追加的属性不是响应式的

在这里插入图片描述
markRaw与readonly的区别:markRaw处理过的数据,修改数据时,数据是可以修改的,但页面不会做响应式;readonly过的数据,修改数据时,是不允许修改的,也就是连数据都不能修改。

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【C语言期末】商品管理系统

本文资源:https://download.csdn.net/download/weixin_47040861/88820155 1.题目要求 商品管理系统 商品信息包括:包括编号、类别、名称、价格、折扣比例、生产时间 、存货数量等要求:1、信息首先保存在文件中,然后打开文件进行…

Linux操作系统基础(三):虚拟机与Linux系统安装

文章目录 虚拟机与Linux系统安装 一、系统的安装方式 二、虚拟机概念 三、虚拟机的安装 四、Linux系统安装 1、解压人工智能虚拟机 2、找到解压目录中的node1.vmx 3、启动操作系统 虚拟机与Linux系统安装 一、系统的安装方式 Linux操作系统也有两种安装方式&#xf…

以“防方视角”观社工钓鱼攻击

为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 01 案例概述02 攻击路径03 防方思路 01 案例概述 这篇文章来自奇安信攻防社区“小艾”,记录的某师傅通过社工钓鱼诱导企业员工点击含有木马的文件,侵入系统取得了终端控制权。接…

MyBatis之环境搭建以及实现增删改查

MyBatis之环境搭建以及实现增删改查 前言准备工作1.保证数据库已启动2. 创建Person表 MyBatis开发环境搭建1.下载MyBatis jar包2.下载MySQL的JDBC驱动3.新建Java工程(Java8),导入MyBatis的jar包以及JDBC驱动 实现步骤1. 创建Peron类2. 编写Ma…

c语言--指针数组(详解)

目录 一、什么是指针数组?二、指针数组模拟二维数组 一、什么是指针数组? 指针数组是指针还是数组? 我们类比一下,整型数组,是存放整型的数组,字符数组是存放字符的数组。 那指针数组呢?是存放…

SpringCloud-Eureka原理分析

Eureka是Netflix开源的一款用于实现服务注册与发现的工具。在微服务架构中,服务的动态注册和发现是必不可少的组成部分,而Eureka正是为了解决这一问题而诞生的。 一、为何需要Eureka 在微服务架构中,服务之间的协同合作和高效通信是至关重要…

【性能最佳实践】跟着我们一起玩转查询模式与性能分析!

使用最新的驱动程序 MongoDB的官方驱动程序是由负责核心数据库开发的同一个专业团队打造的。这些驱动程序的更新通常比数据库本身更频繁,大概每几个月就会发布一次新版本。我们建议您尽可能使用最新版本的驱动程序,并在您使用的编程语言中安装可用的本地…

蓝桥杯Web应用开发-CSS3 新特性【练习三:文本阴影】

文本阴影 text-shadow 属性 给文本内容添加阴影的效果。 文本阴影的语法格式如下: text-shadow: x-offset y-offset blur color;• x-offset 是沿 x 轴方向的偏移距离,允许负值,必须参数。 • y-offset 是沿 y 轴方向的偏移距离&#xff0c…

OpenMLDB 作为中国唯一的特征平台产品入选 2023 Gartner 研究报告

在国际权威咨询与研究机构 Gartner 发布的重要研究报告《The Logical Feature Store: Data Management for Machine Learning》(《逻辑特征存储:机器学习的数据管理》,下文简称报告)中,OpenMLDB 荣幸作为中国唯一的特征平台代表产…

国产信创领跑者:暴雨信息的创新与实践

随着数字化转型的加速推进,信创产业作为数字经济发展的重要支柱,正日益受到社会各界的广泛关注。在这个大背景下,暴雨信息积极响应国家号召,全面适配国产化,推动信创产业的技术创新和应用拓展,成为了行业的…

Mybatis- plus 基本使用

目录 一. 引入依赖 二.定义Mapper 三.常见注解 3.1TableName 3.2.TableId 3.3TableField 3.4常见配置 一. 引入依赖 由于这个starter包含对mybatis的自动装配&#xff0c;因此完全可以替换掉Mybatis的starter。 <dependency><groupId>com.baomidou</gr…

前端JavaScript篇之数组的遍历方法有哪些?forEach和map方法有什么区别?

目录 数组的遍历方法有哪些&#xff1f;forEach和map方法有什么区别&#xff1f;forEach()map()filter()for…ofevery() 和 some()find() 和 findIndex()reduce() 和 reduceRight()forEach和map方法有什么区别总结 数组的遍历方法有哪些&#xff1f;forEach和map方法有什么区别…

U3D记录之FBX纹理丢失问题

今天费老大劲从blender建了个模型&#xff0c;然后导出进去unity 发现贴图丢失 上网查了一下 首先blender导出要改设置 这个path mode要copy 然后unity加载纹理也要改设置 这里这个模型的纹理load要改成external那个模式 然后就有了&#xff0c;另外这个导出还有好多选项可…

Spring如何扫描自定义的注解?

目录 一、Spring框架介绍 二、什么是自定义注解 三、如何扫描自定义的注解 一、Spring框架介绍 Spring框架是一个开源的Java应用程序框架&#xff0c;它提供了一种全面的编程和配置模型&#xff0c;用于构建现代化的企业级应用程序。Spring框架的核心原则是依赖注入&#x…

使用Softing edgeConnector模块将云轻松连接到Siemens PLC

一 工业边缘的连接解决方案 云服务提供商 (CSP) 引入了服务和功能&#xff0c;以简化基于云的工业物联网解决方案的实施。Azure Industrial IoT Platform或AWS IoT SiteWise支持标准协议和接口&#xff0c;例如OPC UA或MQTT。但是&#xff0c;如果您希望在典型的旧改项目中连接…

HttpServletResponse接口用于表示状态代码的字段

1. HttpServletResponse接口用于表示状态代码的字段 您已学习了状态代码以及可用于从servlet向客户机发送状态代码的HttpServletResponse接口的字段。下表列出了HttpServletResponse接口表示状态代码的一些其他字段。 字段状态代码描述SC_HTTP_VERSION_NOT_SUPPORTED505服务器…

Midjourney提示词风格调试测评

在Midjourney中提示词及风格参数的变化无疑会对最终的作品产生影响&#xff0c;那影响具体有多大&#xff1f;今天我我们将通过一个示例进行探究。 示例提示词&#xff1a; 计算机代码海洋中的黄色折纸船&#xff08;图像下方&#xff09;风格参考:金色长发的女人&#xff0c…

222. 完全二叉树的节点个数 - 力扣(LeetCode)

题目描述 给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都集中在该层最左边的若干…

20240207-不要用摸鱼打发时间

20240207-不要用摸鱼打发时间 今天是农历年倒数第三天&#xff0c;很多人都已经回家过年了。我有其他出行计划&#xff0c;所以今年没有回家。其实这一点也有违背自己每年都要回家的原则&#xff0c;但相比往年&#xff0c;真的是更愿意出去不愿意回家了。 想家吗&#xff0c;…

FPGA_简单工程_无源蜂鸣器驱动实验

一 理论 蜂鸣器按其结构可分为电磁式蜂鸣器和压电式蜂鸣器2中类型&#xff0c;按其有无信号源&#xff0c;分为有源蜂鸣器和无源蜂鸣器。 有源蜂鸣器&#xff0c;内部装有集成电路&#xff0c;不需要音频驱动电路&#xff0c;就直接能发出声响&#xff0c;而无源蜂鸣器&#…