1、常用生命周期函數(shù)
生命周期函數(shù)就是vue實(shí)例在某一個時間點(diǎn)會自動執(zhí)行的函數(shù)
生命周期: Vue是一個構(gòu)造函數(shù)劈榨,當(dāng)執(zhí)行執(zhí)行這個函數(shù)時刹孔,相當(dāng)于初始化vue實(shí)例泳秀;
在創(chuàng)建實(shí)例過程中桌吃,需要設(shè)置數(shù)據(jù)監(jiān)聽,編譯模板苞轿,將實(shí)例掛載到DOM上茅诱,數(shù)據(jù)更新能夠讓DOM也更新,
在這個初始化搬卒,又會不同階段默認(rèn)調(diào)用一些函數(shù)執(zhí)行瑟俭,這些函數(shù)就是生命周期的鉤子函數(shù);
1契邀、beforeCreate 剛剛初始化了一個vue空的實(shí)例對象摆寄,這時候,對象上坯门,只有默認(rèn)的一些生命周期函數(shù)和默認(rèn)事件微饥,data和methods中的數(shù)據(jù)還沒有被初始化。
2古戴、created data和methods都已經(jīng)被初始化好了欠橘,如果調(diào)用methods中的方法和操作data中的數(shù)據(jù)最早只能在created中
3、beforeMount 這一步的時候现恼,模版已經(jīng)在內(nèi)存中編譯好了肃续,但是尚未掛載到頁面中去黍檩,此時,頁面還是舊的始锚。
4刽酱、mounted 這一步 將內(nèi)存中編譯好的模版,替換到瀏覽器的頁面中去瞧捌,如果需要操作頁面上的DOM元素最早需要再mounted中進(jìn)行棵里。
5、beforeUpdated 這一步 頁面中顯示的數(shù)據(jù)還是舊的察郁,但是data中的數(shù)據(jù)是最新的衍慎,頁面尚未更新。這里會先根據(jù)data中最新的數(shù)據(jù)皮钠,在內(nèi)存中稳捆,重新渲染出一份 最新的虛擬DOM樹,當(dāng)虛擬DOM樹跟新后麦轰,會把最新的虛擬DOM渲染到頁面中去乔夯。完成從model-》view的更新。
6款侵、updated 這一步 頁面和打他數(shù)據(jù)已經(jīng)保持同步了末荐,都是最新的。
組件的生命周期函數(shù)只有beforeUpdated和updated新锈。
7甲脏、beforeDestroy 這一步 vue實(shí)例已經(jīng)從運(yùn)行階段進(jìn)入到銷毀階段,但是此時data和所有的methods妹笆,以及過濾器块请,指令還處于可用狀態(tài),沒有真正的銷毀拳缠。
8墩新、destroyed 此時 組件已經(jīng)完全被銷毀,此時data和methods窟坐,過濾器海渊,指令都已經(jīng)不可用了。