beforecreate:實列創建之前。
created:實列創建完成。
beforeMount:掛載開始之前被調用。
mounted:實列掛載到Dom上
beforeupdate:響應式數據更新時調用
updated:虛擬dom重新渲染和打補丁之后調用
beforedestroy :實列銷毀之前調用
destroyed :實列銷毀后調用
四個執行 過程 create初始 Mount 加載 update更新 destroy銷毀
1beforeCreate()遇到的第一個生命周期函數表示實例完全被創建出來之前,會執行它
注事:在beforeCreate生命周期函數執行的時候,data和methods中的數據都還沒有沒初始化
2created(){}第二個生命周期data和methods 都已經被初始化好了!
如果要調用methods中的方法 或者操作data中的數據最早先用created方法
下來是vue開始編譯模板
--------------------------------------
這里表示Vue開始編輯模板,
|把Vue代碼中的那些指令進行執行,最終,
在內存中生成一個編譯好的最終模板字符串
然后,把這個模板字符串,渲染為內存中的DOM
此時,只是在內存中,追染好了模板,並沒有把模板
|掛載到真正的頁面中去;
---------------------------------------
3第三個生命周期函數:beforemont(){}
beforeMount(){ // 這是遇到的第3個生命周期函數,表示模板已經在內存中編輯完成了,但是尚未把模
板渲染到頁面中
/在beforeMount 執行的時候,頁面中的元素,還沒有被真正替換過來,只是之前寫的一些模板字符串
beforeMount在執行時 此函數執行的時候,模板已經在內存中編譯好了, 但是尚未掛載到頁面中去, 此時,頁
面還是舊的
下一步Create vm,Seland replace'el" with it
這-步,將內存中編譯好的模板,真實的
替換到瀏覽器的頁面中去;
mounted(){ // 這是遇到的第4個生命周期函數,表示,內存中的模板,已經真實的掛載到了頁面中,用戶
已經可以看到渲染好的頁面了
------------------------------------------
如果要通過某些插件操作頁面.上的DOM節
點了,最早要在mounted中進行
第四個生命周期:只要執行完了mounted , 就表示整個
Vue實例已經初始化完畢了;
此時,組件已經脫離了創建階段;
進入到了運行階段
下面
這些是組件運行階段的生命周期函數
只有兩個:
------------------------------------------
beforeUpdate和updated
第五個生命周期執行beforeUpdate的時候,頁面中的顯示的數據,還是舊的,此時data 數據是最
新的,頁面尚未和最新的數據保持同步
Virtmual DOM
re-render
and patch
這一步執行的是:先根據data中最新的數據,在內存中,重新渲染出-份最新的
內存DOM樹,
當最新的內存DOM樹被更新之后,會把最新的內存DOM樹,重新渲染到真實
的頁面中去,這時候,就完成了數據從data(Model層) > view(視圖層) 的更新
第六個生命周期:updated 事件執行的時候,頁面和data數據已經保持同步了,都是最新的
第七個生命周期:beforeDestroy
第八個生命周期:當執行beforeDestroy鈎子函數的時候, Vue實例就已經從運行階段,進入到了
銷毀階段;
當執行beforeDestroy 的時候,實例身上所有的data和所有的methods ,以
及過濾器、指令....都處於可用狀態,此時,還沒有真正執行銷毀的過程
第九個生命周期:destroyed
當執行到destroyed函數的時候,組件已
經被完全銷毀了,此時,組件中所有的數
據、方法,
指令、過濾器點都已經不可
用了