vue3.x 的shallowReactive 与 shallowRef 详细解读
在 Vue 3.x 中,shallowReactive 和 shallowRef 是两个用于创建浅层响应式数据的 API。它们与 reactive 和 ref 类似,但在处理嵌套对象时的行为有所不同。以下是它们的详细解读和示例。
1. shallowReactive
作用
shallowReactive 创建一个浅层响应式对象,只有对象的顶层属性是响应式的,嵌套对象的属性不会转换为响应式。
使用场景
-
当你只需要对象的顶层属性是响应式,而不关心嵌套对象的响应性时。
-
当嵌套对象的响应性转换可能带来性能开销时。
示例
import { shallowReactive, effect } from 'vue';const state = shallowReactive({foo: 1,nested: {bar: 2,},
});effect(() => {console.log('foo changed:', state.foo); // 响应式
});effect(() => {console.log('nested.bar changed:', state.nested.bar); // 非响应式
});state.foo = 10; // 触发第一个 effect
state.nested.bar = 20; // 不会触发第二个 effect
解释:
-
state.foo是响应式的,修改它会触发依赖更新。 -
state.nested.bar不是响应式的,修改它不会触发依赖更新。
2. shallowRef
作用
shallowRef 创建一个浅层响应式引用,只有 .value 属性本身是响应式的,而 .value 内部的属性不会转换为响应式。
使用场景
-
当你只需要
.value是响应式的,而不关心.value内部属性的响应性时。 -
当
.value是一个复杂对象,且不需要深度监听时。
示例
import { shallowRef, effect } from 'vue';const count = shallowRef({value: 1,
});effect(() => {console.log('count changed:', count.value.value); // 非响应式
});count.value.value = 10; // 不会触发 effect
count.value = { value: 20 }; // 触发 effect
解释:
-
count.value是响应式的,修改它会触发依赖更新。 -
count.value.value不是响应式的,但直接修改count.value会触发依赖更新。
3. shallowReactive 与 shallowRef 的区别
| 特性 | shallowReactive | shallowRef |
|---|---|---|
| 作用对象 | 对象 | 任意值(通常用于对象或复杂数据) |
| 响应式范围 | 只有顶层属性是响应式的 | 只有 .value 是响应式的 |
| 嵌套对象处理 | 嵌套对象的属性不是响应式的 | .value 内部的属性不是响应式的 |
| 典型使用场景 | 只需要顶层属性响应式的对象 | 只需要 .value 响应式的引用 |
4. shallowReactive 与 reactive 的对比
reactive 的深度响应式
import { reactive, effect } from 'vue';const state = reactive({foo: 1,nested: {bar: 2,},
});effect(() => {console.log('nested.bar changed:', state.nested.bar); // 响应式
});state.nested.bar = 20; // 触发 effect
-
reactive会将整个对象及其嵌套属性都转换为响应式。
shallowReactive 的浅层响应式
import { shallowReactive, effect } from 'vue';const state = shallowReactive({foo: 1,nested: {bar: 2,},
});effect(() => {console.log('nested.bar changed:', state.nested.bar); // 非响应式
});state.nested.bar = 20; // 不会触发 effect
-
shallowReactive只将顶层属性转换为响应式,嵌套属性保持不变。
5. shallowRef 与 ref 的对比
ref 的深度响应式
import { ref, effect } from 'vue';const count = ref({value: 1,
});effect(() => {console.log('count.value changed:', count.value.value); // 响应式
});count.value.value = 10; // 触发 effect
-
ref会将.value及其内部属性都转换为响应式。
shallowRef 的浅层响应式
import { shallowRef, effect } from 'vue';const count = shallowRef({value: 1,
});effect(() => {console.log('count.value changed:', count.value.value); // 非响应式
});count.value.value = 10; // 不会触发 effect
count.value = { value: 20 }; // 触发 effect
-
shallowRef只将.value本身转换为响应式,内部属性保持不变。
6. 使用场景总结
shallowReactive
-
适用于只需要顶层属性响应式的对象。
-
例如:表单数据的顶层字段。
shallowRef
-
适用于只需要
.value响应式的引用。 -
例如:DOM 元素的引用或不需要深度监听的对象。
7. 注意事项
-
性能优化:
shallowReactive和shallowRef可以减少不必要的响应式转换,从而提高性能。 -
嵌套对象的响应性:
如果需要嵌套对象的响应性,应该使用reactive或ref。 -
.value的使用:shallowRef的.value是响应式的,但.value内部的属性不是响应式的。
8. 总结
-
shallowReactive和shallowRef是 Vue 3 提供的浅层响应式 API。 -
shallowReactive只将对象的顶层属性转换为响应式。 -
shallowRef只将.value本身转换为响应式。 -
它们适用于需要优化性能或不需要深度响应式的场景。
通过合理使用 shallowReactive 和 shallowRef,可以在保证功能的同时优化 Vue 应用的性能。
相关文章:
vue3.x 的shallowReactive 与 shallowRef 详细解读
在 Vue 3.x 中,shallowReactive 和 shallowRef 是两个用于创建浅层响应式数据的 API。它们与 reactive 和 ref 类似,但在处理嵌套对象时的行为有所不同。以下是它们的详细解读和示例。 1. shallowReactive 作用 shallowReactive 创建一个浅层响应式对…...
鸿蒙NEXT开发-界面渲染(条件和循环)
注意:博主有个鸿蒙专栏,里面从上到下有关于鸿蒙next的教学文档,大家感兴趣可以学习下 如果大家觉得博主文章写的好的话,可以点下关注,博主会一直更新鸿蒙next相关知识 目录 1. 渲染-条件渲染 1.1 基本介绍 1.2 使…...
python电影数据分析及可视化系统建设
博主介绍:✌程序猿徐师兄、8年大厂程序员经历。全网粉丝15w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...
在本地校验密码或弱口令 (windows)
# 0x00 背景 需求是验证服务器的弱口令,如果通过网络侧校验可能会造成账户锁定风险。在本地校验不会有锁定风险或频率限制。 # 0x01 实践 ## 1 使用 net use 命令 可以通过命令行使用 net use 命令来验证本地账户的密码。打开命令提示符(CMD࿰…...
pytest测试专题 - 1.3 测试用例发现规则
<< 返回目录 1 pytest测试专题 - 1.3 测试用例发现规则 执行pytest命令时,可以不输入参数,或者只输入文件名或者目录名,pytest会自己扫描测试用例。那pytest基于什么规则找到用例呢? 文件名:满足文件名称为tes…...
零基础学习人工智能
零基础学习人工智能是一个既充满挑战又极具潜力的过程。以下是一份详细的学习指南,旨在帮助零基础的学习者有效地踏入人工智能领域。 一、理解基本概念 在学习人工智能之前,首先要对其基本概念有一个清晰的认识。人工智能(AI)是…...
LeetCode热题100- 缺失的第一个正数【JavaScript讲解】
题目: 解题一: 如果不考虑时间复杂度和空间复杂度的话,我们最先想到的办法是先将该数组进行排序和去重,将最初的res结果值设置为1;将然后进行遍历,如果第一项不为1,则返回1,否则根…...
JAVA泛型介绍与举例
Java中,泛型用于编译阶段限制集合中元素的类型,或者限制类中某个属性的类型,编译过程中发生类型擦除,最终还是Object类型。 1. 集合中的泛型 集合默认可以存储任何类型的元素,即Object类型,当使用一个集合…...
【ISO 14229-1:2023 UDS诊断(会话控制0x10服务)测试用例CAPL代码全解析③】
ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase03 作者:车端域控测试工程师 更新日期:2025年02月15日 关键词:UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-003测试用例 用例ID测试场景验证要点参考条款预期…...
Vivado生成edif网表及其使用
介绍如何在Vivado中将模块设为顶层,并生成相应的网表文件(Verilog文件和edif文件),该过程适用于需要将一个模块作为顶层设计进行综合,并生成用于其他工程中的网表文件的情况。 例如要将fpga_top模块制作成网表给其它工…...
Win10环境借助DockerDesktop部署大数据时序数据库Apache Druid
Win10环境借助DockerDesktop部署最新版大数据时序数据库Apache Druid32.0.0 前言 大数据分析中,有一种常见的场景,那就是时序数据,简言之,数据一旦产生绝对不会修改,随着时间流逝,每个时间点都会有个新的…...
mac 意外退出移动硬盘后再次插入移动硬盘不显示怎么办
第一步:sudo ps aux | grep fsck 打开mac控制台输入如下指令,我们看到会出现两个进程,看进程是root的这个 sudo ps aux|grep fsck 第二步:杀死进程 在第一步基础上我们知道不显示u盘的进程是:62319,我们…...
力扣动态规划-32【算法学习day.126】
前言 ###我做这类文章一个重要的目的还是记录自己的学习过程,我的解析也不会做的非常详细,只会提供思路和一些关键点,力扣上的大佬们的题解质量是非常非常高滴!!! 习题 1.完全平方数 题目链接:279. 完全…...
【算法进阶详解 第一节】树状数组
【算法进阶详解 第一节】树状数组 前言树状数组基础树状数组原理树状数组能够解决的问题 树状数组提高树状数组区间加,区间和操作二维树状数组 树状数组应用树状数组区间数颜色树状数组二维偏序 前言 树状数组在算法竞赛中十分常见,其能解决二维数点&am…...
【苍穹外卖】学习
软件开发整体介绍 作为一名软件开发工程师,我们需要了解在软件开发过程中的开发流程, 以及软件开发过程中涉及到的岗位角色,角色的分工、职责, 并了解软件开发中涉及到的三种软件环境。那么这一小节,我们将从 软件开发流程、角色…...
Python常见面试题的详解8
1. 变量作用域和查找规则(LEGB) 作用域层级: Local:函数内部作用域 Enclosing:闭包函数外层作用域 Global:模块全局作用域 Built-in:内置命名空间 查找顺序:L → E → G → B关…...
Deepseek R1模型本地化部署与API实战指南:释放企业级AI生产力
摘要 本文深入解析Deepseek R1开源大模型的本地化部署流程与API集成方案,涵盖从硬件选型、Docker环境搭建到模型微调及RESTful接口封装的完整企业级解决方案。通过电商评论分析和智能客服搭建等案例,展示如何将前沿AI技术转化为实际生产力。教程支持Lin…...
node.js + html调用ChatGPTApi实现Ai网站demo(带源码)
文章目录 前言一、demo演示二、node.js 使用步骤1.引入库2.引入包 前端HTML调用接口和UI所有文件总结 前言 关注博主,学习每天一个小demo 今天是Ai对话网站 又到了每天一个小demo的时候咯,前面我写了多人实时对话demo、和视频转换demo,今天…...
sql语言语法的学习
sql通用语法 sql分类 DDL(操作数据库和表) 操作数据库 操作表_查询 操作表_创建 举例: 操作表_删除 操作表_修改 DML(增删改表中数据) DML添加数据 DML删除数据 DML修改数据 DQL 单表查询 基础查询 条件查询 案例演示: 排序查询 聚合函数 分组查询…...
力扣 最长递增子序列
动态规划,二分查找。 题目 由题,从数组中找一个最长子序列,不难想到,当这个子序列递增子序列的数越接近时是越容易拉长的。从dp上看,当遍历到这个数,会从前面的dp选一个最大的数加上当前数,注意…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
