一、什么是Vue的生命周期?
Vue生命周期就是Vue實例從初始化、創建、掛載、銷毀的時間過程。
二、什么是生命周期(鈎子)函數?
Vue實例在某個時間點自動執行的函數。
三、生命周期函數
1.beforeCreate 創建前
初始化事件&生命周期。
2.created 完成創建
初始化注入&校驗。
實例被創建出來,data數據、methods方法、watch屬性、computed屬性等參數選項配置完成。
3.beforeMount 掛載前
先找el參數選項,找到了就繼續向下編譯,沒有就停止生命周期,直到調用vm.$mount(el)再繼續往下編譯。
此時找實例中的template參數選項,如果有這個選項,那就把它編譯到render函數,如果沒有就把outerHTML(外部的HTML)作為tempalte編譯。
如果沒有模板就把outerHTML作為模板。
此時el還沒被掛載到頁面,頁面未被渲染,只有虛擬DOM。
注意:頁面渲染優先級:render函數 > template參數選項 > 外部HTML
4.mounted 掛載完畢
創建vm.$el並替代el,根實例完成掛載,頁面渲染,可以雙向數據綁定了。
(此時並不保證所有子組件被一起掛載上去。)
(4.1)beforeUpdate 數據更新前:data被更新,頁面會重新渲染,但是還沒被渲染。
(4.2)updated 數據完成更新:虛擬DOM被重新渲染,頁面更新。(這個階段不要操作數據,不保證所有子組件一起被重繪)
5.beforeDestroy 實例銷毀前
調用vm.$destroy()時觸發,實例被銷毀的前夕。
6. destroyed 實例銷毀完畢
該鈎子被調用后,對應 Vue 實例的所有指令都被解綁,所有的事件監聽器被移除,所有的子實例也都被銷毀。(以后頁面就無法動態更新數據了。也就是說無法數據驅動視圖。)