十个Vue3实用但是冷门的API

文章目录

  • 一、前言
  • 二、`readonly`
  • 三、`shallowRef`
  • 四、`shallowReactive`
  • 五、`toRef` & `toRefs`
    • 5.1、 `toRef`
    • 5.2、`toRefs`
  • 六、`toRaw & markRaw & unref`
    • 6.1、`toRaw`
    • 6.2、`markRaw`
    • 6.3、`unref`
  • 七、`effectScope & onScopeDispose`
    • 7.1、收集副作用
    • 7.2、全局状态管理
  • 八、`provide & inject`
  • 九、最后

一、前言

今天给大家分享几个很少人用,但是又非常有用的 Vue3API,废话不多说,往下看吧~

文章提示:下文的无效 不触发视图 不触发响应式更新 不被追踪 这些词汇,想表达的意思是一样的,意思都是 不被追踪

二、readonly

顾名思义,就是只读的意思,如果你的数据被这个 API 包裹住的话,那么修改之后并不会触发响应式,并且会提示警告

readonly 的用途一般用于一些 hooks 暴露出来的变量,不想外界去修改,比如我封装一个 hooks,这样去做的话,那么外界只能用变量,但是不能修改变量,这样大大保护了 hooks 内部的逻辑~

三、shallowRef

shallowRef 用来包住一个基础类型或者引用类型,如果是基础类型那么跟 ref 基本没区别,如果是引用类型的话,那么直接改深层属性是不能触发响应式的,除非直接修改引用地址,如下:

注意:改深层属性能改数据,只是没触发响应式,所以当下一次响应式触发的时候,你修改的深层数据会渲染到页面上~

shallowRef 的用处主要用于一些比较大的但又变化不大的数据,比如我有一个表格数据,通过接口直接获取,并且主要用在前端展示,需要修改一些深层的属性,但是这些属性并不需要立即表现在页面上,比如以下例子,我只需要展示 nameage 字段,至于 isOld 字段并不需要展示,我想要计算 isOld 但是又不想触发响应式更新,所以可以用 shallowRef 包起来,进而减少响应式更新,优化性能

四、shallowReactive

shallowReactive 用来包住一个引用类型,被包住后,修改第一层才会触发响应式更新,也就是浅层的属性,修改深层的属性并不会触发响应式更新

注意:改深层属性能改数据,只是没触发响应式,所以当下一次响应式触发的时候,你修改的深层数据会渲染到页面上~

shallowReactive 用的比较少,shallowReactive 的用处跟 shallowRef 比较像,都是为了让一些比较大的数据能减少响应式更新,进而优化性能

五、toRef & toRefs

5.1、 toRef

先说说 toRef 吧,我们平时在使用 reactive 的时候会有一个苦恼,那就是解构,比如看以下例子,我们为了少些一些代码,解构出来了 name 并放到模板里渲染,但是当我们想改原数据的时候,发现 name 并不会更新,这就是解构出来基础类型的苦恼

这时我们可以使用 toRef,这个时候我们直接修改 name 也会触发原数据的修改,修改原数据也会触发 name 的修改

5.2、toRefs

但是如果是属性太多了,我们想一个一个去用 toRef 的话会写很多代码

所以我们可以使用 toRefs 一次性解构

六、toRaw & markRaw & unref

6.1、toRaw

toRaw 可以把一个响应式 reactive 转成普通对象,也就是把响应式对象转成非响应式对象

toRaw 主要用在回调传参中,比如我封装一个 hooks,我想要把 hooks 内维护的响应式变量转成普通数据,当做参数传给回调函数,可以用 toRaw

6.2、markRaw

markRaw 可以用来标记响应式对象里的某个属性不被追踪,如果你的响应式对象里有某个属性数据量比较大,但又不想被追踪,你可以使用 markRaw

6.3、unref

unref 相当于返回 refvalue

七、effectScope & onScopeDispose

effectScope 可以有两个作用:

  • 收集副作用
  • 全局状态管理

7.1、收集副作用

比如我们封装一个共用的 hooks,为了减少页面隐患,肯定会统一收集副作用,并且在组件销毁的时候去统一消除,比如以下代码:

但是这么收集很麻烦, effectScope 能帮我们做到统一收集,并且通过 stop 方法来进行清除,且 stop 执行的时候会触发 effectScope 内部的 onScopeDispose

我们可以利用 effectScope & onScopeDispose 来做一些性能优化,比如下面这个例子,我们封装一个鼠标监听的 hooks

但是如果在页面里调用多次的话,那么势必会往 window 身上监听很多多余的事件,造成性能负担,所以解决方案就是,无论页面里调用再多次 useMouse,我们只往 window 身上加一个鼠标监听事件

7.2、全局状态管理

现在 Vue3 最火的全局状态管理工具肯定是 Pinia 了,那么你们知道 Pinia 的原理是什么吗?原理就是依赖了 effectScope

所以我们完全可以自己使用 effectScope 来实现自己的局部状态管理,比如我们封装一个通用组件,这个组件层级比较多,并且需要共享一些数据,那么这个时候肯定不会用 Pinia 这种全局状态管理,而是会自己写一个局部的状态管理,这个时候 effectScope 就可以排上用场了

vueuse 中的 createGlobalState 就是为了这个而生

八、provide & inject

Vue3 用来提供注入的 API,主要是用在组件的封装,比如那种层级较多的组件,且子组件需要依赖父组件甚至爷爷组件的数据,那么可以使用 provide & inject,最典型的例子就是 Form 表单组件,可以去看看各个组件库的源码,表单组件大部分都是用 provide & inject 来实现的,比如 FormForm-ItemInput这三个需要互相依赖对方的规则、字段名、字段值,所以用 provide & inject 会更好。具体用法看文档吧~https://cn.vuejs.org/guide/components/provide-inject.html

九、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何防止订单重复支付的?

如图是一个简化的下单流程,首先是提交订单,然后是支付。 支付的话,一般是走支付网关(支付中心),然后支付中心与第三方支付渠道(微信、支付宝、银联)交互。 支付成功以后&#xff0c…

2023-03-27 在vmware 下安装 TrueNAS

Download TrueNAS SCALE - Data Storage Software 安装 TrueNAS 的,官网推荐系统要求: 处理器 记忆 启动装置 贮存 2 核 Intel 64 位或 AMD x86_64 处理器 8 GB 内存 16 GB SSD 引导设备 用于单个存储池的两个相同大小的设备 等待系统安装完成 esxi搭建true…

OpenHarmony应用开发——实现Toast提示功能-鸿蒙物联网应用开发-HarmonyOs应用开发

一、前言 本文我们将实现Toast样式的功能,以便于和用户进行简单、基本的信息交互。需要注意的是,本专栏(OpenHarmony应用开发)不阐述UI设计内容,而主要介绍大家开发中常遇到、常使用的功能问题,以及在物联网…

华为OD试题五(数列描述、矩阵最大值、数据分类)

1. 数列描述 示例代码&#xff1a; # 核心 从第一项 推 第N项目 # 第一项 a0 1 # 推到 第N项 N 4 def fun(a0):# 计算每一项的具体值result left 0cursor 0while cursor < len(a0):if a0[cursor] ! a0[left]:count cursor -leftresult "{}{}".format(str(…

H5开发App应用程序的常见问题以及解决方案

Hello大家好&#xff0c;我是咕噜铁蛋&#xff0c;天冷记得添衣&#xff0c;ok话说回来H5开发成为了一种流行的方式来构建跨平台的移动应用程序。然而&#xff0c;在H5开发App应用程序的过程中&#xff0c;我们常常会遇到一些问题&#xff0c;这些问题可能涉及性能、兼容性、用…

分层解耦—三层架构

目录 三层架构 分层解耦 IOC&DI 三层架构 在进行程序设计以及程序开发时&#xff0c;尽可能让每一个接口、类、方法的职责更单一些&#xff08;单一职责原则&#xff09;。 单一职责原则&#xff1a;一个类或一个方法&#xff0c;就只做一件事情&#xff0c;只管一块功…

MySQL主从复制与读写分离实验

实验一、MySQL主从服务器搭建 实验前准备 Master服务器&#xff1a;192.168.188.14 mysql5.7 Slave服务器1&#xff1a;192.168.188.15 mysql5.7 Slave服务器2&#xff1a;192.168.188.16 mysql5.7 关闭虚拟机防火墙 systemctl stop firewalld setenforce 0 主服务器准…

线性回归问题

目录 一、线性回归关键思想 1、线性模型 2、基础优化算法 二、线性回归的从零开始实现 1、生成数据集 2、读取数据集 3、初始化模型参数 4、定义模型 5、定义损失函数 6、定义优化算法 7、训练 三、线性回归的简洁实现 1、生成数据集 2、读取数据集 3、定义模型…

Java集合大总结——Map的简单使用

现实需求 现实生活与开发中&#xff0c;我们常会看到这样的一类集合&#xff1a;用户ID与账户信息、学生姓名与考试成绩、IP地址与主机名等&#xff0c;这种一一对应的关系&#xff0c;就称作映射。Java提供了专门的集合框架用来存储这种映射关系的对象&#xff0c;即java.uti…

Cobalt Strike四种提权方法

简介 Cobalt Strike是一款基于java的渗透测试神器&#xff0c;常被业界人称为CS神器。自3.0以后已经不在使用Metasploit框架而作为一个独立的平台使用&#xff0c;分为客户端与服务端&#xff0c;服务端是一个&#xff0c;客户端可以有多个&#xff0c;非常适合团队协同作战&a…

【UML】组件图中的供需接口与面向对象中的接口

UML&#xff08;统一建模语言&#xff09;组件图中的“供接口”&#xff08;Provided Interface&#xff09;和“需接口”&#xff08;Required Interface&#xff09;与面向对象编程中的接口概念有关联&#xff0c;但它们在应用上有所区别。 下面解释两者的关系&#xff1a; …

Restormer技术点小结

1. 解决cnn的不足&#xff1a; 1&#xff09;感受野有限 2&#xff09;输入尺寸固定 2. 解决transform的不足&#xff1a; 1&#xff09;计算复杂度随着空间分辨率的增加而二次增长 3. 优势结构&#xff1a;MDTA(Multi-Dconv Head Transposed Attention)和GDFN( Gated-Dco…

Redis新数据类型-Bitmaps

目录 Bitmaps 简介 命令 1. setbit (1) 格式 (2) 实例 2. getbit (1) 格式 (2) 实例 3. bitcount (1) 格式 (2) 实例 4. bitop (1) 格式 (2) 实例 我的其他博客 Bitmaps 简介 Bitmaps 是 Redis 的一种新数据类型&#xff0c;它是一种用于存储位信息的数据结构&…

Nodejs 第二十二章(脚手架)

编写自己的脚手架 那什么是脚手架&#xff1f; 例如:vue-cli Angular CLI Create React App 编写自己的脚手架是指创建一个定制化的工具&#xff0c;用于快速生成项目的基础结构和代码文件&#xff0c;以及提供一些常用的命令和功能。通过编写自己的脚手架&#xff0c;你可以…

智能优化算法应用:基于平衡优化器算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于平衡优化器算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于平衡优化器算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.平衡优化器算法4.实验参数设定5.算法…

H5新特性之h5的新标签 以及 全局属性contenteditable

H5新特性之h5的新标签 以及 全局属性contenteditable 1. 前言1.1 HTML5 的输入&#xff08;input&#xff09;类型 2. html5的新标签2.1 数据列表元素&#xff08;datalist&#xff09;2.2 进度指示标签&#xff08;&#xff09;2.3 meter 标签2.4 summary标签2.5 mark标签2.6 …

vcpkg下载及安装

文章目录 vcpkg是什么vcpkg的优势Windows环境下的下载及安装1.下载 Linux环境下的下载及安装常用命令介绍1.1.1 设置默认安装的平台1.1.2可选步骤&#xff0c;将vcpkg与Visual Studio配合使用&#xff08;需要管理员权限&#xff09;1.1.3 软件包升级1.1.4 查找安装软件包1.1.5…

【电子取证:FTK IMAGER 篇】DD、E01系统镜像动态仿真

​ 文章目录 【电子取证&#xff1a;FTK Imager 篇】DD、E01系统镜像动态仿真一、DD、E01系统镜像动态仿真 &#xff08;一&#xff09;使用到的软件 1、FTK Imager (v4.5.0.3)2、VMware Workstation 15 Pro (v15.5.2)&#xff08;二&#xff09;FTK Imager 挂载镜像 1、选择 …

Dual-MVSNet/DMVSNet论文精读

本文是Constraining Depth Map Geometry for Multi-View Stereo: A Dual-Depth Approach with Saddle-shaped Depth Cells的阅读记录 1. 问题引入 使用基于学习的多视点立体&#xff08;MVS&#xff09;技术重建场景涉及两个阶段&#xff1a;深度预测[【主要在于优化此过程】和…

大数据企业如何使用IP代理进行数据抓取

目录 一、引言 二、IP代理概述 三、为什么大数据企业需要使用IP代理 四、使用IP代理进行数据抓取的步骤 1、获取可用的代理IP 2、配置代理IP 3、设置请求头部信息 4、开始数据抓取 5、错误处理和重试 五、IP代理的注意事项 六、总结 一、引言 随着互联网的快速发展…