【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://www.mzph.cn/news/681973.shtml

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

相关文章

Javaweb之SpringBootWeb案例之propagation属性案例演示的详细解析

案例 接下来我们就通过一个案例来演示下事务传播行为propagation属性的使用。 需求:解散部门时需要记录操作日志 由于解散部门是一个非常重要而且非常危险的操作,所以在业务当中要求每一次执行解散部门的操作都需要留下痕迹,就是要记录操作…

【数据结构】链表OJ面试题4《返回链表入环的第一个结点》(题库+解析)

1.前言 前五题在这http://t.csdnimg.cn/UeggB 后三题在这http://t.csdnimg.cn/gbohQ 给定一个链表,判断链表中是否有环。http://t.csdnimg.cn/Rcdyc 记录每天的刷题,继续坚持! 2.OJ题目训练 10. 给定一个链表,返回链表开始…

golang集成sentry: go-redis

网上没有找到go-redis集成sentry的库, 所以我简单实现了一个 代码: https://github.com/Shujie-Tan/go-redis-sentry 使用方法: import (redis_sentry "github.com/Shujie-Tan/go-redis-sentry" ) rdb : redis.NewClient(&re…

如何一键启动、停止或重启运行在服务器内的幻兽帕鲁游戏服务进程?

如果你是用腾讯云轻量应用服务器一键部署的幻兽帕鲁服务器,那么可以在面板一键启动、停止或重启运行在服务器内的幻兽帕鲁游戏服务进程(注意并非对服务器整机进行操作),无需手动在服务器内部运行命令。 详细教程地址:h…

Xubuntu16.04系统中修改系统语言和系统时间

1.修改系统语言 问题:下图显示系统语言不对 查看系统中可用的所有区域设置的命令 locale -a修改/etc/default/locale文件 修改后如下: # File generated by update-locale LANG"en_US.UTF-8" LANGUAGE"en_US:en"LANG"en_US…

高中数学:不等式

一、性质 1、同向可加性 2、同向同正可乘 3、正数乘方开方(n∈Z,n≥2) 常见题型 1、比较大小 分式比较大小,先去分母作差法比较大小带根号的无理数比较大小,直接两边开方因式分解(较难) 2、…

Java17之使用Lambda表达式对对象集合中指定的字段进行排序

Java17之使用Lambda表达式对对象集合中指定的字段进行排序 文章目录 Java17之使用Lambda表达式对对象集合中指定的字段进行排序1. 集合对象排序1. Java实体类2. 正序排序3.倒序排序 1. 集合对象排序 Java8起可用 List 的 sort 方法进行排序,形参为函数式接口Compara…

C#利用接口实现选择不同的语种

目录 一、涉及到的知识点 1.接口定义 2.接口具有的特征 3.接口通过类继承来实现 4.有效使用接口进行组件编程 5.Encoding.GetBytes(String)方法 (1)检查给定字符串中是否包含中文字符 (2)编码和还原前后 6.Encoding.GetS…

netstat命令

netstat 是一个计算机网络命令行工具,用于显示网络连接、路由表和网络接口等网络相关信息。netstat 命令可以在各种操作系统上使用,包括 Windows、Linux 和 macOS 等。 在使用 netstat 命令时,可以提供不同的选项来显示不同类型的网络信息。…

猫头虎分享已解决Bug || Invariant Violation in React: Element Type is Invalid ‍

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

【Web】NSSCTF Round#18 Basic个人wp(未完待续)

①门酱想玩什么呢&#xff1f; 先试一下随便给个链接 不能访问远程链接&#xff0c;结合评论区功能&#xff0c;不难联想到xss&#xff0c;只要给个评论区链接让门酱访问就可 我们研究下评论区 从评论区知道&#xff0c;要让门酱玩元梦之星&#xff0c;考虑直接 <script&…

Vuex 模块的详解

Vuex 模块是将 store 分割成多个模块的一种方式&#xff0c;每个模块都有自己的状态、mutations、actions 和 getters。这有助于更好地组织和管理应用程序的状态。 创建模块&#xff1a; 首先&#xff0c;需要创建一个模块。可以在 store 中定义一个新的模块对象&#xff0c…

在git bash中可以提交代码,但是在android studio中提交代码就会报错

出现这个错误 error: unable to read askpass response from ‘C:\Users…\AppData\Local\Google\AndroidStudio2021.2\tmp\intellij-git-askpass-local.sh’ bash: line 1: /dev/tty: No such device or address 勾选git的use credential helper选项再提交就行了

ITK 图像分割(一):阈值ThresholdImageFilter

效果&#xff1a; 1、itkThresholdImageFilter 该类的主要功能是通过设置低阈值、高阈值或介于高低阈值之间&#xff0c;则将图像值输出为用户指定的值。 如果图像值低于、高于或介于设置的阈值之间&#xff0c;该类就将图像值设置为用户指定的“外部”值&#xff08;默认情况…

【电路笔记】-并联电感

并联电感 文章目录 并联电感1、概述2、并联电感示例13、互耦并联电感器4、并联电感示例25、并联电感示例36、总结当电感器的两个端子分别连接到另一个或多个电感器的每个端子时,电感器被称为并联连接在一起。 1、概述 所有并联电感器上的压降将是相同的。 然后,并联的电感器…

如何写好一个简历

如何编写求职简历 论Java程序员求职中简历的重要性 好简历的作用 在求职过程中&#xff0c;一份好的简历是非常重要的&#xff0c;它甚至可以直接决定能否被面试官认可。一份出色或者说是成功的个人简历&#xff0c;最根本的作用是能让看这份简历的人产生一定要见你的强烈愿…

【lesson53】线程控制

文章目录 线程控制 线程控制 线程创建 代码&#xff1a; 运行代码&#xff1a; 强调一点&#xff0c;线程和进程不一样&#xff0c;进程有父进程的概念&#xff0c;但在线程组里面&#xff0c;所有的线程都是对等关系。 错误检查: 传统的一些函数是&#xff0c;成功返回0&…

Java基于 SpringBoot 的高校校园点餐系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

01.数据结构篇-链表

1.找出两个链表的交点 160. Intersection of Two Linked Lists (Easy) Leetcode / 力扣 例如以下示例中 A 和 B 两个链表相交于 c1&#xff1a; A: a1 → a2↘c1 → c2 → c3↗ B: b1 → b2 → b3 但是不会出现以下相交的情况&#xff0c;因为每个节点只有一个…

代码随想录算法训练营DAY17 | 二叉树 (4)

一、LeetCode 110 平衡二叉树 题目链接: 110.平衡二叉树https://leetcode.cn/problems/balanced-binary-tree/ 思路&#xff1a;设置深度计算函数&#xff0c;进行递归处理。 class Solution {public boolean isBalanced(TreeNode root) {if(root null){return true;}boolean…