VueUse——一个大大提升开发效率的Vue3工具库,让你早下班

关注微信公众号“前端大侦探”了解更多精彩内容!
在这里插入图片描述

前言

VueUse是一个基于 Composition API 实现的基本 Vue 组合实用函数的集合。

VueUse可能是受到了react-use的启发,可以看做是vue版的hook,Vue Compostion API支持了更好的逻辑分离,让这些常用的工具可以被复用,能够让你快速地构建丰富的应用,大大地提高你的开发效率在,避免自己去封装一些常用的功能函数,比如:防抖,节流,定时器等。

几天前,一个偶然的机会发现看到Element-plus组件库的源码中已经大量的使用了VueUse,所以可以大胆地在项目中使用了。

官网地址:https://vueuse.org/

一、特征

无缝迁移:同时支持Vue2和Vue3
支持按需引入:只取你想要的
强类型:用 TypeScript 编写,带有 TS Docs
灵活:可配置的事件过滤器
无需打包:支持CDN方式引入使用
功能丰富:截止目前180+功能任你选择
友好的SSR:与服务器端渲染/生成完美配合
互动演示:功能文档还附带互动演示
附加插件:支持Router、Firebase、RxJS等多种插件

二、安装

命令安装

npm

npm i @vueuse/core

yarn

yarn add @vueuse/core

CDN引入

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

作为 window.VueUse 暴露给全局。

三、使用

VueUse里面功能非常的丰富,可能并不是每一功能函数我们都能用到,所以我们用到哪一个功能函数在组件中按需引入就可以了。比如:下面我们就结合代码介绍几个常用的功能函数的使用方法。

1、useMouse——获取鼠标位置

useMouse是一个实时监听鼠标位置变化并返回当前鼠标位置坐标x,y的一个方法。

先看useMouse的类型声明:

export interface MouseOptions extends ConfigurableWindow {
  // 鼠标的位置是相对页面还是浏览器,默认是页面
  type?: "page" | "client"
 	// 监听 `touchmove` 事件,用于移动端,默认true
  touch?: boolean
 	// 触发`touchend`事件时重置为初始值,默认false
  resetOnTouchEnds?: boolean
  // 可以设置初始值
  initialValue?: Position
}
// 源类型是鼠标还触摸
export declare type MouseSourceType = "mouse" | "touch" | null

export declare function useMouse(options?: MouseOptions): {
  x: Ref<number>
  y: Ref<number>
  sourceType: Ref<MouseSourceType>
}
export declare type UseMouseReturn = ReturnType<typeof useMouse>

demo代码:

<template>
    <div>
        <p>x的值:{{ x }}</p>
        <p>y的值:{{ y }}</p>
    </div>
</template>

<script lang="ts" setup>
    import { useMouse } from '@vueuse/core';

    const { x, y } = useMouse({
        type: 'page',
        touch: true,
        resetOnTouchEnds: false,
        initialValue: {
            x: 100,
            y: 200
        }
    })
</script>

效果图:
在这里插入图片描述

2、useCounter——具有实用功能的基本计数器。

先看useCounter的类型声明:

// options配置类型
export interface UseCounterOptions {
  min?: number
  max?: number
}
export declare function useCounter(
	// 初始值
  initialValue?: number,
   // 设置最大值最小值
  options?: UseCounterOptions
): {
  // 计数器
  count: Ref<number>
  // 递增函数方法,方法里面可以传计数器步长,接受整数,小数,负数
  inc: (delta?: number) => number
  // 递减函数方法,方法里面可以传计数器步长,接受整数,小数,负数
  dec: (delta?: number) => number
  get: () => number
  // 设置计数器
  set: (val: number) => number
  // 重置计数器
  reset: (val?: number) => number
}

demo代码:

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="inc()">Increment</button>
        <button @click="dec()">Decrement</button>
        <button @click="inc(5.5)">Increment (+5.5)</button>
        <button @click="dec(5)">Decrement (-5)</button>
        <button @click="set(100)">Set (100)</button>
        <button @click="reset()">Reset</button>
    </div>
</template>

<script setup lang="ts">
    import { useCounter } from '@vueuse/core';

    const { count, inc, dec, set, reset } = useCounter(1)
</script>

效果图:
在这里插入图片描述

3、useLocalStorage、useStorage——响应式本地化存储,用作本地数据持久化。

默认情况下,useStorage 会根据提供的默认值的数据类型智能地使用相应的序列化器。 例如,JSON.stringify / JSON.parse 将用于对象,Number.toString / parseFloat 用于数字等。也就是说,之前使用
localStorage/sessionStorage存储一个对象时,我们要自己给这个对象使用JSON.stringify进行序列化,现在使用useLocalStorage会根据我们传入的数据类型自动的给我们序列化。

useLocalStorage、useSessionStorage、useStorage它们的用法都是一样的。

demo代码:

<template>
    <div>
        <p>名称:{{ state.name }}</p>
        <p>定位:{{ state.type }}</p>
        <p>阵营:{{ state.camp }}</p>

        <button @click="handleLocalStorage">UseLocalStorage</button>
        <button @click="handleReset">Reset</button>
    </div>
</template>

<script setup lang="ts">
import { useLocalStorage } from '@vueuse/core';

const state = useLocalStorage('my-lol', {
    name: '泰达米尔',
    type: '战士',
    camp: '弗雷尔卓德'
})

// 如果没有初始值时,可以设置null
// const state = useLocalStorage('my-lol', null)

const handleLocalStorage = () => {
    // 给LocalStorage my-lol重新赋值
    state.value = {
        name: '深渊巨口',
        type: '射手',
        camp: '虚空之地'
    }
}
// 删除LocalStorage my-lol的值
const handleReset = () => {
    state.value = null
}
</script>

useStorage默认为localStorage。

import { useStorage } from '@vueuse/core'

// 对象类型
const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' })

// 布尔类型
const flag = useStorage('my-flag', true) 

// 数字类型
const count = useStorage('my-count', 0) 

// 使用sessionStorage
const id = useStorage('my-id', 'some-string-id', sessionStorage) 

// 删除某个key值
state.value = null

4、useDebounceFn——防抖

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

demo代码:

<template>
    <p> {{ counter }}</p>

    <button @click="clickedFn">UseDebounceFn</button>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import { useDebounceFn } from '@vueuse/core'

    const counter = ref(0)
    // 第三个参数为最大等待时间,类似于 lodash debounce
    const debouncedFn = useDebounceFn(() => {
        counter.value += 1
    }, 1000, { maxWait: 5000 })

    const clickedFn = () => {
        debouncedFn()
    }
</script>

在这里插入图片描述

5、useTitle

设置网页的title,是对document.title的封装。

demo代码:

<template>
   <p>{{ title }}</p>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useTitle } from '@vueuse/core';

const name = ref('Hello');
// 动态监听title的变化
const title = computed(() => {
    return `${name.value}--Hello`;
})

useTitle(title); // Hello--Hello
name.value = 'Hi'; // Hi--World
</script>

useTitle的源码解析:

MaybeRef是一个类型工具

type MaybeRef<T> = Ref<T> | T

在VueUse中大量的使用了MaybeRef来支持可选择性的响应式参数。

import { ref, watch } from 'vue';
import { MaybeRef } from '@vueuse/core';

export function useTitle(
	newTitle: MaybeRef<string | null | undefined> 
) {
  const title = ref(newTitle || document.title);

  watch(title, (t) => {
    if(t != null) {
      document.title = t
    }
  }, { immediate: true })

  return title
}

后记

因为VueUse的功能函数很多,这里我们简单介绍了几个常用的函数,更多的功能大家可以到VueUse官方网站去学习使用。本人这在学习使用中,写的不恰当的地方可以指出,大家一起学习。更多精彩内容可以扫码下方二维码关注本人微信公众号“前端大侦探”!
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐