Vue新玩具VueUse

点击上方 前端Q&＃xff0c;关注公众号

回复加群&＃xff0c;加入前端Q技术交流群

前言

上次在看前端早早聊大会中&＃xff0c; 尤大大再一次提到了 VueUse 的一个库。好奇了一下&＃xff0c;点看看了看。好家伙啊&＃xff0c; 我直接好家伙。这不就是曾经我也想自己写一个 vue 版的 hooks 库吗&＃xff1f;&＃xff08;因为我觉得 vue3 和 hooks 太像了&＃xff09; 可是我还不太会&＃xff0c; 你现在直接把我的梦想给破灭了&＃xff0c;下面我们一起来看看吧&＃xff01;VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bilibili

长按识别二维码查看原文

什么是 VueUse

VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说&＃xff0c;这就是一个工具函数包&＃xff0c;它可以帮助你快速实现一些常见的功能&＃xff0c;免得你自己去写&＃xff0c;解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。

简单上手

安装 VueUse

npm i &＃64;vueuse/core

使用 VueUse

// 导入
import { useMouse, usePreferredDark, useLocalStorage } from &＃39;&＃64;vueuse/core&＃39;export default {setup() {// tracks mouse positionconst { x, y } &＃61; useMouse()// is user prefers dark themeconst isDark &＃61; usePreferredDark()// persist state in localStorageconst store &＃61; useLocalStorage(&＃39;my-storage&＃39;,{name: &＃39;Apple&＃39;,color: &＃39;red&＃39;,},)return { x, y, isDark, store }}
}

上面从 VueUse 当中导入了三个函数&＃xff0c; useMouse&＃xff0c; usePreferredDark&＃xff0c; useLocalStorage。useMouse 是一个监听当前鼠标坐标的一个方法&＃xff0c;他会实时的获取鼠标的当前的位置。usePreferredDark 是一个判断用户是否喜欢深色的方法&＃xff0c;他会实时的判断用户是否喜欢深色的主题。useLocalStorage 是一个用来持久化数据的方法&＃xff0c;他会把数据持久化到本地存储中。

还有我们熟悉的 「防抖」 和 「节流」

import { throttleFilter, debounceFilter, useLocalStorage, useMouse } from &＃39;&＃64;vueuse/core&＃39;// 以节流的方式去改变 localStorage 的值
const storage &＃61; useLocalStorage(&＃39;my-key&＃39;, { foo: &＃39;bar&＃39; }, { eventFilter: throttleFilter(1000) })// 100ms后更新鼠标的位置
const { x, y } &＃61; useMouse({ eventFilter: debounceFilter(100) })

还有还有在 component 中使用的函数

上面例子中&＃xff0c;使用了 onClickOutside 函数&＃xff0c;这个函数会在点击元素外部时触发一个回调函数。也就是这里的 close 函数。在 component 中就是这么使用

注意⚠️ 这里的 OnClickOutside 函数是一个组件&＃xff0c;不是一个函数。需要package.json 中安装了 &＃64;vueuse/components。

还还有全局状态共享的函数

// store.js
import { createGlobalState, useStorage } from &＃39;&＃64;vueuse/core&＃39;export const useGlobalState &＃61; createGlobalState(() &＃61;> useStorage(&＃39;vue-use-local-storage&＃39;),
)

// component.js
import { useGlobalState } from &＃39;./store&＃39;export default defineComponent({setup() {const state &＃61; useGlobalState()return { state }},
})

这样子就是一个简单的状态共享了。扩展一下。传一个参数&＃xff0c;就能改变 store 的值了。

还有关于 fetch, 下面&＃x1f447;就是一个简单的请求了。

import { useFetch } from &＃39;&＃64;vueuse/core&＃39;const { isFetching, error, data } &＃61; useFetch(url)

它还有很多的 option 参数&＃xff0c;可以自定义。

// 100ms超时
const { data } &＃61; useFetch(url, { timeout: 100 })

// 请求拦截
const { data } &＃61; useFetch(url, {async beforeFetch({ url, options, cancel }) {const myToken &＃61; await getMyToken()if (!myToken)cancel()options.headers &＃61; {...options.headers,Authorization: &＃96;Bearer ${myToken}&＃96;,}return {options}}
})

// 响应拦截
const { data } &＃61; useFetch(url, {afterFetch(ctx) {if (ctx.data.title &＃61;&＃61;&＃61; &＃39;HxH&＃39;)ctx.data.title &＃61; &＃39;Hunter x Hunter&＃39; // Modifies the resposne datareturn ctx},
})

更多

更多还的看VueUse 文档&＃xff0c;还有另一个项目&＃xff0c;说不定你就需要 vue-demi

长按识别二维码查看原文

长按识别二维码查看原文

作者&＃xff1a;我只是一个小菜鸡

原文链接&＃xff1a;https://juejin.cn/post/7029699344596992031

往期推荐

大厂面试过程复盘(微信/阿里/头条,附答案篇)

面试题&＃xff1a;说说事件循环机制(满分答案来了)

专心工作只想搞钱的前端女程序员的2020

最后

• 欢迎加我微信&＃xff0c;拉你进技术群&＃xff0c;长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端&＃xff0c;做个专业的技术人...

点个在看支持我吧