十个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

九、最后

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

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

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

相关文章

Docker - Android源码编译与烧写

创建源代码 并挂载到win目录 docker run -v /mnt/f/android8.0:/data/android8.0 -it --name android8.0 49a981f2b85f /bin/bash 使用 docker update 命令动态调整内存限制: 重新运行一个容器 docker run -m 512m my_container 修改运行中容器 显示运行中容器 d…

【1day】复现I Doc View系统upload接口任意文件读取漏洞

注:该文章来自作者日常学习笔记,请勿利用文章内的相关技术从事非法测试,如因此产生的一切不良后果与作者无关。 目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现

【剑指offer|图解|二分查找】点名 + 统计目标成绩的出现次数

🌈个人主页:聆风吟 🔥系列专栏:剑指offer每日一练 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 一. ⛳️点名1.1 题目1.2 示例1.3 限制1.4 解题思路一c代码 1.5 解题思路二c代码 二. ⛳️统计目标成绩…

开发信的基本要点有哪些?如何撰写开发信?

开发信的关键要素是什么?外贸开发信的写作技巧方法? 开发信是一种至关重要的沟通工具,无论是初创企业还是已经建立的公司,开发信都是与潜在客户、合作伙伴或投资者建立联系的关键步骤。蜂邮将讨论开发信的基本要点,以…

(NeRF学习)3D Gaussian Splatting Instant-NGP环境配置

学习参考: 3D gaussian splatting 安装步骤拆解23.9月3D Gaussian Splatting入门指南【五分钟学会渲染自己的NeRF模型,有手就行!】 三维重建instant-ngp环境部署与colmap、ffmpeg的脚本参数使用 一、3D Gaussian Splatting (一&…

快看!AI竟然可以这样……

自从ChatGPT诞生之后,还有谁不知道AI的名号吗?我相信只有极少部分人吧。人工智能技术在21世纪粉墨登场,拉开了信息化时代的蓝图,被广泛应用于各个产业,来实现产业赋能,推动了经济社会的快速发展。 5G使用还…

PyPDF2库对PDF实现读取的应用

目录 一、PyPDF2 库的使用 1. 文档打开和页面读取 2. 文本提取功能 3. 示例代码

java获取字符串最后一个字符

要获取字符串的最后一个字符,你可以使用以下方法之一: 方法1:使用 charAt() 方法 String str "Hello World"; char lastChar str.charAt(str.length() - 1); System.out.println("最后一个字符是:" last…

【数据结构】什么是堆?

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 堆的概念及结构 堆的定义如下: n个元素的序列{k1,k2,...,kn}当且仅当满足以下关系时,称之为堆. 或 把这个序列对应的一维数组(即以一维数组作此序列的存储结构)看成是一个…

基于springBoot + Vue电影售票系统分前后台【完整源码+数据库】

一、项目简介 本项目是一套基于springBoot Vue的电影售票系统,主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。 包含:项目源码、数据库脚本等,该项目可以直接作为bishe使用。 项目都经过严格调试,确…

示例讲述类、接口继承,类、抽象类实现接口相关内容

定义A接口&#xff1a; public interface IService<T> {default boolean save(T entity) {return SqlHelper.retBool(this.getBaseMapper().insert(entity));} }定义B接口继承A接口&#xff1a; public interface IBaseService<T> extends IService<T> {Re…

<蓝桥杯软件赛>零基础备赛20周--第10周--二分

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…

门窗企业网站建设作用是什么

门窗作为市场重要的组合部分&#xff0c;其应用广泛使得众多商家入局经营&#xff0c;无论大型建筑还是家庭应用&#xff0c;都有较高需求度&#xff0c;尤其对品牌商来说&#xff0c;无论直售还是加盟都可以获得不菲效益。 但对门窗企业来说&#xff0c;也需要解决几个痛点&a…

读写分离如何在业务中落地?

本文我们来探讨读写分离如何在业务中落地。 读写分离是业务开发中常用的技术手段&#xff0c;在面试中也是热点问题&#xff0c;今天我们要讲的是在什么业务场景下需要读写分离&#xff0c;读写分离实现的机制&#xff0c;以及实际生产中应用读写分离要注意的问题。 什么时候…

深入解析Spring Boot集成MyBatis的多种方式

文章目录 1. 引言2. 传统的XML配置方式2.1 引入依赖2.2 配置数据源和MyBatis2.3 编写Mapper接口和XML映射文件2.4 使用Mapper 3. 注解配置方式3.1 引入依赖3.2 配置数据源和MyBatis3.3 编写Mapper接口3.4 使用Mapper 4. MyBatis动态SQL4.1 使用XML配置方式4.2 使用注解配置方式…

C++容器系列之list详解与应用

C容器系列之list详解与应用 引言list的元素排列特性优缺点与其他容器的区别应用场景常见函数代码示例 引言 C标准模板库&#xff08;STL&#xff09;提供了丰富的容器类&#xff0c;其中之一就是list。list是一个双向链表实现的容器&#xff0c;与数组和向量等容器有很大的区别…

RT-DETR核心结构改进:即插即用 | 集成YOLO-MS论文SOTA核心结构,原汁原味RT-DETR改进升级版,打破性能瓶颈

💡本篇内容:RT-DETR核心结构改进:即插即用 | 集成YOLO-MS论文SOTA核心结构,原汁原味RT-DETR改进升级版,打破性能瓶颈 💡🚀🚀🚀本博客 改进源代码改进 适用于 RT-DETR 按步骤操作运行改进后的代码即可 💡本文提出改进 原创 方式:二次创新, 该专栏专注于RT-DE…

一文了解 Go 接口

如果本文对你有帮助&#xff0c;不妨点个赞&#xff0c;如果你是 Go 语言初学者&#xff0c;不妨点个关注&#xff0c;一起成长一起进步&#xff0c;如果本文有错误的地方&#xff0c;欢迎指出 接口 在 Go 语言中&#xff0c;接口是一种抽象的类型&#xff0c;是一组方法的集合…

react中使用ref属性获取元素,并判断该元素内是否含有子元素

在react中&#xff0c;可以使用ref属性来获取到一个元素的引用&#xff0c;然后再使用ref.current来访问该元素的DOM节点&#xff0c;使用DOM API来判断这个元素是否含有子元素&#xff0c;要判断一个元素是否含有子元素&#xff0c;可以使用hasChildNodes()&#xff0c;其返回…

Salesforce×阿里云,影响几何?

实际上&#xff0c;从这个视角来看&#xff0c;Salesforce和阿里云的合作也恰在成为着这个市场的一个新催化剂。“期待Salesforce能给中国市场带来一些新的增量&#xff0c;包括对合作伙伴的态度&#xff0c;对产品的态度等等。”一位CRM相关人士告诉我们。 那么&#xff0c;阿…