請闡述vue生命周期

?? new Vue之后，發(fā)生了什么？數(shù)據(jù)改變后，又發(fā)生了什么？

• 創(chuàng)建vue實例和創(chuàng)建組件的流程基本一樣

1. 首先做一些初始化的操作，主要是設(shè)置一些私有屬性到實例中，例如：_開頭的的屬性以及$開頭的屬性

2. 「運行聲明周期鉤子函數(shù)beforCreate」

3. 進入注入流程：處理屬性、computed、methods、data、provide、inject，最后使用代理模式將它們掛載到實例中

4. 「運行生命周期鉤子函數(shù)created」

5. 生成render函數(shù)：如果有配置，直接使用配置的render，如果沒有，使用運行時編譯器，把模板編譯為render

6. 「運行生命周期鉤子函數(shù)beforMount」

7. 生成真實dom，關(guān)于如何生成真實dom，詳細過程可以瞅瞅我的上一篇文章：請闡述vue的diff算法，它會創(chuàng)建一個Watcher進行觀察，傳入一個函數(shù)updateComponent，該函數(shù)會運行_render，得到當前組件虛擬dom的根節(jié)點（vnode），然后把得到vnode再傳入_updata函數(shù)執(zhí)行。

   在執(zhí)行_render函數(shù)的過程中，會收集所有依賴，將來依賴變化時會重新運行updataComonent函數(shù)

   在執(zhí)行_update函數(shù)的過程中，觸發(fā)patch函數(shù)，如果當前沒有舊樹，說明這是第一次渲染，它會直接為當前的虛擬dom樹的每一個普通節(jié)點生成elm屬性，也就是真實dom。如果存在舊樹，說明之前已經(jīng)渲染過了，然后會觸發(fā)patch函數(shù)，進行新舊兩棵樹對比更新處理，隨后讓新樹的節(jié)點對應合適的真實dom，這里就先假設(shè)它是第一次渲染。

   如果遇到創(chuàng)建一個組件的vnode，那么它會進入組件實例化流程，這個流程和創(chuàng)建vue實例流程基本相同，也就是相當于遞歸循環(huán)以上步驟，最終會把創(chuàng)建好的組件實例掛載vnode的componentInstance屬性中，方便復用。

   這一步完成后，頁面上已經(jīng)可以看到東西了。

8. 「運行生命周期鉤子函數(shù)mounted」

• 重渲染

1. 數(shù)據(jù)變化后，所有依賴該數(shù)據(jù)的Watcher都會重新運行，這里只考慮updateComponent函數(shù)對應的Watcher

2. Watcher會被調(diào)度器放到nextTick中運行，也就是微隊列中，這樣是為了避免多個依賴的數(shù)據(jù)同時改變后被多次執(zhí)行。

3. 「運行生命周期鉤子函數(shù)beforeUpdate」

4. updateComponent函數(shù)重新執(zhí)行

   在執(zhí)行_render函數(shù)的過程中，會去掉之前的依賴，畢竟也要考慮v-if的感受，重新收集所有依賴，將來依賴變化時會重新運行updateCompontent函數(shù)

   在執(zhí)行_updata函數(shù)的過程中，觸發(fā)patch函數(shù)，然后新舊兩棵樹進行對比：

   當新組件需要被創(chuàng)建時，進入實例化流程，從第一條再走一遍流程就可以了

   當舊組件需要被刪除時，會調(diào)用組件的$destroy方法，然后觸發(fā)生命周期鉤子函數(shù)destroyed

   當組件屬性更新時，相當于組件的updataComponent函數(shù)被重新觸發(fā)執(zhí)行，進入重渲染流程，走一遍重渲染流程就行了

• 普通html節(jié)點的對比會導致真實節(jié)點被創(chuàng)建、刪除、移動、更新
• 組件節(jié)點的對比同樣會導致組件被創(chuàng)建、刪除、移動、更新

5. 「運行生命周期鉤子函數(shù)updated」

?? 好了， 以上就是我的分享，大家對于vue生命周期還有其它理解的話可以在評論區(qū)討論鴨～

希望小伙伴們點贊 ?? 支持一下哦～ ??，我會更有動力的 ??