vue2中監聽生命週期(hook)

2022-06-12 02:06:11 字數 685 閱讀 3044

很多人都知道,vue3中加入了hook的概念,讓我們**看的更為整齊,但是不少人卻不知道,其實vue2中已經有了'hook'的概念。下面就給大家說說vue2中怎麼使用hook

先上一段**,大多數人在開發過程中都是這麼寫的,這麼寫不能說不好吧,但是**過分分散,很是雜亂,中間可能相差幾百行,可讀性相當差

下面,本次重點來了:集合!

我們可以借助hook對**整合,如下:

這麼看可讀性一下子就好了,**也更加集中,別人在改的時候也不至於一下子翻到下半屏,一下上半屏

在vue元件中,可以用過$on,$once去監聽所有的生命週期鉤子函式,如監聽元件的updated鉤子函式可以寫成 this.$on('hook:updated', () => {})

再來說第二種場景吧,假如你用了第三方的 元件,想在第三方元件資料變化時進行一些操作,而這個元件正好沒有提供change方法

這時候應該怎麼辦?當然最好是可以深入元件去修改。但是假如第三方元件又是打包過後的**呢?痛苦的去看麼?

不,我來教你乙個新的神器

外部監聽生命週期函式

"handleupdatechange

" />

好了,本次分享結束。get到了麼?拿去裝逼吧

Vue2 詳解生命週期

最近使用vue2做了乙個專案,生命週期鉤子分別是 beforecreate 例項剛建立,屬性繫結之前 created 例項建立完成,屬性繫結,但是還未將例項掛載到 el 上,也就是掛載元素上。beforemount 模板編譯 掛載前 mounted 模板編譯 掛載之後 在mounted請求資料時,將...

Vue2的生命週期

vue 例項有乙個完整的生命週期,也就是從開始建立 初始化資料 編譯模版 掛載 dom 渲染 更新 渲染 解除安裝等一系列過程,我們稱這是 vue 的生命週期。生命週期 描述beforecreate 元件例項被建立之初,data 和 methods 中的資料還沒有初始化 created 元件例項已經...

Vue2 生命週期 lifecycle

出處 我的github部落格 doctype html html head title welcome to vue title script src script head body div id div script var newvue beforecreate created beforem...