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就類(lèi)似組件一樣只不過(guò)只封裝js，當(dāng)有一段js代碼需要復(fù)用可以把他封裝成一個(gè)hooks進(jìn)行復(fù)用
需求，在別的頁(yè)面插入一個(gè)hooks實(shí)現(xiàn)記錄鼠標(biāo)點(diǎn)擊就的坐標(biāo)

可以在文件中建一個(gè)專(zhuān)門(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3
hooks

相關(guān)文章

Vue項(xiàng)目中該如何解決跨域問(wèn)題
當(dāng)協(xié)議,域名,端口其中某一個(gè)不一致的時(shí)候,就會(huì)產(chǎn)生跨域問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中該如何解決跨域問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
vue3?TS?vite?element?ali-oss使用教程示例
這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-07-07
Vuex的actions屬性的具體使用
這篇文章主要介紹了Vuex的actions屬性的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
用Axios Element實(shí)現(xiàn)全局的請(qǐng)求loading的方法
本篇文章主要介紹了用Axios Element實(shí)現(xiàn)全局的請(qǐng)求loading的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)
在我們使用 vue時(shí)，我們可以引用兩個(gè)不同版本的 Vue，分別是 Vue完整版（vue.js）和 Vue（vue.runtime.js ）非完整版，那么它們的區(qū)別是什么呢，今天我們就來(lái)分析下這兩個(gè)不同版本之間的區(qū)別，一起看看吧
2020-02-02
使用Vue.set()方法實(shí)現(xiàn)響應(yīng)式修改數(shù)組數(shù)據(jù)步驟
今天小編就為大家分享一篇使用Vue.set()方法實(shí)現(xiàn)響應(yīng)式修改數(shù)組數(shù)據(jù)步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào)
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
解決vue頁(yè)面刷新vuex中state數(shù)據(jù)丟失的問(wèn)題
這篇文章介紹了解決vue頁(yè)面刷新vuex中state數(shù)據(jù)丟失的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-01-01
五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目(新手入門(mén))
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue 2.0 服務(wù)端渲染入門(mén)介紹
本篇文章主要介紹了Vue 2.0 服務(wù)端渲染入門(mén)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03