Vue3新玩具，讓你寫(xiě)出更好的vue3代碼
前言
鬼哥推薦大家,想更好寫(xiě)出優(yōu)秀vue3代碼的，記得一定要看看
尤大大在一次直播中提到了 VueUse 的一個(gè)庫(kù)。好奇了一下，點(diǎn)看看了看。好家伙啊， 我直接好家伙。這不就是曾經(jīng)我也想自己寫(xiě)一個(gè) vue 版的 hooks 庫(kù)嗎？（因?yàn)槲矣X(jué)得 vue3 和 hooks 太像了） 可是我還不太會(huì)， 你現(xiàn)在直接把我的夢(mèng)想給破滅了，下面我們一起來(lái)看看吧！
什么是 VueUse
VueUse 是一個(gè)基于 Composition API 的實(shí)用函數(shù)集合。通俗的來(lái)說(shuō)，這就是一個(gè)工具函數(shù)包，它可以幫助你快速實(shí)現(xiàn)一些常見(jiàn)的功能，免得你自己去寫(xiě)，解決重復(fù)的工作內(nèi)容。以及進(jìn)行了基于 Composition API 的封裝。讓你在 vue3 中更加得心應(yīng)手。
簡(jiǎn)單上手
安裝 VueUse
npm?i?@vueuse/core
使用 VueUse
//?導(dǎo)入
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 當(dāng)中導(dǎo)入了三個(gè)函數(shù)， useMouse， usePreferredDark， useLocalStorage。useMouse 是一個(gè)監(jiān)聽(tīng)當(dāng)前鼠標(biāo)坐標(biāo)的一個(gè)方法，他會(huì)實(shí)時(shí)的獲取鼠標(biāo)的當(dāng)前的位置。usePreferredDark 是一個(gè)判斷用戶(hù)是否喜歡深色的方法，他會(huì)實(shí)時(shí)的判斷用戶(hù)是否喜歡深色的主題。useLocalStorage 是一個(gè)用來(lái)持久化數(shù)據(jù)的方法，他會(huì)把數(shù)據(jù)持久化到本地存儲(chǔ)中。
還有我們熟悉的 防抖 和 節(jié)流
import?{?throttleFilter,?debounceFilter,?useLocalStorage,?useMouse?}?from?'@vueuse/core'
//?以節(jié)流的方式去改變?localStorage?的值
const?storage?=?useLocalStorage('my-key',?{?foo:?'bar'?},?{?eventFilter:?throttleFilter(1000)?})
//?100ms后更新鼠標(biāo)的位置
const?{?x,?y?}?=?useMouse({?eventFilter:?debounceFilter(100)?})
還有還有在 component 中使用的函數(shù)
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>