VueUse
官方链接
一、什么是VueUse
VueUse不是Vue.use !!!它是一个基于 Composition API 的实用函数集合,下面是具体的一些用法
二、如何引入
import { 具体方法 } from ‘@vueuse/core’
三、下面来看看一些具体的用法
1、useMouse:监听当前鼠标坐标的一个方法,他会实时的获取鼠标的当前的位置
2、usePreferredDark:判断用户是否喜欢深色的方法,他会实时的判断用户是否喜欢深色的主题
3、useLocalStorage:数据持久化到本地存储中 例子:
useLocalStorage(
‘my-storage’,
{
name: ‘author’,
},
)
4、throttleFilter:节流 throttleFilter(100)
5、debounceFilter:防抖 debounceFilter(100)
6、OnClickOutside:在点击元素外部时触发一个回调函数
**注意:**这里的 OnClickOutside 函数是一个组件,不是一个函数。需要package.json 中安装了 @vueuse/components。
import {
OnClickOutside } from '@vueuse/components'
function close () {
/* ... */
}
</script>
<template>
<OnClickOutside @trigger="close">
<div>
Click Outside of Me
</div>
</OnClickOutside>
</template>
7、全局状态共享的函数
createGlobalState
useStorage
8、其他具体的方法可以看文档:例如 until 等的运用