vue3中的hooks總結(jié)
更新時間：2022年05月30日 09:53:41 作者：賣菜的小白
這篇文章主要介紹了vue3中的hooks總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3的hooks總結(jié)
vue3中的hooks其實是函數(shù)的寫法，就是將文件的一些單獨功能的js代碼進行抽離出來，放到單獨的js文件中。這樣其實和我們在vue2中學(xué)的mixin比較像。下面我們總結(jié)一下如何去書寫hooks。
首先應(yīng)該先建立一個hooks文件夾：其目的是為了存放hook文件。
建立相關(guān)的hook文件：一般使用use開頭。
計數(shù)器的hook
useTitle的hooks
useScrollPostion用來監(jiān)測瀏覽器頁面的滾動情況
useMousemove監(jiān)聽鼠標(biāo)位置的hook
useLocalStorage可以本地存儲
vue3自定義hooks
- 自定義hooks就類似組件一樣只不過只封裝js，當(dāng)有一段js代碼需要復(fù)用可以把他封裝成一個hooks進行復(fù)用
- 需求，在別的頁面插入一個hooks實現(xiàn)記錄鼠標(biāo)點擊就的坐標(biāo)
可以在文件中建一個專門寫hooks的文件夾可以與 component同級
把需要復(fù)用的代碼寫在這個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(()=>{
//點擊的是窗口所以要給窗口定義點擊事件
window.addEventListener("click",myclick)
})
//這里需要有一個返回值，如果不給返回值接收的是一個函數(shù)，接收的是undefind
return points
}
寫完了hooks文件就可在別的地方引用了（可以跟別的代碼寫在一起）
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue基于electron構(gòu)建第一個程序過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了vue接入下載文件接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了手寫Vue彈窗Modal的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue.filter函數(shù)用于注冊一個全局的過濾器,該過濾器可以在模板和組件中使用,這篇文章主要介紹了vue?filter的幾種用法示例小結(jié),需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue?全選組件封裝,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue中pc移動滾動穿透問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要給大家介紹了關(guān)于Vue父子之間值傳遞的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
最近有一個項目需要用到地圖來展示位置并進行數(shù)據(jù)交互,用vue-baidu-map實現(xiàn)出來,下面這篇文章主要給大家介紹了關(guān)于Vue中Vue-Baidu-Map基本使用的相關(guān)資料,需要的朋友可以參考下2023-03-03
基于Vue實現(xiàn)Excel解析與導(dǎo)出功能詳解
導(dǎo)入導(dǎo)出excel這是前端做管理系統(tǒng)最常用的功能了,下面這篇文章主要給大家介紹了基于Vue實現(xiàn)Excel解析與導(dǎo)出功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue SSR 組件加載問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05