网络编程
位置:首页>> 网络编程>> JavaScript>> vue新玩法VueUse工具库具体用法@vueuse/core详解

vue新玩法VueUse工具库具体用法@vueuse/core详解

作者:渣男语录  发布时间:2023-07-02 16:55:44 

标签:vue,VueUse

VueUse官方链接

一、什么是VueUse

VueUse不是Vue.use,它是为Vue 2和3服务的一套Vue Composition API的常用工具集,是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式,省去程序员自己写相关代码。

VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说,这就是一个工具函数包支持了更好的逻辑分离,它可以帮助你快速实现一些常见的功能,免得你自己去写,解决重复的工作内容。以及进行了机遇 Composition API 的封装。

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 等的运用

来源:https://blog.csdn.net/qq_37174991/article/details/124092020

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com