VueUse中文文档

安装VueUse

npm i @vueuse/core

VueUse里面功能非常的丰富，可能并不是每一功能函数我们都能用到，所以我们用到哪一个功能函数在组件中按需引入就可以了。

useMouse——获取鼠标位置

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

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>

<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>

useDebounceFn——防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
(当用户多次连续点击时，只会识别一次得点击事件)

<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>