第六节:带你全面理解vue3 浅层响应式API: shallowRef, shallowReactive, shallowReadonly

前言

前面两章,给大家讲解了vue3ref, reactive,readonly创建响应式数据的API, 以及常用的计算属性computed, 侦听器watch,watchEffect的使用

其中reactive, ref, readonly创建的响应式数据都是深层响应.

而本章主要给大家讲解以上三个API 对应的创建浅层响应式数据的 API, 即shallowRef, shallowReactive, shallowReadonly

1. shallowRef

shallowRefref 浅层作用形式。其实就是浅层响应式

shalloRef的使用方式和ref()完全相同, 不同的只是vue对数据响应式处理的不同:

  • ref创建的数据, 如果有深层, 比如参数是一个对象, 对象的属性就是深层, 参数对象会被vue通过reactive处理为深层响应
  • shallowRef创建数据, 只有顶层的value属性具有响应性, 深层的数据不具有响应性, 会原因返回, 即vue不会递归的将深层数据通过reactive处理, 而是原样存储和暴露.

1.1. 类型

我们先看一下shallowRefAPI 的类型签名, 其签名如下:

function shallowRef<T>(value: T): ShallowRef<T>interface ShallowRef<T> {value: T
}

通过签名可以简单的看出, shallowRefAPI 接收一个参数, 返回一个具有value属性的对象, 且value属性的类型和参数类型相同.

1.2. ref 和shallowRef 处理原始数据类型

接下会通过示例带大家看一下refshallowRef 在处理原始数据类型的有什么不同.

示例代码:

<template><div><h3>shallowRef</h3><div>{{ count }}</div><div>{{ count2 }}</div><button @click="change">修改数据源</button></div>
</template><script lang="ts">
import { defineComponent, ref, shallowRef } from 'vue'export default defineComponent({setup() {const count = ref(0)const count2 = shallowRef(0)// 控制台输出 ref, shallowRef 创建的数据consollog("count", count);console.log("count2", count2);// 修改数据const change = () => {// count.value++count2.value++}return { count, count2, change }}
})
</script>

控制台输出结果

img

通过代码的运行结果, 你可以看出,

在参数为基本数据类型的情况下, refshallowRef创建的响应式数据在使用上完全一样, value属性都具有响应性

通过控制台输出结果, 你会发现refshallowRef创建的ref对象极度相似,
如果你阅读过源码, 你就会明白, ref, shallowRef返回对象是通过同一个类实例化的对象.因此两个实例对象具有相同的属性. 但是有一个属性__v_isShallow属性值不同, 因为vue通过这个属性来区分是ref还是shallowRef创建的对象.

这里不对源码实现做过多阐述, 如果你对源码感兴趣, 可以关注我的vue3源码专栏


1.3. ref 和shallowRef 处理深层对象

refshallowRef 在处理深层对象就会有所不同:

  • ref函数在处理深层对象时, 深层对象会被vue自动调用reactive包裹成响应式数据,
  • shallowRef函数在处理深层对象时, vue不同将深层对象包裹为响应式对象, 也就是说shallowRef只有.value属性值才具有响应性, 深层对象不具有响应性

示例:

<template><div><h3>shallowRef</h3><div>{{ count }}</div><div>{{ count2 }}</div><button @click="change">修改数据源</button></div>
</template><script lang="ts">
import { defineComponent, ref, shallowRef } from 'vue'export default defineComponent({setup() {const count = ref({ count: 0 })const count2 = shallowRef({ count: 0 })// 控制输出 ref, shallowRef 对于参数为对象时创建的ref 对象console.log('count', count)console.log('count2', count2)// 修改数据const change = () => {// count.value.count++// 不会触发响应式// count2.value.count++// count2 是shallowRef数据// shallowRef 数据只有通过.value 整体修改时才会触发响应式count2.value = { count: 3 }}return { count, count2, change }}
})
</script>

控制台输出:

img

通过控制台输出ref, shallowRef 创建的响应数据, 以及示例的运行结果, 会发现:

  • shallowRef在参数为深层对象时, 创建的ref数据, value值就是参数原对象, 不具有响应性
  • refvalue属性值, 是vue调用reactive函数包裹成的Proxy代理对象, 即响应式数据

因此, 你可以理解shallowRefref 浅层响应式的API, 只有通过.value修改数据才会触发响应式, 深层对象没有通过reactive包裹, 因此深层操作数据不具有响应式

shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。


2. shallowReactive

shallowRefref关系相似,

shallowReactivereactive浅层作用形式。就是创建具有浅层响应性的数据


2.1. shallowReactive 类型

首先,我们先看一下shallowReactive类型签名, 签名如下:

function shallowReactive<T extends object>(target: T): T

通过签名可以看出, shallowReactive函数接收一个对象作为参数, 返回类型与参数类型相同

2.2. shallowReactive 浅层响应式

reactive() 不同,shallowReactive创建响应对象没有深层级的转换:一个浅层响应式对象里只有根级别的属性是响应式的, 深层对象不会被vue自动包装为响应对象.

示例:

<template><div><h3>shallowReactive</h3><div>{{ user }}</div><div>{{ user2 }}</div><button @click="change">修改数据源</button></div>
</template><script lang="ts">
import { defineComponent, reactive, shallowReactive } from 'vue'export default defineComponent({setup() {const user = reactive({ name: '张三', age: 18, friend: { name: '李四' } })const user2 = shallowReactive({ name: '张三', age: 18, friend: { name: '李四' } })// 控制台输出reactive, shallowReactive 创建的深层对象console.log("reactive friend", user.friend);console.log("shallowReactive friend", user2.friend);// 修改数据const change = () => {// 1. reactive, shallowReactive 在处理第一层对象属性时// 都会触发响应式// user.name = "王五"  // 修改 reactive// user2.name = "王五"  // 修改 shallowReactive// 2. 操作深度属性,shallowReactive 不会触发响应性// user.friend.name = '王五'  // 修改 reactiveuser2.friend.name = '王五'  // 修改 shallowReactive  不触发响应式}return { user, user2, change }}
})
</script>

控制台输出结果:

img

通过控制台输出结果, 你应该已经看出:

  • reactive创建的响应数据(代理对象) 深层对象也会自动的调用reactive函数, 创建为响应数据
  • shallowReactive创建浅层响应数据, 其深层对象就是原样的不同对象, 不具有响应性.

运行结果也可以看出, 修改shallowReactive深层对象的数据, 页面是不会有任何变化的.因为不具有响应性.

2.3. shallowReactive 深层ref 数据不会自动解包

shallowReactive()函数创建一个浅层响应式对象里只有根级别的属性是响应式的。

也可以说shallowReactive()函数创建的数据是非深度监听, 只会包装第一个对象, 这也就意味着深层的ref数据不会被自动解包.

因为shallowReactive 深层数据的存储是原样存储, 不会包裹为深度响应式,

示例:

<template><div><h3>shallowReactive</h3><div>{{ user }}</div><div>{{ user2 }}</div><button @click="change">修改数据源</button></div>
</template><script lang="ts">
import { defineComponent, reactive, ref, shallowReactive } from 'vue'export default defineComponent({setup() {const count = ref(10)const user = reactive({ name: '张三', age: 18, count })const count2 = ref(20)const user2 = shallowReactive({ name: '张三', age: 18, count: count2 })// 修改数据const change = () => {// 1. reactive 操作深层ref 数据时,自动解包// 此时修改user.count 数据时不用添加.value// user.count = 20  // 修改 reactive// 2. shallowReactive 操作深层ref 数据时,不会自动解包// 此时修改user2.count 数据时必须使用.valueuser2.count.value = 40  // 修改 shallowReactive}return { user, user2, change }}
})
</script>

2.4. shallowReactive与shallowRef 使用比较

  1. 一般情况下使用refreactive即可
  2. 如果有一个对象数据, 结构比较深, 但只有一层对象的属性变化会触发响应, 使用shallowReactive
  3. 如果有一个对象数据, 后面会产生新的对象来整体替换触发响应式, 使用shallowRef

3. shallowReadonly

shallowReadonlyreadonly浅层作用形式。只有第一层是只读的,深层不是只读属性,

也可以这么理解, 只有第一层的对象属性不能修改值, 但深层的数据是可以修改的, 是非深层只读

3.1. shallowReadonly 浅层只读

shallowReadonly在使用上与readonly完全相同, 区域在于:

  • readonly() 创建只读代理, 如果有深层对象, 深层对象也会自动调用readonly处理为只读代理
  • shallowReadonly 创建的是浅层只读代理, 也就是深层对象不会自动调用readonly包裹, 所以深层对象是非只读的, 即可以修改的. 也就意味着只有根层级的属性变为了只读。

示例:

<template><div><h3>shallowReadonly</h3><div>{{ user }}</div><div>{{ user2 }}</div><button @click="change">修改数据源</button></div>
</template><script lang="ts">
import { defineComponent, readonly, ref, shallowReadonly } from 'vue'export default defineComponent({setup() {const user = readonly({ name: '张三', age: 18, friend: { name: '李四' } })const user2 = shallowReadonly({ name: '张三', age: 18, friend: { name: '李四' } })// 修改数据const change = () => {// readonly 为深层只读, 修改任何一层属性值都是不合法// user.name = '王五'// user.friend.name = '王五'// shallowReadonly 只有第一层会被转为只读, 深层属性会原样存储,不是只读的// user2.name = '王五'  // shallowReadonly 第一层修改报错,因为是只读的// shallowReadonly 修改生成不会报错,// 但也不会触发响应性, 因为原样存储就是一个普通对象user2.friend.name = '王五'}return { user, user2, change }}
})
</script>

3.2. shallowReadonly 处理深层ref不会自动解包

因为shallowReadonly 深层数据的存储是原样存储, 不会自动调用shallowReadonly转为只读, 因此对于深层的ref 的数据不会被自动解包了。

示例:

<template><div><h3>shallowReadonly</h3><div>{{ user }}</div><div>{{ user2 }}</div></div>
</template><script lang="ts">
import { defineComponent, readonly, ref, shallowReadonly } from 'vue'export default defineComponent({setup() {const count = ref(10)const user = readonly({ name: '张三', age: 18, count })const count2 = ref(20)const user2 = shallowReadonly({ name: '张三', age: 18, count: count2 })// readonly 处理深层数据为ref 数据时, 会自动解包,不用添加.valueconsole.log('user.count', user.count)// shallowReadonly 获取深层ref 数据时必须添加.value, 因为不会自动解包console.log('user2.count', user2.count.value)return { user, user2 }}
})
</script>

4. 结语

至此, 就把shallowRef, shallowReactive,shallowReadonly给大家讲解完了, 这三个API使用上还是相对较少. 大家要理解这些API的使用原理, 工作中根据情况选择不同的API .

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

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

相关文章

Java面试题:Executor框架在Java并发编程中扮演什么角色?如何使用它?

在Java并发编程中&#xff0c;Executor框架扮演着核心角色&#xff0c;它提供了一种高级的、线程安全的机制来异步执行任务。Executor框架的主要目的是将任务的提交与任务的执行分离&#xff0c;从而简化了多线程编程的复杂性。 Executor框架的角色&#xff1a; 任务与线程分离…

持续总结中!2024年面试必问 20 道 Redis面试题(八)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 20 道 Redis面试题&#xff08;七&#xff09;-CSDN博客 十五、使用过Redis做异步队列么&#xff0c;你是怎么用的&#xff1f; Redis作为一个高性能的键值存储系统&#xff0c;非常适合用来实现异步队列。异步队…

【STM32单片机】----实现LED灯闪烁实战

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

【机器学习-23】关联规则(Apriori)算法:介绍、应用与实现

在现代数据分析中&#xff0c;经常需要从大规模数据集中挖掘有用的信息。关联规则挖掘是一种强大的技术&#xff0c;可以揭示数据中的隐藏关系和规律。本文将介绍如何使用Python进行关联规则挖掘&#xff0c;以帮助您发现数据中的有趣模式。 一、引言 1. 简要介绍关联规则学习…

[处理器芯片]-5 超标量CPU实现之ALU

ALU&#xff08;Arithmetic Logic Unit&#xff0c;算术逻辑单元&#xff09;&#xff0c;是CPU执行单元中最主要的组成部分。 1 主要功能 算术运算&#xff1a;执行加法、减法、乘法和除法等算术运算。 逻辑运算&#xff1a;执行与、或、非、异或等逻辑运算。 移位运算&am…

动态路由实验—OSPF

动态路由协议实验-------OSPF 链路状态路由选择协议又被称为最短路径优先协议&#xff0c;它基SPF&#xff08;shortest path first &#xff09;算法 实验要求&#xff1a;各个PC之间能够互通 1.四台PC配置如下 PC1 PC2 PC3 PC4 2.配置各个交换机的口子的IP R1 <HUAWE…

Room注解无效原因

在Android项目中&#xff0c;如果父模块使用Kotlin&#xff0c;而子模块用Java编写&#xff0c;并且在子模块中使用了Room库&#xff0c;那么你会发现需要使用kapt而不是annotationProcessor来处理Room注解。这里有几个原因和背景知识&#xff1a; 1. 项目配置的影响 父模块的…

spiderfoot一键扫描IP信息(KALI工具系列九)

目录 1、KALI LINUX简介 2、spiderfoot工具简介 3、在KALI中使用spiderfoot 3.1 目标主机IP&#xff08;win&#xff09; 3.2 KALI的IP 4、命令示例 4.1 web访问 4.2 扫描并进行DNS解析 4.3 全面扫描 5、总结 1、KALI LINUX简介 Kali Linux 是一个功能强大、多才多…

YOLOv8+PyQt:实时检测(摄像头、视频)

1.YOLO&#xff1a;CPU实时检测&#xff08;摄像头、视频&#xff09;https://blog.csdn.net/qq_45445740/article/details/106557451 2.YOLOv8PyQt&#xff0c;实现摄像头或视频的实时检测 需要安装 PySide6 和 ultralytics pip install PySide6 pip install ultralyticsfr…

基于docxtpl的模板生成Word

docxtpl是一个用于生成Microsoft Word文档的模板引擎库。它结合了docx模块和Jinja2模板引擎&#xff0c;使用户能够使用Microsoft Word模板文件并在其中填充动态数据。这个库提供了一种方便的方式来生成个性化的Word文档&#xff0c;并支持条件语句、循环语句和变量等控制结构&…

如何在 Elasticsearch 中选择精确 kNN 搜索和近似 kNN 搜索

作者&#xff1a;来自 Elastic Carlos Delgado kNN 是什么&#xff1f; 语义搜索&#xff08;semantic search&#xff09;是相关性排名的强大工具。 它使你不仅可以使用关键字&#xff0c;还可以考虑文档和查询的实际含义。 语义搜索基于向量搜索&#xff08;vector search&…

Angular Ivy:新渲染引擎的性能提升与优化

Angular Ivy是Angular 9及更高版本中引入的默认渲染引擎&#xff0c;它取代了以前的View Engine。Ivy的目标是提高Angular的性能、减少包大小和提高开发者的生产力。 1. AOT编译的改进&#xff1a; 在Ivy中&#xff0c;Angular使用了更早的AOT&#xff08;Ahead-of-Time&…

在AnolisOS8.9系统安装docker-compose

在AnolisOS8.9系统安装docker-compose 下载docker-compose之前请先确保docker已经安装完&#xff0c;教程可以参考 在阿里Anolis OS 8.9龙蜥操作系统安装docker 下载最新版的docker-compose文件 sudo curl -L https://github.com/docker/compose/releases/download/v2.21.0…

大数据工具之HIVE-参数调优,调度乱码(二)

一、调度乱码 在利用HUE工具,搭建WORKFLOW流程的过程中,如果直接执行hivesql数据正常,不会出现乱码现象,如果利用WORKFLOW搭建的流程,进行数据的拉取,会出现数据中文乱码现象,这些乱码主要是由于select 中的硬编码中文导致出现的现象 具体现象如下: select case when …

百度 提前批 国际化广告部 (深圳-机器学习/数据挖掘/自然语言处理工程师) 一面+二面面经

文章目录 0、面试情况1、一面1.1、简历上的项目介绍了个遍1.2、dbscan原理1.3、为什么梯度的负方向就是损失函数下降最快的方向&#xff1f;1.4、bn原理&#xff0c;为什么bn能解决过拟合&#xff0c;1.5、auc原理&#xff0c;为什么ctr或你的广告推荐里用auc指标&#xff1f;1…

TG5032CGN TCXO 超高稳定10pin端子型适用于汽车动力转向控制器

TG5032CGN TCXO / VC-TCXO是一款应用广泛的晶振&#xff0c;具有超高稳定性&#xff0c;CMOS输出和使用晶体基振的削波正弦波输出形式。且有低相位噪声优势&#xff0c;是温补晶体振荡器(TCXO)和压控晶体振荡器(VCXO)结合的产物&#xff0c;具有TCXO和VCXO的共同优点&#xff0…

后台接口返回void但是response有设置合适的相关信息,前端调用接口解析Blob数据下载excel文件

1、pom.xml文件增加依赖&#xff1a; <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId></dependency> 2、接口代码如下&#xff1a; /*** 企业列表--导出*/GetMapping(value "/downloadTenantL…

微信小程序上线必备:SSL证书申请以及安装

一、认识ssl证书 1、ssl证书是什么&#xff1f; SSL证书&#xff0c;全称Secure Socket Layer Certificate&#xff0c;是一种数字证书&#xff0c;它遵循SSL&#xff08;现在通常指TLS&#xff0c;Transport Layer Security&#xff09;协议标准&#xff0c;用于在客户端&…

SpringCloud系列(26)--OpenFeign超时控制

前言&#xff1a;在上一章节中我们简单的介绍了如何使用OprnFeign去调用微服务&#xff0c;因为消费侧和服务侧是两个不同的微服务&#xff0c;这样可能会出现超时的现象&#xff0c;例如服务侧需要3秒处理任何才能返回结果&#xff0c;但消费侧可能2秒就断开连接了&#xff0c…

【深度学习】2.单层感知机

目标&#xff1a; 实现一个简单的二分类模型的训练过程&#xff0c;通过模拟数据集进行训练和优化&#xff0c;训练目标是使模型能够根据输入特征正确分类数据。 演示: 1.通过PyTorch生成了一个模拟的二分类数据集&#xff0c;包括特征矩阵data_x和对应的标签数据data_y。标签…