Vue官方文檔： 實(shí)例方法 / 生命周期
什么是Vue的生命周期症见？
從Vue實(shí)例創(chuàng)建株婴、運(yùn)行珊随、到銷毀期間寄猩，總是伴隨著各種各樣的事件，這些事件陨倡，統(tǒng)稱為生命周期敛滋。
生命周期鉤子
在Vue生命周期中，從出生到消亡之中會伴隨多個事件鉤子兴革，這些事件鉤子可以讓我們在整個Vue實(shí)例的不同階段里添加自己需要的邏輯绎晃。
Vue生命周期主要分為 ： 初始化前后、創(chuàng)建前后杂曲、更新前后庶艾、銷毀前后。
生命周期圖示
生命周期
依照上圖來簡單說明一下Vue的生命周期以及鉤子函數(shù)：
- Vue的生命周期從創(chuàng)建一個Vue實(shí)例開始解阅，隨后進(jìn)行初始化事件和初始化生命周期落竹。
- 執(zhí)行
beforeCreate鉤子函數(shù)。這個函數(shù)執(zhí)行在初始化之后货抄，創(chuàng)建組件之前述召，元素dom和數(shù)據(jù)都還沒有初始化，所以還不能訪問數(shù)據(jù)蟹地，組件中的data积暖，ref都為undefind。 - 在初始化結(jié)束后執(zhí)行
created函數(shù)怪与，這時數(shù)據(jù)data已經(jīng)初始化完成夺刑，方法也已經(jīng)可以調(diào)用。但是dom還未掛載分别，在這個周期里面如果進(jìn)行請求是可以改變數(shù)據(jù)并渲染的遍愿，請求過多或者占用時間過長會導(dǎo)致頁面線上空白。
在這個階段 往往發(fā)送數(shù)據(jù)(ajax)請求耘斩，http請求沼填。 - 進(jìn)行編譯選項(xiàng)，是否有el或template括授，再根據(jù)編譯選項(xiàng)作為模板將數(shù)據(jù)和compile函數(shù)(編譯函數(shù))進(jìn)行結(jié)合坞笙，創(chuàng)建出虛擬DOM對象。
以上初始化階段完成荚虚，接下來就是創(chuàng)建的過程薛夜。 - 數(shù)據(jù)掛載前先執(zhí)行
beforeMount鉤子函數(shù)，頁面還沒有創(chuàng)建出HTML元素版述，data初始化已經(jīng)完成梯澜，虛擬dom已經(jīng)存在。 - 創(chuàng)建
vm.$el來替換el渴析，并切換掉原有的編譯模板腊徙，生成一個真正可用的HTML简十。完成頁面的數(shù)據(jù)掛載后執(zhí)行Mounted，這時可以操作數(shù)據(jù)和DOM了撬腾。
以上創(chuàng)建階段完成，接下來是數(shù)據(jù)更新時恢恼。 - 在數(shù)據(jù)發(fā)生改變后民傻，DOM 被更新之前
beforeUpdate鉤子函數(shù)被調(diào)用。適合訪問數(shù)據(jù)比如添加事件監(jiān)聽场斑，但不可以在這里更改數(shù)據(jù)漓踢。 - 虛擬DOM重新渲染并應(yīng)用更新后調(diào)用
updated鉤子函數(shù)。在這個生命周期鉤子函數(shù)中漏隐，我們可以獲取到當(dāng)前最新的數(shù)據(jù)（也就是頁面中的最新數(shù)據(jù)）
以上更新階段完成喧半，接下來是銷毀階段 - 當(dāng)調(diào)用
vm.$destroy()函數(shù)時，進(jìn)入銷毀階段青责。
銷毀之前beforeDestroy被調(diào)用挺据，這時還是可以使用HTML的，也可以獲取到數(shù)據(jù)脖隶。 -
destroyed銷毀之后扁耐，我們對 Vue實(shí)例提供的DOM操作就無效了，但是還是可以獲取到數(shù)據(jù)的产阱。
例圖
image.png
