Vue生命周期(鈎子)函數


一、什么是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 實例的所有指令都被解綁,所有的事件監聽器被移除,所有的子實例也都被銷毀。(以后頁面就無法動態更新數據了。也就是說無法數據驅動視圖。)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM