vue3中的hooks總結
更新時間：2022年05月30日 09:53:41 作者：賣菜的小白
這篇文章主要介紹了vue3中的hooks總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3的hooks總結
vue3中的hooks其實是函數的寫法，就是將文件的一些單獨功能的js代碼進行抽離出來，放到單獨的js文件中。這樣其實和我們在vue2中學的mixin比較像。下面我們總結一下如何去書寫hooks。
首先應該先建立一個hooks文件夾：其目的是為了存放hook文件。
建立相關的hook文件：一般使用use開頭。
計數器的hook
useTitle的hooks
useScrollPostion用來監(jiān)測瀏覽器頁面的滾動情況
useMousemove監(jiān)聽鼠標位置的hook
useLocalStorage可以本地存儲
vue3自定義hooks
- 自定義hooks就類似組件一樣只不過只封裝js，當有一段js代碼需要復用可以把他封裝成一個hooks進行復用
- 需求，在別的頁面插入一個hooks實現記錄鼠標點擊就的坐標
可以在文件中建一個專門寫hooks的文件夾可以與 component同級
把需要復用的代碼寫在這個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)
})
//這里需要有一個返回值，如果不給返回值接收的是一個函數，接收的是undefind
return points
}
寫完了hooks文件就可在別的地方引用了（可以跟別的代碼寫在一起）
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
當協(xié)議,域名,端口其中某一個不一致的時候,就會產生跨域問題,下面這篇文章主要給大家介紹了關于Vue項目中該如何解決跨域問題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
vue3?TS?vite?element?ali-oss使用教程示例
這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
這篇文章主要介紹了Vuex的actions屬性的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
用Axios Element實現全局的請求loading的方法
本篇文章主要介紹了用Axios Element實現全局的請求loading的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
在我們使用 vue時，我們可以引用兩個不同版本的 Vue，分別是 Vue完整版（vue.js）和 Vue（vue.runtime.js ）非完整版，那么它們的區(qū)別是什么呢，今天我們就來分析下這兩個不同版本之間的區(qū)別，一起看看吧2020-02-02
今天小編就為大家分享一篇使用Vue.set()方法實現響應式修改數組數據步驟，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue+elementUI實現當渲染文本超出一定字數時顯示省略號
這篇文章主要介紹了vue+elementUI實現當渲染文本超出一定字數時顯示省略號,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章介紹了解決vue頁面刷新vuex中state數據丟失的問題，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項目，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了Vue 2.0 服務端渲染入門，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03