VUE 生命週期函式

2022-09-08 14:42:16 字數 903 閱讀 5853

new乙個vue例項  過程中 會執行各種各樣的事件 事件有各自不同的作用

從vue例項建立(new的過程),執行,銷毀期間 伴隨各種各樣的事件 統稱為例項生命週期事件

vue例項在某乙個時間點上自動執行的函式

new vue()

vue例項基礎的初始化

自動呼叫第乙個生命週期函式 beforecreate()data資料沒有初始化,值為undefined

methods中的資料沒有初始化

掛載點el為undefined

init data和methods

自動呼叫第二個生命週期函式 create()data和methods都已經初始化好了(可以呼叫方法,和操作data中的資料了) 

$el還沒有

模版編譯(只在記憶體中,沒有放在頁面中)vue**中的指令執行,最終在記憶體中生生成乙個編譯好的最終模板字串,渲染為記憶體中的虛擬dom,只是在記憶體中渲染好模板,並沒有掛載到真正的頁面中

自動呼叫第三個生命週期函式 beforemounted()頁面中的元素還沒有被替換,還是之前寫的模板字串

記憶體中編譯好的模板放到頁面當中去

自動呼叫第四個生命週期函式 mounted()//使用者已經可以看到渲染好的頁面,此時沒有別的操作的化,這個例項就會躺在記憶體中一動不動 

當資料改變時還沒渲染頁面,會觸發beforeupdate和updated方法

在執行destroy方法後,對data的改變不會再觸發週期函式,說明此時vue例項已經解除了事件監聽以及和dom的繫結,但是dom結構依然存在    

vue 生命週期函式

什麼是生命週期 從vue例項建立 執行 到銷毀期間,總是伴隨著各種各樣的事件,這些事件,統稱為生命週期!生命週期鉤子 就是生命週期事件的別名而已 生命週期鉤子 生命週期函式 生命週期事件 主要的生命週期函式分類 建立期間的生命週期函式 beforecreate 例項剛在記憶體中被建立出來,此時,還沒...

vue 生命週期函式

每個鉤子函式都在什麼時間觸發 1.beforecreate 在例項初始化之後,資料觀測 data observer 和 event watcher 事件配置之前被呼叫。2.created 3.beforemount 在掛載開始之前被呼叫 相關的 render 函式首次被呼叫。4.mounted el...

vue生命週期函式

從vue例項建立 執行到銷毀期間總會伴隨各種各樣的事件,這些事件統稱為生命週期。1 beforecreate 在beforecreate生命週期執行的時候,data和method中的資料都還沒有被初始化。2 ceated 在created中data和methods都已經初始化好了。3 beforem...