vue必須了解的生命週期

2021-10-23 16:16:02 字數 1888 閱讀 2511

什麼是vue生命週期

vue例項物件從建立到銷毀的過程,就是生命週期。從開始建立、初始化數 據、編譯模板、掛載dmo–>渲染、更新—>渲染、銷毀等一系列過程,稱之為vue的生命週期

首先,每個vue例項在被建立之前都要經過一系列的初始化過程,這個過程就是vue的生命週期。首先看一張圖吧(有標記),相信大家一定都會很熟悉

1、通過var vm = new vue({})建立乙個vue例項物件vm

2、初始化事件: 這裡只有一些預設的生命週期函式和預設的事件,其他的都還沒有建立

3、beforecreate執行時,data和methods都還沒有初始化

4、開始初始化data和methods。

5、created執行時,data和methods都已經存在了,但是還沒有掛載到介面去。

6、紅框中的內容表示vue開始編輯模板,把vue**中的那些指令進行執行,最終,在記憶體中生成乙個編譯好的最終的模板字串物件,然後把這個字串物件,渲染為記憶體中的dom,此時,只是在記憶體中渲染好了模板,並沒有把模板掛載到真正的頁面中去 。

7、beforemount函式執行時,模板已經在記憶體中編譯好了,但尚未掛載到頁面中去,此時,頁面還是舊的

8、將記憶體中編譯好的模板,真實的替換到瀏覽器的頁面中去

9、mounted是在頁面載入完成後執行的函式,如果要操作頁面上的dom節點,最早是在mounted中進行

10、執行完了mounted,就表示整個vue例項物件已經初始化完畢了,此時元件已經脫離建立階段,進入執行階段。

11、綠框中是元件的執行階段, 執行階段的宣告週期函式只有兩個:beforeupdataupdated,這兩個事件會根據data資料的改變,有選擇的觸發零到多次

12、當執行完beforeupdate時,頁面中顯示的資料還是舊的,此時data中的資料是最新的,頁面資料還沒有和data中最新資料同步

13、這一步,先根據data中最新的資料,在記憶體中,重新渲染出乙份最新的記憶體dom數,當記憶體dom數被更新之後,會把最新的記憶體dom樹,重新渲染到真實的頁面當中,這是,就完成資料從data(model層)->view(檢視層)的更新

14、updated執行時,頁面和data資料已經保持同步,都是最新的

15、當執行beforedestroy函式時,銷毀了vm和v層之間資料和方法(關係)的繫結。元件中所有data、methods、以及過濾器,指令等,都處於可用狀態,

16、當執行destroyed函式時,元件已經被銷毀,此時元件中所有data、methods、以及過濾器,指令等,都已經不可用了

需要傳送資料請求的話,一般是選擇在createdmounted這兩個階段

第一次載入頁面會觸發 beforecreate, created, beforemount, mounted這四個鉤子

vue生命週期的作用是什麼?

它的生命週期中有多個時間鉤子,讓我們在控制整個vue例項的過程時更容易形成好的邏輯

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...

vue生命週期

vue把整個生命週期劃分為建立 掛載 更新 銷毀等階段,每個階段都會給一些 鉤子 讓我們來做一些我們想實現的動作。學習例項的生命週期,能幫助我們理解vue例項的運作機制,更好地合理利用各個鉤子來完成我們的業務 我們分別來看看這幾個階段 1.beforecreate 此階段為例項初始化之後,此時的資料...

Vue 生命週期

import vue from vue el root 沒有的話,使用render,繼續沒有,就把el的outerhtml編譯成模板 template temp data beforecreate created el是原來的el beforemount 渲染函式 render h this.tex...