都vue3了，你还不知道vueuse强大的工具库？

众所周知，vue3.0版本带来最大的更新就是composition api，借助composition api写法，能够更好的封装常用代码逻辑，vueuse 就是这么一个工具集。里面封装了许多常用功能，开箱即用，非常方便。打开官网长这样：

从get started可以看到，npm包支持vue2及vue3版本

工具库划分了几个大类：broswer(浏览器相关)，Sensors(传感器相关)，Animation(动画相关)，这里举几个常用的例子，方便大家了解入门：

broswer(浏览器相关)

• 点击复制文字：useClipboard

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

import { useClipboard } from '@vueuse/core'

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

• 动态加载script：useScriptTag

import { useScriptTag } from '@vueuse/core'

useScriptTag(
  'https://player.twitch.tv/js/embed/v1.js',
  (el: HTMLScriptElement) => {
    // do something
  },
)

上面写法，会在组件挂载完成的时候自动加载，而在组件卸载的时候会自动卸载。如果需要手动控制script加载或卸载时机，也提供了手动控制的写法：

const { load, unload } = useScriptTag(
  "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js",
  () => {
    // 加载完成后 do something
  },
  { manual: true }
);

load跟unload方法可以让你手动控制什么时候加载/卸载脚本，自行调用即可

要注意的是，上面的代码是放在script 标签下，而不是setup中

可以看到，对比常规写法：document.createElement('script') -> 声明type -> 指定src地址 -> 挂载到页面上, 借助该工具函数能够大大简化代码。

• 获取授权信息 例如获取麦克风权限信息：usePermission

import { usePermission } from '@vueuse/core'

const microphoneAccess = usePermission('microphone')

该方法是基于浏览器permission api，存在浏览器兼容性，如果你刚好要使用到该方法，请注意查阅文档：传送门

Sensors(传感器相关)

• 获取dom元素位置及大小信息：useElementBounding

<template>
  <div ref="el" />
</template>

<script>
import { ref } from 'vue'
import { useElementBounding } from '@vueuse/core'

export default {
  setup() {
    const el = ref(null)
    const { x, y, top, right, bottom, left, width, height } = useElementBounding(el)

    return {
      el
    }
  }
})
</script>

• 监听窗口滚动：useWindowScroll

import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()

• 监听窗口大小变化：useWindowSize

import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()

Animation(动画相关)

• useTransition 该动画api可以控制动画开始时间，动画开始执行，执行后的回调,动画类型。例如下面是一个数字快速变化的效果，可以用于积分页面展示积分数字：

<p>{{ cubicBezierNumber.toFixed(2) }}</p>

const baseNumber = ref(0);
const duration = 1500;

const cubicBezierNumber = useTransition(baseNumber, {
  duration,
  transition: [0.75, 0, 0.25, 1],
});

// 调用方法，改变数值
const changeValue => () => {
  baseNumber.value = baseNumber.value === 100 ? 0 : 100;
}

• 可控定时器：useIntervalFn， useTimeoutFn

工具库提供了两个方法，可以让你编写定时器时更简洁：

import { useIntervalFn, useTimeoutFn  } from '@vueuse/core'

const { pause, resume } = useIntervalFn(() => {
  /* ... */
}, 1000)

const { start, stop } = useTimeoutFn(() => {
  /* ... */
}, 3000)

可以看到，如果采用原生写法，需要编写一个变量存放定时器，用于清除的时候调用。而该工具方法省略了这一步,并且当组件卸载时自动卸载定时器，也省略了在组件卸载生命钩子手动清除定时器

另外，如果一个页面中有多个定时器，可以用别名区分调用方法：

const { pause: pauseTimer, resume } = useIntervalFn(() => {
      /* ... */
    }, 1000);
    
// 使用别名调用    
pauseTimer()    

响应式storage数据

如果页面上有一些数据需要存在本地，同时又想是响应式的数据，可以用这个方法：

import { useStorage } from '@vueuse/core'

// bind object
const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' })

改变state的值，页面数据也会响应式变化

throttledWatch 和 debouncedWatch

如果你在watch中实现一些页面更新的操作，可以借助上面的两个方法轻松实现节流或防抖。

import { debouncedWatch } from '@vueuse/core'

debouncedWatch(
  source,
  () => { console.log('changed!') },
  { debounce: 500 }
)

最后

以上提到的这些只是文档中的部分内容，更多详细内容大家可以移步（官网）查看，用好这个工具库，能够很大程度上帮助你提升的项目代码质量。

扫码关注，及时获取最新内容更新