【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.hqwc.cn/news/465432.html

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

相关文章

算法竞赛进阶指南——基本算法(倍增)

ST表 可以求区间最大、最小、gcd、lcm&#xff0c;符合 f(a, a) a都可以 求区间最值&#xff0c;一个区间划分成两段 f[i][j]: 从i开始&#xff0c;长度为2^j的区间最值 #include<iostream> #include<cmath> using namespace std; const int N 1e6 10; int n,…

fast.ai 机器学习笔记(四)

机器学习 1&#xff1a;第 11 课 原文&#xff1a;medium.com/hiromi_suenaga/machine-learning-1-lesson-11-7564c3c18bbb 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 来自机器学习课程的个人笔记。随着我继续复习课程以“真正”理解它&#xff0c;这些笔记将继续…

【MySQL】——数值函数的学习

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-Z1fAnfrxGD7I5gqp {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

假期作业 8

1、若有以下说明语句&#xff1a;int a[12]{1,2,3,4,5,6,7,8,9,10,11,12};char c’a’,d,g;则数值为4的表达式是&#xff08; B&#xff09;。 A&#xff09;a[g-c] B&#xff09;a[4] C&#xff09;a[‘d’-‘c’] D&#xff09;a[‘d’-c] 2、假…

书生谱语-全链条开发工具

书生谱语全链条开发体系 包含&#xff1a;数据、模型预训练、模型微调、模型量化部署、模型测评、模型场景应用全链路开发体系 github链接 通用大模型 国内外大语言模型快速发展&#xff0c;涌现了大量的大语言模型以及一批创业公司 深度学习模型的发展 大模型利用多模态优势…

【UE 游戏编程基础知识】

目录 0 引言1 基础知识1.1 拓展&#xff1a;3D数学和计算机图形学的关系 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;UE虚幻引擎专栏&#x1f4a5; 标题&#xff1a;【UE 游戏编程基础知识】❣️ 寄语&#xff1a;书到用时方恨少&#xff0c;事…

【QT+QGIS跨平台编译】之三十六:【RasterLite2+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、RasterLite2介绍二、文件下载三、文件分析四、pro文件五、编译实践一、RasterLite2介绍 RasterLite2是一个开源的轻量级栅格数据库,可以用于存储和管理各种类型的栅格数据,包括卫星遥感图像、数字高程模型等。 与传统的GIS数据存储方式不同,RasterLite2采用基…

Matlab图像处理——图像边缘检测方法(算子)

1.edge函数语法 BW edge(I) BW edge(I,method) BW edge(I,method,threshold) BW edge(I,method,threshold,direction) BW edge(___,"nothinning") BW edge(I,method,threshold,sigma) BW edge(I,method,threshold,h) BW edge(I) 返回二值图像 BW&#xff0…

MMKV:轻巧高效的跨平台键值存储解决方案

MMKV&#xff1a;轻巧高效的跨平台键值存储解决方案 引言 在移动应用的开发中&#xff0c;数据存储是一个至关重要的环节。随着移动应用的普及和功能的增多&#xff0c;应用需要存储和管理各种类型的数据&#xff0c;包括用户配置信息、缓存数据、临时状态等。传统的数据存储…

C#计算矩形面积:通过定义结构 vs 通过继承类

目录 一、涉及到的知识点 1.结构 2.结构和类的区别 3.继承 4.使用类继承提高程序的开发效率 5.属性 &#xff08;1&#xff09;属性定义 &#xff08;2&#xff09;get访问器 &#xff08;3&#xff09;set访问器 6. 属性和字段的区别 二、实例&#xff1a;通过定义…

创建菜单与游戏页面

bootstrap地址 Bootstrap v5 中文文档 Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 前端工具库。 | Bootstrap 中文网 (bootcss.com) 创建导航栏组件 web--src--components--NavBar.vue <!-- html --> <template><nav class"navbar navbar-expand-lg n…

项目学习记录

项目开发 创建项目环境配置关联git新增模块项目启动打印地址日志使用httpclient进行idea内部控制台测试使用AOP拦截器打印日志 创建项目 创建一个空项目&#xff0c;并勾选下面选项 然后进入pom.xml中修改项目配置 根据这个链接选则&#xff0c;修改项目的支持版本 链接&#…