大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
前言
上次在看前端早早聊大会中, 尤大大再一次提到了 VueUse
的一个库。好奇了一下,点看看了看。好家伙啊, 我直接好家伙。这不就是曾经我也想自己写一个 vue
版的 hooks
库吗?(因为我觉得 vue3
和 hooks
太像了) 可是我还不太会, 你现在直接把我的梦想给破灭了,下面我们一起来看看吧!VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bilibili
长按识别二维码查看原文
https://www.bilibili.com/video/BV1x54y1V7H6
什么是 VueUse
VueUse
是一个基于 Composition API
的实用函数集合。通俗的来说,这就是一个工具函数包,它可以帮助你快速实现一些常见的功能,免得你自己去写,解决重复的工作内容。以及进行了基于 Composition API
的封装。让你在 vue3
中更加得心应手。
简单上手
安装 VueUse
npm i @vueuse/core
使用 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>
<section ref="el">
Click Outside of Me
</section>
</template>
上面例子中,使用了 onClickOutside
函数,这个函数会在点击元素外部时触发一个回调函数。也就是这里的 close
函数。在 component
中就是这么使用
<script setup>
import { OnClickOutside } from '@vueuse/components'
function close () {
/* ... */
}
</script>
<template>
<OnClickOutside @trigger="close">
<section>
Click Outside of Me
</section>
</OnClickOutside>
</template>
注意⚠️ 这里的
OnClickOutside
函数是一个组件,不是一个函数。需要package.json
中安装了@vueuse/components
。
还还有全局状态共享的函数
// store.js
import { createGlobalState, useStorage } from '@vueuse/core'
export const useGlobalState = createGlobalState(
() => useStorage('vue-use-local-storage'),
)
// component.js
import { 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
长按识别二维码查看原文
https://vueuse.org/
长按识别二维码查看原文
https://github.com/vueuse/vue-demi
作者:我只是一个小菜鸡
原文链接:https://juejin.cn/post/7029699344596992031
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一波👍