一看就懂得Vue生命週期

上圖

1、創建vue實例,Vue();
2、在創建Vue實例的時候,執行了init(),在init過程中首先調用了beforeCreate鉤子函數;
3、同時監聽data數據,初始化vue內部事件,進行屬性和方法的計算;
4、以上都幹完了,調用Created鉤子函數; 
5、模板編譯,把data對象裏面的數據和vue語法寫的模板編譯成HTML。編譯過程分三種情況:1)實例內部有template屬性,直接調用,然後調用render函數去渲染;2)沒有該屬性調用外部html;3)都沒有拋出錯誤;
6、編譯模板完成,調用beforeMount鉤子函數;
7、render函數執行之後,將渲染出來的內容掛載到DOM節點上;
8、掛在結束,調用Mounted鉤子函數;
9、數據發生變化,調用beforeUpdate鉤子函數,經歷virtual Dom;
10、更新完成,調用Updated鉤子函數;
11、beforeDestory銷燬所有觀察者、組件及事件監聽;
12、Destoryed實例銷燬

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章