VueUse（中文）——简介
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
一、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”作为参数。
