Vue 中很重要的一個知識點,就是生命周期的理解. 搞懂它可以使我們在實際使用中能更好的編寫邏輯代碼
官網圖例
先來一張官網關于生命周期的圖例
image
生命周期鉤子
- beforeCreate: 實例創建前, 此時不能處理數據
- created: 實例已經創建出來, 屬性已綁定, 但 DOM 還未完成, $el 屬性還不存在 可以進行數據的處理
- beforeMounted: 實例掛載前, 如果有 el(容器,例如:<div id="app"></div>) 了, 就準備把創建的實例掛載到 el 上
- mounted: 完成掛載實例, 掛載后的 $el 就是渲染后的DOM 元素, 比如:
<div>hello vue</div> - beforeUpdated: 更新實例前, 此時數據發生了變化
- updated: 實例完成更新
- beforeDestroy: 實例銷毀前, 銷毀組件
- destroy: 實例被銷毀
因為在實例掛載前, 在生命周期鉤子里是取不到el 的,所以我們一般會在 created 和 mounted 這兩個鉤子里進行一些頁面渲染前的數據處理工作.
