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