Vue2的生命週期

2021-10-09 11:28:45 字數 1158 閱讀 3228

vue 例項有乙個完整的生命週期,也就是從開始建立、初始化資料、編譯模版、掛載 dom -> 渲染、更新 -> 渲染、解除安裝等一系列過程,我們稱這是 vue 的生命週期。

生命週期

描述beforecreate

元件例項被建立之初,data 和 methods 中的資料還沒有初始化

created

元件例項已經完全建立,data 和 methods 都已經初始化好了

beforemount

模板渲染,相關的 render 函式首次被呼叫,模板已經在記憶體中編譯好了,但是尚未掛載到頁面中去

mounted

el 被新建立的 vm.el替

換,真實

dom已

經生成,

el 替換,真實 dom 已經生成,

el替換,真

實dom

已經生成

,el 可用,元件脫離建立階段,進入執行階段

beforeupdate

元件資料更新之前呼叫, 此時頁面中顯示的資料還是舊的,但 data 是最新的,頁面尚未和最新的資料保持同步

update

元件資料更新之後,頁面和 data 資料已經保持同步,都是最新的

beforedestory

元件銷毀前呼叫,vue 例項從執行階段進入到銷毀階段,這時 vue 例項身上所有都可用,還沒有真正執行銷毀

destoryed

元件銷毀後呼叫,vue 例項上的所有都不可以用了

activited

keep-alive 專屬,元件被啟用時呼叫,

deactivated

keep-alive 專屬,元件被銷毀時呼叫,

vue 的生命週期面試的時候大多人都可以說出來,但如果一問到每個生命週期具體發生了什麼,大部分人都回答不出來,所以真正理解生命週期才能在實際的工作中發揮每個生命週期的最大作用,這裡還要注意乙個問題:

如果只是單純的資料展示,在哪個生命週期請求最好,答案:created,能早當然早,何必非得等到mounted的時候再請求呢,那什麼情況下需要在mounted中請求呢,就是你需要操作dom的時候,這一塊也是面試過程中經常會被問到的乙個問題,需要仔細理解。

Vue2 詳解生命週期

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

vue2中監聽生命週期(hook)

很多人都知道,vue3中加入了hook的概念,讓我們 看的更為整齊,但是不少人卻不知道,其實vue2中已經有了 hook 的概念。下面就給大家說說vue2中怎麼使用hook 先上一段 大多數人在開發過程中都是這麼寫的,這麼寫不能說不好吧,但是 過分分散,很是雜亂,中間可能相差幾百行,可讀性相當差 下...

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...