Vue生命周期

版權聲明：本文首發 http://asing1elife.com ，轉載請注明出處。 https://blog.csdn.net/asing1elife/article/details/82820619

每個Vue執行個體都有個完整的生命周期，也就是Vue執行個體從建立到銷毀的整個過程，實際上在這個過程中Vue的執行個體經曆了很多變化

更多精彩

• 更多技術部落格，請移步 asing1elife’s blog

解讀生命周期圖例

Vue生命周期圖例

每個鈎子函數的觸發時間

1. beforeCreate
   • 在執行個體初始化之前被調用
   • 資料觀測和初始化事件都還沒開始
2. created
   • 執行個體已經建立完之後被調用
   • 此處已經完成資料觀測和初始化事件[資料、方法的運算，watch/event回調]
3. beforeMount
   • 在對象挂載之前被調用
   • 相關聯的render函數首次被執行
4. mounted

   • new Vue()

     聲明中的

     el

     被

     vm.$el

     替換，并挂載到執行個體上之後，調用此鈎子
   • 在整個生命周期中隻執行一次，即時之後執行個體被update
5. beforeUpdate
   • 資料更新時被調用
   • 此操作發生在虛拟DOM重新渲染和打更新檔之前
   • 可在該鈎子中對狀态做進一步更改，此時不會觸發重新渲染，而是直接執行本次渲染
6. updated
   • 虛拟DOM重新渲染和打更新檔之後被調用
   • 該鈎子被調用時，元件的DOM元素已經被更新，理論上可以在此時對DOM進行操作，但不推薦在此時更改執行個體狀态，因為可能會導緻無限循環
   • 該鈎子在伺服器首次渲染執行個體時不會被調用
7. beforeDestroy
   • 執行個體銷毀之前被調用
   • 在此時執行個體依舊可以被調用
8. destroyed
   • 執行個體銷毀之後被調用
   • 該鈎子執行完畢之後會帶來以下操作
     • 執行個體所指向的所有屬性、方法都會解綁
     • 所有的監聽事件都會被移除
     • 所有的子執行個體也會被銷毀