上圖

生命周期vue.png

1、創(chuàng)建vue實(shí)例，Vue();
2、在創(chuàng)建Vue實(shí)例的時(shí)候，執(zhí)行了init()，在init過(guò)程中首先調(diào)用了beforeCreate鉤子函數(shù)；
3、同時(shí)監(jiān)聽(tīng)data數(shù)據(jù)，初始化vue內(nèi)部事件，進(jìn)行屬性和方法的計(jì)算；
4、以上都干完了，調(diào)用Created鉤子函數(shù)；　
5、模板編譯，把data對(duì)象里面的數(shù)據(jù)和vue語(yǔ)法寫(xiě)的模板編譯成HTML。編譯過(guò)程分三種情況：1）實(shí)例內(nèi)部有template屬性，直接調(diào)用，然后調(diào)用render函數(shù)去渲染；2）沒(méi)有該屬性調(diào)用外部html；3）都沒(méi)有拋出錯(cuò)誤；
6、編譯模板完成，調(diào)用beforeMount鉤子函數(shù)；
7、render函數(shù)執(zhí)行之后，將渲染出來(lái)的內(nèi)容掛載到DOM節(jié)點(diǎn)上；
8、掛在結(jié)束，調(diào)用Mounted鉤子函數(shù)；
9、數(shù)據(jù)發(fā)生變化，調(diào)用beforeUpdate鉤子函數(shù)，經(jīng)歷virtual Dom；
10、更新完成，調(diào)用Updated鉤子函數(shù)；
11、beforeDestory銷(xiāo)毀所有觀察者、組件及事件監(jiān)聽(tīng)；
12、Destoryed實(shí)例銷(xiāo)毀