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

Posted on by

VueUse官方鏈接

一、什麼是VueUse

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

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

VueUse不是Vue.use ！！！它是一個基於 Composition API 的實用函數集合，下面是具體的一些用法

二、如何引入

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

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

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

useLocalStorage(
‘my-storage',
{
name: ‘author',
},
)

4、throttleFilter：節流 throttleFilter(100)
5、debounceFilter：防抖 debounceFilter(100)
6、OnClickOutside：在點擊元素外部時觸發一個回調函數
**註意：**這裡的 OnClickOutside 函數是一個組件，不是一個函數。需要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、全局狀態共享的函數
createGlobalState
useStorage

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

到此這篇關於vue新玩法VueUse工具庫@vueuse/core詳解的文章就介紹到這瞭,更多相關vue VueUse工具庫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：