VueUse（中文）—

一、VueUse——简介

VueUse是由Anthony Fu等大佬写的基于Vue的自定义钩子集合。
类似于基于React的 ahooks
功能丰富：200+功能
无缝迁移：适用于Vue 3和Vue2.7版本之后
支持tree shaking：只引入自己需要的那部分，打包会更小
还有其他的亮点，可以去官网查看

二、VueUse——快速开始

VueUse是一个基于Composition API的实用函数集合。
所以需要熟悉 Composition API 的基本概念

1、安装

下载包的方式

npm i @vueuse/core

CDN 引入方式

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

2、使用方法

三、最优的使用方法

1、解构

VueUse中的大多数函数都返回一个refs对象，你可以使用ES6的对象解构语法来获取你需要的：
如果你不喜欢.value的使用方式，你可以使用reactive()来包裹返回的refs对象：

2、清除副作用

类似于Vue的watch 和computed ，当组件卸载时将被处理掉，VueUse的功能也会自动清除副作用。
例如：useEventListener，当组件销毁时候，会自动调用removeEventListener 来进行处理，无需手动处理。
所有的VueUse函数都遵循这个约定。
为了方便我们可以手动处理这些函数，一些函数返回一个stop处理程序：
虽然不是所有函数都返回处理程序，但更通用的解决方案是使用Vue中的 effectScope API。

3、传递Ref作为参数

在Vue中，我们使用setup()函数来构建数据和逻辑之间的“连接”。
为了使它更灵活，大多数VueUse函数也接受参数的ref版本。
规范使用的方式：通常useTitle返回一个反映页面标题的ref。当你给ref赋新值时，它会自动更新标题。
连接使用的方式：如果你认为有“关联”，你可以传递一个ref，使它绑定到页面的标题。
Reactive Getter方式：从VueUse 9.0开始，引入了一个新的方式来传递“Reactive Getter”作为参数。

VueUse（中文）——简介相关推荐

scilab中文简介
scilab中文简介 2003年的时候就开始接触scilab,抽空翻译,自己写了一些学习体会,本来想写成一个完整的教程,可惜一直也没有完成,就先把未完成版放在这里吧,后面的章节,看情况吧.如果有人需要 ...
“vueuse“ 中文索引与用例
vueuse 是一个用于 vue 项目中的常用工具集,一些知名前端项目如 ElementUI-plus 等中都有它的声影,基于该项目可以很容易地进行封装,实现更加具体地功能.该工具集也是目前同类库中星 ...
chatgpt plus 会员插件中文简介
chatgpt plus 会员插件截至(2023年5月19日) 英文名名称翻译英文介绍中文介绍 Tomorrow.io 明天.io Predicting, planning, and adap ...
USEARCH11命令大全，200+命令中文简介，快速查找需要功能
序列比对嵌合体检测和过滤序列.树和基于图形的聚类距离矩阵多样性分析 fastq格式文件处理 Fasta和fastq文件处理格式机器学习和鉴定有用OTUs 其它命令 OTU分析和去噪 OTU表 ...
NVIDIA Jetson TX2 System-on-Module中文简介
配置: Pascal GPU + ARMv8 + 8GB LPDDR4 + 32GB eMMC + WLAN/BT 简介: NVIDIA Jetson TX2系统对模块上的系统(SOM)重新定义了可能 ...
cluster-trace-v2018 阿里集群数据集中文简介
原文地址(英文版):https://github.com/alibaba/clusterdata/blob/v2018/cluster-trace-v2018/trace_2018.md 1简介作为 ...
Phaser开源2d引擎 html5游戏框架中文简介
功能特点(Features) 易维护代码(Easy Asset Loading) Phaser可以加载图片,音频文件,数据文件,文本文件和自动解析精灵图和纹理地图集数据(出口纹理封隔器或Flash C ...
ISO 21434概述中文简介总结版
汽车信息安全标准解读 -ISO/SAE_21434道路车辆–网络安全工程目录引言... 4 一.标准适用范围... 5
RK3399中文简介
1.概述 RK3399是一种低功耗.高性能的处理器,可用于计算.个人移动互联网设备和其他智能设备应用程序.基于大.小架构,它集成了双核心Cortex-A72和四核Cortex-A53与单独的NEON协 ...
LT8618SX中文简介
1.功能 RGB输入 –支持24位RGB,YUV和BT656/BT601/BT1120输入 –支持SDR和DDR数据采样 –可编程上升/下降边缘时钟输入 –支持高达148.5MHz DDR或297M ...

VueUse（中文）——简介

一、VueUse——简介

二、VueUse——快速开始

1、安装

2、使用方法

三、最优的使用方法

1、解构

2、清除副作用

3、传递Ref作为参数

VueUse（中文）——简介相关推荐

最新文章

热门文章