vue3中的hooks總結(jié)
vue3的hooks總結(jié)
vue3中的hooks其實(shí)是函數(shù)的寫(xiě)法，就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來(lái)，放到單獨(dú)的js文件中。這樣其實(shí)和我們?cè)趘ue2中學(xué)的mixin比較像。下面我們總結(jié)一下如何去書(shū)寫(xiě)hooks。
首先應(yīng)該先建立一個(gè)hooks文件夾：其目的是為了存放hook文件。
建立相關(guān)的hook文件：一般使用use開(kāi)頭。
計(jì)數(shù)器的hook
useTitle的hooks
useScrollPostion用來(lái)監(jiān)測(cè)瀏覽器頁(yè)面的滾動(dòng)情況
useMousemove監(jiān)聽(tīng)鼠標(biāo)位置的hook
useLocalStorage可以本地存儲(chǔ)
vue3自定義hooks
- 自定義hooks就類似組件一樣只不過(guò)只封裝js，當(dāng)有一段js代碼需要復(fù)用可以把他封裝成一個(gè)hooks進(jìn)行復(fù)用
- 需求，在別的頁(yè)面插入一個(gè)hooks實(shí)現(xiàn)記錄鼠標(biāo)點(diǎn)擊就的坐標(biāo)
可以在文件中建一個(gè)專門(mén)寫(xiě)hooks的文件夾可以與 component同級(jí)
把需要復(fù)用的代碼寫(xiě)在這個(gè)js文件中
import { reactive } from '@vue/reactivity'
import{onMounted} from 'vue'
export default function(){
let points=reactive({
x:0,
y:0
})
function myclick(event){
points.x=event.pageX
points.y=event.pageY
}
onMounted(()=>{
//點(diǎn)擊的是窗口所以要給窗口定義點(diǎn)擊事件
window.addEventListener("click",myclick)
})
//這里需要有一個(gè)返回值，如果不給返回值接收的是一個(gè)函數(shù)，接收的是undefind
return points
}
寫(xiě)完了hooks文件就可在別的地方引用了（可以跟別的代碼寫(xiě)在一起）
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?接入?i18n?實(shí)現(xiàn)國(guó)際化多語(yǔ)言案例分析
在?Vue.js?3?中實(shí)現(xiàn)網(wǎng)頁(yè)的國(guó)際化多語(yǔ)言,最常用的包是?vue-i18n,通常我們會(huì)與?vue-i18n-routing?一起使用,這篇文章主要介紹了Vue3?如何接入?i18n?實(shí)現(xiàn)國(guó)際化多語(yǔ)言,需要的朋友可以參考下2024-07-07
vue與django(drf)實(shí)現(xiàn)文件上傳下載功能全過(guò)程
最近簡(jiǎn)單的學(xué)習(xí)了django和drf上傳文件(主要是圖片),做一個(gè)記錄,下面這篇文章主要給大家介紹了關(guān)于vue與django(drf)實(shí)現(xiàn)文件上傳下載功能的相關(guān)資料,需要的朋友可以參考下2023-02-02
前端設(shè)置cookie之vue-cookies使用及說(shuō)明
這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了優(yōu)化Vue中date format的性能詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了vue與iframe之間的交互方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue-cli中打包圖片路徑錯(cuò)誤的解決方法 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Vue3 登錄狀態(tài)持久化方案詳解(Token 是什么)
本文給大家介紹Vue3登錄狀態(tài)持久化方案詳解包括Token 是什么的相關(guān)知識(shí),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2026-02-02
Vue使用Print.js打印div方式(選中區(qū)域的html)
這篇文章主要介紹了Vue使用Print.js打印div方式(選中區(qū)域的html),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue pages.json頁(yè)面路由中g(shù)lobalStyle的各個(gè)屬性詳解
文章總結(jié)介紹小程序頁(yè)面配置屬性,包括導(dǎo)航欄背景色（限十六進(jìn)制）、標(biāo)題顏色（支持white/black）、標(biāo)題文字（頁(yè)面級(jí)覆蓋全局）、導(dǎo)航欄顯示隱藏（default/custom）、下拉刷新設(shè)置（微信專用）及觸底函數(shù)觸發(fā)距離,感興趣的朋友一起看看吧2025-07-07
這篇文章主要為大家分享了一個(gè)非常實(shí)用的vue導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03