vue生命週期學習

vue實例有一個完整的生命週期，也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染—>更新—>渲染、銷燬等一系列過程，我們稱這是Vue的生命週期。

每一個組件或者實例都會經歷一個完整的生命週期，總共分爲三個階段：初始化、運行中、銷燬。

下圖爲vue生命週期示意圖：

具體各個生命週期的意義及用法

• beforeCreated
  • 這個時候數據還沒有掛載，訪問不到數據和真實的Dom，一般不做操作
• created
  • 這個時候可以使用數據及更改數據了，但不會觸發updated函數，不會觸發其他鉤子函數；一般在這做初始化數據的獲取
  • 接下來開始找實例或組件對應的模板了，編譯模板爲虛擬dom放入到render函數中準備渲染
• beforeMounted
  • 虛擬dom已經創建完成，馬上準備渲染了，這裏也可以更改數據，但不會觸發updated函數，
  • 在這可以在渲染前最後一次更改數據的機會，不會觸發其他鉤子函數，一般也可以在這做初始化數據的獲取
  • 接下來開始render，渲染出真實Dom
• mounted
  • 此時，組件已經出現在頁面中了，數據，Dom都已經處理好了，事件也已經掛載好了
  • 在這裏就可以操作真實Dom等一些操作
• beforeUpdate
  • 重新渲染之前觸發
  • 然後vue的虛擬Dom機制會重新構建虛擬Dom與上一次虛擬Dom樹利用diff算法進行對比之後進行重新渲染
• updated
  • 數據已經更新完成，Dom也重新render完成
• beforeDestroy
  • 銷燬前執行，一般在這做善後處理：清除計時器，清除非指令綁定的事件等等
• destroyed
  • 組件的數據綁定，監聽等等都已經去除掉了，只剩dom空殼，這裏也可以善後