VueUse官方鏈接

一、什么是VueUse

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

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

VueUse不是Vue.use ?。?！它是一個基于 Composition API 的實用函數(shù)集合，下面是具體的一些用法

二、如何引入

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

三、下面來看看一些具體的用法

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

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

4、throttleFilter：節(jié)流 throttleFilter(100)
5、debounceFilter：防抖 debounceFilter(100)
6、OnClickOutside：在點擊元素外部時觸發(fā)一個回調(diào)函數(shù)
**注意：**這里的 OnClickOutside 函數(shù)是一個組件，不是一個函數(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 等的運用

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

最新評論