一 、簡介
Vue每個組件都是獨立的，每個組件都有一個屬於它的生命周期，從一個組件創建、數據初始化、掛載、更新、銷毀，這就是一個組件所謂的生命周期
二、分析
初始化事件 & 生命周期
初始化組件的事件和生命周期函數,當執行完成這一步之后,組件的生命周期函數,就已經初始化好了,等待依次去調用
beforeCreate
這是第一個生命周期函數;此時,組件的data和methods以及頁面DOM結構,都還沒有初始化,所以此階段,什么都做不了
初始化注入 & 校驗
這個階段,正在初始化data和methods中的數據以及方法
created
這是組件第二個生命周期函數,此時的data和methods已經可用,但頁面還沒有渲染出來,通常操作axios請求
是否指定 el 選項
如果是,是否指定template模板。如果有模板,先渲染模板,否則就編寫#app下的Html模板
// 如果不是,最后手動指定#app,然后再操作是否有template模板
vue.$mount('#app')
這一部分執行完成后,把data數據拿到后,並且解析執行模板結構中的指令;當所有指令被解析完畢后,那么頁碼就會渲染到內存中了;當模板編譯完成后,我們的模板頁面,還沒有掛載到頁面上,只是在內存中,用戶看不到
beforeMount
這是第三個生命周期函數,當模板在內存中執行完成后,會立即執行;此時內存中的模板結構,還沒有真正渲染到頁面上,此時頁面看不到真實的數據
創建vm.$el 並替換 el
這一步,正在把內存中渲染好的模板結構,替換到頁面上,屬於正在掛載階段
mounted
- 此時掛載完成,這個mounted是組件創建階段最后一個生命周期函數;此時頁面真正的渲染完了,用戶可以看到真實的數據;
- 當這個生命周期函數執行完后,組件就離開創建組件階段,進入到運行中的階段
- 用於初始化第三方UI插件
組件運行中的生命周期函數,會根據Data數據的變化,有選擇性的觸發 0 次 或 N 次
beforeUpdate
當執行beforeUpdate運行中生命周期函數的時候,數據肯定是最新的;但是,頁面呈現出的數據還是舊的
虛擬DOM 重新渲染,並應用更新
這是渲染好的階段
updated
頁面更新完后,此時data數據是最新的,同時頁面上呈現出的數據也是最新的
beforeDestory
當執行beforeDestory的時候,組件即將被銷毀,但是還沒有真正開始銷毀,只是銷毀前的操作;組件還可以正常可用
解除綁定，銷毀子組件以及事件監控
此時是銷毀過程,正在銷毀中
destroyed
組件銷毀完畢,data和methods都不可用