vue新玩法VueUse工具库具体用法@vueuse/core详解
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 等的运用
到此这篇关于vue新玩法VueUse工具库@vueuse/core详解的文章就介绍到这了,更多相关vue VueUse工具库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3实现手机上可拖拽元素的组件，用vue3实现一个可在手机上拖拽元素的组件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕边缘2022-09-09
这篇文章主要介绍了vue+element UI实现树形表格带复选框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue3新拟态组件库开发流程——table组件源码,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了vue+Element-ui实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
这篇文章主要介绍了vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用） ,需要的朋友可以参考下2018-11-11
ElementUI 详细分析DatePicker 日期选择器实战
这篇文章主要介绍了ElementUI详细分析DatePicker 日期选择器实战教程,本文通过实例代码图文介绍给大家讲解的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
vue3项目vite.config.js配置代理、端口、打包名以及图片压缩
这篇文章主要给大家介绍了关于vue3项目vite.config.js配置代理、端口、打包名以及图片压缩的相关资料,因为3.0版本中vue已经内置了很多关于webpack的配置,一般情况下开箱即用,需要修改则可以在vue.config.js文件中完成,需要的朋友可以参考下2023-12-12
最近在项目中遇到点击按钮复制链接功能,所以这篇文章主要给大家介绍了关于vue粘贴复制功能的实现过程,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
最新评论