快捷導(dǎo)航

vue新玩法VueUse工具庫(kù)具體用法@vueuse/core詳解

更新時(shí)間：2022年08月19日 11:26:30 作者：渣男語(yǔ)錄

這篇文章主要介紹了vue新玩法VueUse-工具庫(kù)@vueuse/core,VueUse不是Vue.use，它是一個(gè)基于?Composition?API?的實(shí)用函數(shù)集合，下面是具體的一些用法，需要的朋友可以參考下

VueUse官方鏈接

一、什么是VueUse

VueUse不是Vue.use，它是為Vue 2和3服務(wù)的一套Vue Composition API的常用工具集，是目前世界上Star最高的同類(lèi)型庫(kù)之一。它的初衷就是將一切原本并不支持響應(yīng)式的JS API變得支持響應(yīng)式，省去程序員自己寫(xiě)相關(guān)代碼。

VueUse 是一個(gè)基于 Composition API 的實(shí)用函數(shù)集合。通俗的來(lái)說(shuō)，這就是一個(gè)工具函數(shù)包支持了更好的邏輯分離，它可以幫助你快速實(shí)現(xiàn)一些常見(jiàn)的功能，免得你自己去寫(xiě)，解決重復(fù)的工作內(nèi)容。以及進(jìn)行了機(jī)遇 Composition API 的封裝。

VueUse不是Vue.use ！?。∷且粋€(gè)基于 Composition API 的實(shí)用函數(shù)集合，下面是具體的一些用法

二、如何引入

import { 具體方法 } from ‘@vueuse/core’

三、下面來(lái)看看一些具體的用法

1、useMouse：監(jiān)聽(tīng)當(dāng)前鼠標(biāo)坐標(biāo)的一個(gè)方法，他會(huì)實(shí)時(shí)的獲取鼠標(biāo)的當(dāng)前的位置
2、usePreferredDark：判斷用戶(hù)是否喜歡深色的方法，他會(huì)實(shí)時(shí)的判斷用戶(hù)是否喜歡深色的主題
3、useLocalStorage：數(shù)據(jù)持久化到本地存儲(chǔ)中例子：

useLocalStorage(
‘my-storage',
{
name: ‘a(chǎn)uthor',
},
)

4、throttleFilter：節(jié)流 throttleFilter(100)
5、debounceFilter：防抖 debounceFilter(100)
6、OnClickOutside：在點(diǎn)擊元素外部時(shí)觸發(fā)一個(gè)回調(diào)函數(shù)
**注意：**這里的 OnClickOutside 函數(shù)是一個(gè)組件，不是一個(gè)函數(shù)。需要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、全局狀態(tài)共享的函數(shù)
createGlobalState
useStorage

8、其他具體的方法可以看文檔：例如 until 等的運(yùn)用

到此這篇關(guān)于vue新玩法VueUse工具庫(kù)@vueuse/core詳解的文章就介紹到這了,更多相關(guān)vue VueUse工具庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: