vue新玩法VueUse工具庫具體用法@vueuse/core詳解
VueUse官方鏈接
一、什么是VueUse
VueUse不是Vue.use，它是為Vue 2和3服務(wù)的一套Vue Composition API的常用工具集，是目前世界上Star最高的同類型庫之一。它的初衷就是將一切原本并不支持響應(yīng)式的JS API變得支持響應(yīng)式，省去程序員自己寫相關(guān)代碼。
VueUse 是一個(gè)基于 Composition API 的實(shí)用函數(shù)集合。通俗的來說，這就是一個(gè)工具函數(shù)包支持了更好的邏輯分離，它可以幫助你快速實(shí)現(xiàn)一些常見的功能，免得你自己去寫，解決重復(fù)的工作內(nèi)容。以及進(jìn)行了機(jī)遇 Composition API 的封裝。
VueUse不是Vue.use ！??！它是一個(gè)基于 Composition API 的實(shí)用函數(shù)集合，下面是具體的一些用法
二、如何引入
import { 具體方法 } from ‘@vueuse/core’
三、下面來看看一些具體的用法
1、useMouse：監(jiān)聽當(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工具庫@vueuse/core詳解的文章就介紹到這了,更多相關(guān)vue VueUse工具庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了element表格去掉表頭的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
watch 函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于Vue3中watch監(jiān)聽使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue Router動(dòng)態(tài)路由使用方法總結(jié)
這篇文章主要介紹了Vue Router動(dòng)態(tài)路由使用方法總結(jié),需要的朋友可以參考下2023-10-10
小編給大家整理了關(guān)于vue移動(dòng)端日期選擇組件的知識(shí)點(diǎn)總結(jié)，希望能夠給讀者帶來幫助，一起學(xué)習(xí)參考下。2018-02-02
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對象的常見操作技巧,需要的朋友可以參考下2019-02-02
vue如何實(shí)現(xiàn)動(dòng)態(tài)的選中狀態(tài)切換效果
這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)的選中狀態(tài)切換效果，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
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è)語法糖,數(shù)據(jù)的雙向綁定,本質(zhì)上還是通過 自定義標(biāo)簽的attribute傳遞和接受,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3設(shè)計(jì)實(shí)現(xiàn)一個(gè)Model組件的相關(guān)資料,需要的朋友可以參考下2022-08-08
今天小編就為大家分享一篇vue項(xiàng)目引入字體.ttf的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09