Vue官方文檔： 實例方法 / 生命周期
什么是Vue的生命周期？
從Vue實例創(chuàng)建、運行、到銷毀期間，總是伴隨著各種各樣的事件，這些事件，統(tǒng)稱為生命周期。
生命周期鉤子
在Vue生命周期中，從出生到消亡之中會伴隨多個事件鉤子，這些事件鉤子可以讓我們在整個Vue實例的不同階段里添加自己需要的邏輯。
Vue生命周期主要分為 ： 初始化前后、創(chuàng)建前后、更新前后、銷毀前后。
生命周期圖示
生命周期
依照上圖來簡單說明一下Vue的生命周期以及鉤子函數(shù)：
- Vue的生命周期從創(chuàng)建一個Vue實例開始，隨后進行初始化事件和初始化生命周期。
- 執(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還未掛載，在這個周期里面如果進行請求是可以改變數(shù)據(jù)并渲染的，請求過多或者占用時間過長會導(dǎo)致頁面線上空白。
在這個階段 往往發(fā)送數(shù)據(jù)(ajax)請求，http請求。 - 進行編譯選項，是否有el或template，再根據(jù)編譯選項作為模板將數(shù)據(jù)和compile函數(shù)(編譯函數(shù))進行結(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ù)時，進入銷毀階段。
銷毀之前beforeDestroy被調(diào)用，這時還是可以使用HTML的，也可以獲取到數(shù)據(jù)。 -
destroyed銷毀之后，我們對 Vue實例提供的DOM操作就無效了，但是還是可以獲取到數(shù)據(jù)的。
例圖
image.png
