Vue生命週期函式.個人筆記

賴嘉豪發表於2018-10-19

生命週期函式就是vue例項在 某一個時間點自動執行 的函式

新建一個vue例項的過程

1.初始化事件和生命週期

自動執行beforeCreate生命週期函式

2.處理外部注入和雙向繫結

自動執行created生命週期函式

初始化結束


3.判斷 是否有el屬性

if:有:直接用模版去渲染

有el屬性 | 繼續判斷是否有template屬性

else:無:會把el外層的html當成模版


模版和資料相結合即將渲染到頁面的前一瞬間

渲染前執行baforeMount生命週期函式

4.模版結合資料生成dom元素掛載到頁面之上

自動執行mounted生命週期函式(執行時頁面已被渲染完畢)


資料發生改變的時候 也有兩個生命週期函式:

資料發生改變之前

自動執行beforeUpdate生命週期函式

資料發生改變並重新渲染之後

自動執行updated生命週期函式


銷燬例項操作:

當我們執行 $destroy 銷燬vue例項的時候

自動執行beforeDestroy生命週期函式

當元件(vue例項)被完全銷燬之後

自動執行destroyed生命週期函式

Vue生命週期函式.個人筆記

相關文章