【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过的数据,修改数据时,是不允许修改的,也就是连数据都不能修改。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

闭环控制系统手自动策略(车辆定速巡航应用)

闭环控制系统的手自动策略并不会完全一样,不同的行业,基于不同的规范和安全考虑给出的手自动策略是不一样的,这里我们介绍汽车行业定速巡航应用。 PID闭环控制系统手自动切换的相关文章,还可以查看下面链接: 无扰切换…

2013-2022年上市公司迪博内部控制指数、内部控制分项指数数据

2013-2022年上市公司迪博内部控制指数、分项指数数据 1、时间:2013-2022年 2、范围:上市公司 3、指标:证券代码、证券简称、辖区、证监会行业、申万行业、内部控制指数、战略层级指数、经营层级指数、报告可靠指数、合法合规指数、资产安全…

基于Locust实现MQTT协议服务的压测脚本

一、背景简介 业务背景大概介绍一下,就是按照国标规定,车辆需要上传一些指定的数据到ZF的指定平台,同时车辆也会把数据传到企业云端服务上,于是乎就产生了一些性能需求。 目前我们只是先简单的进行了一个性能场景的测试&#xf…

C++进阶(十五)C++的类型转换

📘北尘_:个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上,不忘来时的初心 文章目录 一、C语言中的类型转换二、为什么C需要四种类型转换三、C强制类型转换1、static_cast2、reint…

中国电子学会2019年12月份青少年软件编程Scratch图形化等级考试试卷三级真题(选择题、判断题)

一、单选题(共 25 题,每题 2 分,共 50 分) 1.怎样修改图章的颜色?( ) A. 只需要一个数字来设置颜色 B. 设置 RGB 的值 C. 在画笔中设置颜色、饱和度、亮度 D. 在外观中设置或修改角色颜色特效 2.以下程序的执…

2024年Midjourney 付费订阅流程 | Midjourney 各版本介绍,使用虚拟信用卡支付买Midjourney流程指南

1.Midjourney介绍 Midjourney 是一款备受欢迎的人工智能生成图像工具,它可以通过输入文字描述,自动生成精美的图像。与许多其他图像生成工具不同,Midjourney 不需要安装任何软件,也不受个人电脑性能的限制,因为它运行…

计算机毕业设计SSM基于的冷链食品物流信息管理系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: vue mybatis Maven mysql5.7或8.0等等组成,B…

微信小程序(四十二)wechat-http拦截器

注释很详细,直接上代码 上一篇 新增内容: 1.wechat-http请求的封装 2.wechat-http请求的拦截器的用法演示 源码: utils/http.js import http from "wechat-http"//设置全局默认请求地址 http.baseURL "https://live-api.ith…

【学网攻】 第(26)节 -- 综合网络实验一

系列文章目录 目录 系列文章目录 文章目录 前言 一、综合实验 二、实验 1.引入 实验目标 实验设备 实验拓扑图 实验配置 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学网攻】 第(4)节…

C++ //练习 6.5 编写一个函数输出其实参的绝对值。

C Primer(第5版) 练习 6.5 练习 6.5 编写一个函数输出其实参的绝对值。 环境:Linux Ubuntu(云服务器) 工具:vim 代码块 /*************************************************************************&…

linux优化空间完全卸载mysql——centos7.9

文章目录 ⭐前言⭐linux命令使用💖 基础命令💖 内存优化💖 完全删除mysql ⭐结束 ⭐前言 大家好,我是yma16,本文分享 linux优化空间&完全卸载mysql——centos7.9。 linux内存分配 在Linux中,内存分配是…

安装faiss环境教程

文章目录 打开环境安装faiss环境检查已安装的环境切换环境至faiss 打开环境 source activate # 打开环境安装faiss环境 conda create -n faiss_env # 安装faiss环境检查已安装的环境 conda info --envs # 检查已安装的环境切换环境至faiss conda a…

【数据结构】13:表达式转换(中缀表达式转成后缀表达式)

思想: 从头到尾依次读取中缀表达式里的每个对象,对不同对象按照不同的情况处理。 如果遇到空格,跳过如果遇到运算数字,直接输出如果遇到左括号,压栈如果遇到右括号,表示括号里的中缀表达式已经扫描完毕&a…

AlmaLinux右键菜单(基于GNOME桌面)

文章目录 前言前提说明在文件上右键在文件夹上右键 前言 在使用VSCode的过程中,AlmaLinux没能像Windows一样在右键菜单上显示打开方式,所以找了一下解决方案,罗列出来 前提说明 虽然说无论是media还是StackOverflow都推荐使用这条命令&…

Impala-架构与设计

架构与设计 一、背景和起源二、框架概述1.设计特点2.框架优点3.框架限制 三、架构图1.Impala Daemon2.Statestore3.Catalog 四、Impala查询流程1.发起查询2.生成执行计划3.分配任务4.交换中间数据5.汇集结果6.返回结果 总结参考链接 一、背景和起源 现有的大数据查询分析工具H…

数据结构:并查集讲解

并查集 1.并查集原理2.并查集实现3.并查集应用4.并查集的路径压缩 1.并查集原理 在一些应用问题中,需要将n个不同的元素划分成一些不相交的集合。开始时,每个元素自成一个单元素集合,然后按一定的规律将归于同一组元素的集合合并。在此过程中…

华为 huawei 交换机 接口 MAC 地址学习限制接入用户数量 配置示例

目录 组网需求: 配置思路: 操作步骤: 配置文件: 组网需求: 如 图 2-14 所示,用户网络 1 和用户网络 2 通过 LSW 与 Switch 相连, Switch 连接 LSW 的接口为GE0/0/1 。用户网络 1 和用户网络 2 分别属于 VLAN10 和 V…

没更新的日子也在努力呀,布局2024!

文章目录 ⭐ 没更新的日子也在努力呀⭐ 近期的一个状态 - 已圆满⭐ 又到了2024的许愿时间了⭐ 开发者要如何去 "创富" ⭐ 没更新的日子也在努力呀 感觉很久没有更新视频了,好吧,其实真的很久没有更新短视频了。最近的一两个月真的太忙了&#…

shell脚本之文件处理命令及字符切片处理

目录 一、文件处理工具 1、tr命令 1.1 转换字符 1.2 压缩字符及删除字符 2、seq命令 3、cut命令 ​4、tac命令 5、rev命令 6、sort命令 ​​​​​7、uniq命令 ​8、echo命令 9、date命令 二、字符串切片处理 1、取字符串的长度 2、跳过字符串最前边的字符 3、…

腾讯云4核8G服务器多少钱?轻量和CVM报价2024新版

腾讯云4核8G服务器S5和轻量应用服务器优惠价格表,轻量应用服务器和CVM云服务器均有活动,云服务器CVM标准型S5实例4核8G配置价格15个月1437.3元,5年6490.44元,标准型SA2服务器1444.8元一年,轻量应用服务器4核8G12M带宽一…