当前位置: 首页 > news >正文

Vue 3 响应式高阶用法之 `shallowRef()` 详解

Vue 3 响应式高阶用法之 shallowRef() 详解

文章目录

  • Vue 3 响应式高阶用法之 `shallowRef()` 详解
  • 简介
  • 一、使用场景
    • 1.1 深层嵌套对象的性能优化
    • 1.2 需要部分响应式的场景
  • 二、基本使用
    • 2.1 引入 `shallowRef`
    • 2.2 定义 `shallowRef`
  • 三、功能详解
    • 3.1 浅层响应式
    • 3.2 与 `ref` 的对比
  • 四、最佳实践及案例
    • 4.1 使用 `shallowRef` 优化性能
    • 4.2 结合 `watch` 和 `computed`
  • 五、总结

简介

在 Vue 3 中,响应式系统是其核心特性之一。通过响应式系统,开发者可以轻松地管理和更新应用状态。然而,对于一些特殊场景,我们可能需要更细粒度的控制。这时,shallowRef() 就派上用场了。本文将详细介绍 shallowRef() 的使用场景、基本使用、功能详解、最佳实践及案例,帮助读者更好地理解和应用这一高阶用法。

一、使用场景

1.1 深层嵌套对象的性能优化

在处理深层嵌套对象时,Vue 的默认响应式系统会递归地将对象的每一层都转换为响应式。这在某些情况下可能会导致性能问题。shallowRef() 只会使对象的第一层属性成为响应式,从而可以优化性能。

1.2 需要部分响应式的场景

有些场景下,我们只需要对象的某些属性是响应式的,而其他属性则不需要。shallowRef() 可以满足这种需求,使得开发者可以更灵活地控制响应式行为。

二、基本使用

2.1 引入 shallowRef

在 Vue 3 中,shallowRef 可以通过 @vue/reactivity 包引入:

import { shallowRef } from 'vue';

2.2 定义 shallowRef

使用 shallowRef 定义一个响应式引用对象:

const state = shallowRef({user: {name: 'Alice',age: 25},isLoggedIn: false
});

在这个例子中,state 对象的第一层属性是响应式的,但 user 对象的属性不会被深度转换为响应式。

三、功能详解

3.1 浅层响应式

shallowRef 只会使对象的第一层属性成为响应式:

state.value.isLoggedIn = true; // 响应式更新
state.value.user.name = 'Bob'; // 非响应式更新

在上述代码中,isLoggedIn 属性的变化会触发响应式更新,而 user 对象的属性变化不会触发。

3.2 与 ref 的对比

ref 相比,shallowRef 不会递归地将对象的每一层都转换为响应式:

import { ref } from 'vue';const deepState = ref({user: {name: 'Alice',age: 25},isLoggedIn: false
});deepState.value.user.name = 'Bob'; // 响应式更新

在这个例子中,ref 会使 user 对象的属性也成为响应式。

四、最佳实践及案例

4.1 使用 shallowRef 优化性能

在处理大量数据或深层嵌套对象时,使用 shallowRef 可以显著提高性能:

const largeData = shallowRef({items: Array.from({ length: 10000 }, (_, i) => ({ id: i, value: `Item ${i}` }))
});

4.2 结合 watchcomputed

shallowRef 可以与 watchcomputed 结合使用,提供更灵活的响应式控制:

import { watch, computed } from 'vue';const userState = shallowRef({user: {name: 'Alice',age: 25}
});watch(() => userState.value.user.name, (newName, oldName) => {console.log(`User name changed from ${oldName} to ${newName}`);
});const userName = computed(() => userState.value.user.name);

五、总结

shallowRef 是 Vue 3 中一个强大的工具,适用于需要部分响应式或优化性能的场景。通过本文的介绍,我们了解了 shallowRef 的使用场景、基本使用、功能详解以及最佳实践。希望这些内容能帮助你在实际项目中更好地应用 shallowRef,提升开发效率和应用性能。

通过合理使用 shallowRef,我们可以更加灵活地控制响应式行为,从而更高效地构建复杂的 Vue 3 应用。

相关文章:

Vue 3 响应式高阶用法之 `shallowRef()` 详解

Vue 3 响应式高阶用法之 shallowRef() 详解 文章目录 Vue 3 响应式高阶用法之 shallowRef() 详解简介一、使用场景1.1 深层嵌套对象的性能优化1.2 需要部分响应式的场景 二、基本使用2.1 引入 shallowRef2.2 定义 shallowRef 三、功能详解3.1 浅层响应式3.2 与 ref 的对比 四、…...

流量录制与回放:jvm-sandbox-repeater工具详解

在软件开发和测试过程中,流量录制与回放是一个非常重要的环节,它可以帮助开发者验证系统在特定条件下的行为是否符合预期。本文将详细介绍一款强大的流量录制回放工具——jvm-sandbox-repeater,以及如何利用它来提高软件测试的效率和质量。 …...

内网渗透—内网穿透工具NgrokFRPNPSSPP

前言 主要介绍一下常见的隧道搭建工具,以此来达到一个内网穿透的目的。简单说一下实验滴环境吧,kali作为攻击机,winserver2016作为目标靶机。 kali 192.168.145.171 winserver2016 10.236.44.127 显然它们处于两个不同的局域网&#xff0c…...

嵌入式中传感器数据处理方法

大家好,在传感器使用中,我们常常需要对传感器数据进行各种整理,让应用获得更好的效果,以下介绍几种常用的简单处理方法: 加权平滑:平滑和均衡传感器数据,减小偶然数据突变的影响。 抽取突变:去除静态和缓慢变化的数据背景,强调瞬间变化。 简单移动平均线:保留数据流最…...

生成式 AI 的发展方向,是 Chat 还是 Agent?

据《福布斯》报道,商业的未来是自动化。他们报告说,自动化的应用是不可避免的,“工人们即将被一个圈子和一套规则包围,要严格遵守,不能偏离。得益于聊天机器人ChatGPT于2022年11月推出所带来的强劲加持,202…...

金字塔监督在人脸反欺骗中的应用

介绍 论文地址:https://arxiv.org/pdf/2011.12032.pdf 近年来,人脸识别技术越来越普及。在智能手机解锁和进出机场时,理所当然地会用到它。人脸识别也有望被用于管理今年奥运会的相关人员。但与此同时,人们对人脸欺骗的关注度也…...

vue3——两种利用自定义指令实现防止按钮重复点击的方法

方法一:利用定时器设置时间,下方代码设置时间为1秒 但是有个缺点:请求如果很慢,1秒钟还没有好,那么该方法就没用了 // 利用定时器:1秒之后才能再次点击app.directive(preventReClick, {mounted: (el, bind…...

Chrome谷歌浏览器Console(控制台)显示文件名及行数

有没有这样的困扰?Chrome谷歌浏览器console(控制台)不显示编译文件名及行数? 设置(Settings)- > 忽略列表(lgnore List)-> 自定义排除规则(Custom exclusion rules) 将自定义排除规则…...

Vue3+Element Plus 实现table表格中input的验证

实现效果 html部分 <template><div class"table"><el-form ref"tableFormRef" :model"form"><el-table :data"form.detailList"><el-table-column type"selection" width"55" align&…...

安宝特方案|解放双手,解决死角,AR带来质量监督新体验

AR质量监督 解放双手&#xff0c;解决死角 在当今制造业快速发展的背景下&#xff0c;质量监督成为确保产品高质量和完善的管理制度的关键环节。然而&#xff0c;传统的质量监督方式存在诸多挑战&#xff0c;如人工操作带来的效率低下、查岗不及时、摄像头死角等问题。 为了解…...

Django教程(005):基于ORM操作数据库的部门管理系统

文章目录 1、功能介绍2、新建项目3、创建app4、 表结构创建6、生成表7、静态文件管理8、部门管理8.1、部门列表8.2、添加部门8.3、删除部门8.4、编辑部门9、员工管理9.1、员工列表9.2、使用ModelForm添加员工9.3、编辑员工9.4、删除员工10、完整代码下载地址1、功能介绍 部门添…...

git等常用工具以及cmake

一、将git中的代码克隆进电脑以及常用工具介绍 1.安装git 首先需要安装git sudo apt install git 注意一定要加--recursive&#xff0c;因为文件中有很多“引用文件“&#xff0c;即第三方文件&#xff08;库&#xff09;&#xff0c;加入该选项会将文件中包含的子模…...

Mybatis(四)特殊SQL的查询:模糊查询、批量删除、动态设置表明、添加功能获取自增的主键

实体类&#xff1a; 数据库&#xff1a; 1、模糊查询 方案一&#xff1a; 不适用#{ }&#xff0c;’%?%‘ 问号是属于字符串的一部分 不会被解析成占位符&#xff0c;会被当作是我们字符串的一部分来解析&#xff0c;所以我们执行的语句中找不到占位符&#xff0c;但是我们却…...

JS原型与原型链

JS原型与原型链 JavaScript中一切引用类型都是对象&#xff0c;对象就是属性的集合。 Array类型、Function类型、Object类型、Date类型、RegExp类型等都是引用类型。 原型是什么 总计一句话就是&#xff08;继承里的父亲&#xff0c;你可以使用你的原型里的函数&#xff09;…...

Python编程学习第一篇——Python零基础快速入门(六)(4)异常处理

我们已经了解了Python的基本数据类型、变量和基本的逻辑控制语句&#xff0c;基于这些基础知识可以编写一些小程序了&#xff0c;但是在写程序的时候我们会发现&#xff0c;有时候程序并不是按我们预期的方向执行&#xff0c;有的直接报错&#xff0c;有的没有报错&#xff0c;…...

GraphHopper-map-navi_路径规划、导航(web前端页面版)

文章目录 一、项目地址二、踩坑环境三、问题记录3.1、graphhopper中地图问题3.1.1. getOpacity不存在的问题3.1.2. dispatchEvent不存在的问题3.1.3. vectorLayer.set(background-maplibre-layer, true)不存在set方法3.1.4. maplibre-gl.js.map不存在的问题3.1.5. Uncaught Ref…...

2-46 基于matlab的声音信号的短时能量、短时过零率、端点检测

基于matlab的声音信号的短时能量、短时过零率、端点检测。通过计算计算短时能量、调整能量门限&#xff0c;然后开始端点检测。输出可视化结果。程序已调通&#xff0c;可直接运行。 2-46 短时能量 短时过零率 端点检测 - 小红书 (xiaohongshu.com)...

力扣630.课程表 II

力扣630.课程表 II 反悔堆 将课程按照结束时间从大到小排序每次取一个判断当前是否能学完该课程如果能学完就将持续时间加入堆 更新答案如果学不完就判断该课程持续时间是否比之前学过的最大的还大 用时更短的话就将旧的弹出 class Solution {public:int scheduleCourse(ve…...

数字IC后端流程简述

1. 设计输入 目标:接收前端设计(如RTL代码和约束文件)的输出。 工具:前端设计工具(如Synopsys Design Compiler或Cadence Genus)。 步骤: 确保前端设计的RTL代码经过综合并生成了门级网表(Netlist)。 收集约束文件(Constraints),如时序约束(SDC文件)、功率约束等…...

数学建模--整数规划和非线性规划

目录 整数规划 非线性规划 总结 整数规划中分支定界法的具体步骤和实现细节是什么&#xff1f; 初始化&#xff1a; 分支&#xff1a; 定界&#xff1a; 剪枝&#xff1a; 终止条件&#xff1a; 非线性规划中的梯度法、牛顿法和拟牛顿法的比较分析有哪些&#xff1f;…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...