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