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最高的同類型庫(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：判斷用戶是否喜歡深色的方法，他會(huì)實(shí)時(shí)的判斷用戶是否喜歡深色的主題
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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue
VueUse

相關(guān)文章

element表格去掉表頭的實(shí)現(xiàn)方法
本文主要介紹了element表格去掉表頭的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue3中watch監(jiān)聽(tīng)使用詳解
watch 函數(shù)用來(lái)偵聽(tīng)特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于Vue3中watch監(jiān)聽(tīng)使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue實(shí)現(xiàn)表格分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue Router動(dòng)態(tài)路由使用方法總結(jié)
這篇文章主要介紹了Vue Router動(dòng)態(tài)路由使用方法總結(jié),需要的朋友可以參考下
2023-10-10
詳解vue移動(dòng)端日期選擇組件
小編給大家整理了關(guān)于vue移動(dòng)端日期選擇組件的知識(shí)點(diǎn)總結(jié)，希望能夠給讀者帶來(lái)幫助，一起學(xué)習(xí)參考下。
2018-02-02
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見(jiàn)方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見(jiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對(duì)象的常見(jiàn)操作技巧,需要的朋友可以參考下
2019-02-02
vue如何實(shí)現(xiàn)動(dòng)態(tài)的選中狀態(tài)切換效果
這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)的選中狀態(tài)切換效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue-devtools的安裝與使用教程
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝與使用教程,需要的朋友可以參考下
2023-03-03
如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個(gè)Model組件淺析
v-model在Vue里面是一個(gè)語(yǔ)法糖,數(shù)據(jù)的雙向綁定,本質(zhì)上還是通過(guò) 自定義標(biāo)簽的attribute傳遞和接受,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個(gè)Model組件的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue項(xiàng)目引入字體.ttf的方法
今天小編就為大家分享一篇vue項(xiàng)目引入字體.ttf的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09