VueUse(中文)——简介

VueUse(中文)——简介

一、VueUse——简介

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

二、VueUse——快速开始

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

1、安装

  • 下载包的方式

npm i @vueuse/core

  • CDN 引入方式
javascript"><script src="https://unpkg.***/@vueuse/shared"></script>
<script src="https://unpkg.***/@vueuse/core"></script>

2、使用方法

三、最优的使用方法

1、解构

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

2、清除副作用

  • 类似于Vue的watch***puted ,当组件卸载时将被处理掉,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”作为参数。
转载请说明出处内容投诉
CSS教程_站长资源网 » VueUse(中文)——简介

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买