|
前言
上次在看前端早早聊大会中， 尤大大再一次提到了 VueUse 的一个库。 好奇了一下，点看看了看。好家伙啊， 我直接好家伙。这不就是曾经我也想自己写一个 vue 版的 hooks 库吗？（因为我觉得 vue3 和 hooks 太像了） 可是我还不太会， 你现在直接把我的梦想给破灭了，下面我们一起来看看吧！VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bilibili
什么是 VueUse
VueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式，省去程序员自己写相关代码。 VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了机遇 Composition API 的封装。让你在 vue3 中更加得心应手。
简单上手
安装 VueUse
使用 VueUse
// 导入import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'export default { setup() { // tracks mouse position const { x, y } = useMouse() // is user prefers dark theme const isDark = usePreferredDark() // persist state in localStorage const store = useLocalStorage( 'my-storage', { name: 'Apple', color: 'red', }, ) return { x, y, isDark, store } }}上面从 VueUse 当中导入了三个函数， useMouse， usePreferredDark， useLocalStorage。useMouse 是一个监听当前鼠标坐标的一个方法，他会实时的获取鼠标的当前的位置。usePreferredDark 是一个判断用户是否喜欢深色的方法，他会实时的判断用户是否喜欢深色的主题。useLocalStorage 是一个用来持久化数据的方法，他会把数据持久化到本地存储中。
还有我们熟悉的 防抖 和 节流
import { throttleFilter, debounceFilter, useLocalStorage, useMouse } from '@vueuse/core'// 以节流的方式去改变 localStorage 的值const storage = useLocalStorage('my-key', { foo: 'bar' }, { eventFilter: throttleFilter(1000) })// 100ms后更新鼠标的位置const { x, y } = useMouse({ eventFilter: debounceFilter(100) })还有还有在 component 中使用的函数
<script setup>import { ref } from 'vue'import { onClickOutside } from '@vueuse/core'const el = ref()function close () { /* ... */}onClickOutside(el, close)</script><template> <div ref="el"> Click Outside of Me </div></template>上面例子中，使用了 onClickOutside 函数，这个函数会在点击元素外部时触发一个回调函数。也就是这里的 close 函数。在 component 中就是这么使用
<script setup>import { OnClickOutside } from '@vueuse/components'function close () { /* ... */}</script><template> <OnClickOutside @trigger="close"> <div> Click Outside of Me </div> </OnClickOutside></template>注意⚠️ 这里的 OnClickOutside 函数是一个组件，不是一个函数。需要package.json 中安装了 @vueuse/components。
还还有全局状态共享的函数
// store.jsimport { createGlobalState, useStorage } from '@vueuse/core'export const useGlobalState = createGlobalState( () => useStorage('vue-use-local-storage'),)// component.jsimport { useGlobalState } from './store'export default defineComponent({ setup() { const state = useGlobalState() return { state } },})这样子就是一个简单的状态共享了。扩展一下。传一个参数，就能改变 store 的值了。
还有关于 fetch, 下面👇就是一个简单的请求了。
import { useFetch } from '@vueuse/core'const { isFetching, error, data } = useFetch(url)它还有很多的 option 参数，可以自定义。
// 100ms超时const { data } = useFetch(url, { timeout: 100 })// 请求拦截const { data } = useFetch(url, { async beforeFetch({ url, options, cancel }) { const myToken = await getMyToken() if (!myToken) cancel() options.headers = { ...options.headers, Authorization: `Bearer ${myToken}`, } return { options } }})// 响应拦截const { data } = useFetch(url, { afterFetch(ctx) { if (ctx.data.title === 'HxH') ctx.data.title = 'Hunter x Hunter' // Modifies the resposne data return ctx },})
更多
更多还的看VueUse 文档，还有另一个vue-demi 到此这篇关于Vue新玩具VueUse的具体用法的文章就介绍到这了,更多相关Vue VueUse内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
Vuex模块化和命名空间namespaced实例演示
5个可以加速开发的VueUse函数库(小结) |
