社区首页 >专栏 >时隔这么长时间，我把常用的功能整理好了，再来感受VueUse工具库的优雅吧~

时隔这么长时间，我把常用的功能整理好了，再来感受VueUse工具库的优雅吧~

用户9078190

发布于 2022-10-28 11:07:47

3.3K00

代码可运行

文章被收录于专栏：知码前端知码前端

运行总次数：0

代码可运行

前言

前段时间我曾经写过一篇文章介绍了一个 VueUse 这个工具库，那个时候只是刚开始用，没有深入了解。经过这么长时间的使用，现在现来谈一下使用感受，体验一下VueUse之美。

VueUse简介

VueUse是一个工具库，里面包含了大量的基于 CompositionAPI的方法。所以在使用之前要对CompositionAPI是什么有一个了解，这样才能更好的去使用它。

简单的来说，这个工具库里面有很多的函数，这些函数都是开箱即用的。

并且在4.0之后，也同样支持Vue2和Vue3两个版本。

github地址：

https://github.com/vueuse/vueuse

官方文档地址：

https://vueuse.org

安装起来也非常的方便：

npm i @vueuse/core

在VueUse中，绝大多数的工具函数都会返回一个可 refs 的对象，你可以使用 ES6的对象解构语法去获取你需要的数据，如下：

import { useMouse } from '@vueuse/core'

// "x" and "y" are refs
const { x, y } = useMouse()

console.log(x.value)

const mouse = useMouse()

console.log(mouse.x.value)

如果你更喜欢用对象风格的属性，你可以把那个refs对象用reactive方法解析一下，如：

import { reactive } from 'vue'
import { useMouse } from '@vueuse/core'

const mouse = reactive(useMouse())

// "x" and "y" will be auto unwrapped, no `.value` needed
console.log(mouse.x)

不仅如此，VueUse还提供了 Componets的使用方式，真可谓是非常的方便，如下：

<script setup>
import { OnClickOutside } from '@vueuse/components'

function close () {
  /* ... */
}
</script>
<template>
  <OnClickOutside @trigger="close">
    <div>
      Click Outside of Me
    </div>
  </OnClickOutside>
</template>

先介绍这么多，总结一句话就是 VueUse的方法可以以 useXXXX的方式使用，也可以用Comoponets的形式使用。更多的介绍可以去官网查看详细的说明

常用功能介绍

VueUse的功能是很强大的，包含了各个方面，我们平时开发可能用不了这么多功能，所以我们重点说一下几个常用的功能。

浏览器相关

1、useClipboard

2、usefavicon

3、useFullscreen

4、useScriptTag

5、useStyleTag

6、useTitle

传感器相关

1、useNetwork

2、useScroll

3、useSwipe

动画相关

1、useInterval

2、useIntervalFn

3、useNow

4、useTimeout

状态管理

1、useLocalStorage

2、useSessionStorage

3、useStorage

元素相关

1、useDraggable - make elements draggable

2.useElementBounding - reactive bounding box of an HTML element

3、useElementSize - reactive size of an HTML element

4、useElementVisibility - tracks the visibility of an element within the viewport

5、useWindowScroll - reactive window scroll

6、useWindowSize - reactive window size

常用工具

1、useBase64 - reactive base64 transforming

2、useCounter - basic counter with utility functions

3、useDateFormat - get the formatted date according to the string of tokens passed in

4、useDebounceFn - debounce execution of a function

5、useEventBus - a basic event bus

6、useThrottleFn - throttle execution of a function

7、useToggle - a boolean switcher with utility functions

个人感觉大体的常功能应该就这么多，当然，VueUse还有很多很多的工具函数，大家可以去官网查看文档。

源码分析

下面我们以 useClipboard 为例分析一下源码，看看背后到底是怎么做的先来看一下源码：

function useClipboard(options = {}) {
  const {
    navigator = defaultNavigator,
    read = false,
    source,
    copiedDuring = 1500
  } = options;
  const events = ["copy", "cut"];
  const isSupported = Boolean(navigator && "clipboard" in navigator);
  const text = vueDemi.ref("");
  const copied = vueDemi.ref(false);
  const timeout = shared.useTimeoutFn(() => copied.value = false, copiedDuring);
  function updateText() {
    navigator.clipboard.readText().then((value) => {
      text.value = value;
    });
  }
  if (isSupported && read) {
    for (const event of events)
      useEventListener(event, updateText);
  }
  async function copy(value = vueDemi.unref(source)) {
    if (isSupported && value != null) {
      await navigator.clipboard.writeText(value);
      text.value = value;
      copied.value = true;
      timeout.start();
    }
  }
  return {
    isSupported,
    text,
    copied,
    copy
  };
}

用法如下：

import { useClipboard } from '@vueuse/core'

const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })

读过程

  if (isSupported && read) {
    for (const event of events)
      useEventListener(event, updateText);
  }

如果浏览器支持的话，会监听 `cut` 和 `copy` 两个事件。如果有对应的事件发生，就会从navigator.clipborad中读取复制的内容，然后再赋值给 text 变量。

这样就可以通过 text 暴露出去，我们就可拿到了复制的内容。

写过程

不过有时候我们想在点击某个按钮的时候进行复制操作，同样这个工具方法也提供了一个 copy 方法供我们使用，让我们在点击的时候进行操作，如下：

<button @click='copy()'>
  <!-- by default, `copied` will be reset in 1.5s -->
  <span v-if='!copied'>Copy</span>
  <span v-else>Copied!</span>
</button>