請闡述vue生命週期

📌 new Vue以後，發生了什麼？數據改變後，又發生了什麼？

• 建立vue實例和建立組件的流程基本同樣

1. 首先作一些初始化的操做，主要是設置一些私有屬性到實例中，例如：_開頭的的屬性以及$開頭的屬性
2. 運行聲明週期鉤子函數beforCreate
3. 進入注入流程：處理屬性、computed、methods、data、provide、inject，最後使用代理模式將它們掛載到實例中
4. 運行生命週期鉤子函數created
5. 生成render函數：若是有配置，直接使用配置的render，若是沒有，使用運行時編譯器，把模板編譯爲render

1. 運行生命週期鉤子函數beforMount

2. 生成真實dom，關於如何生成真實dom，詳細過程能夠瞅瞅個人上一篇文章：請闡述vue的diff算法，它會建立一個Watcher進行觀察，傳入一個函數updateComponent，該函數會運行_render，獲得當前組件虛擬dom的根節點（vnode），而後把獲得vnode再傳入_updata函數執行。

   在執行_render函數的過程當中，會收集全部依賴，未來依賴變化時會從新運行updataComonent函數

   在執行_update函數的過程當中，觸發patch函數，若是當前沒有舊樹，說明這是第一次渲染，它會直接爲當前的虛擬dom樹的每個普通節點生成elm屬性，也就是真實dom。若是存在舊樹，說明以前已經渲染過了，而後會觸發patch函數，進行新舊兩棵樹對比更新處理，隨後讓新樹的節點對應合適的真實dom，這裏就先假設它是第一次渲染。

   若是遇到建立一個組件的vnode，那麼它會進入組件實例化流程，這個流程和建立vue實例流程基本相同，也就是至關於遞歸循環以上步驟，最終會把建立好的組件實例掛載vnode的componentInstance屬性中，方便複用。

   這一步完成後，頁面上已經能夠看到東西了。

3. 運行生命週期鉤子函數mounted

• 重渲染

1. 數據變化後，全部依賴該數據的Watcher都會從新運行，這裏只考慮updateComponent函數對應的Watcher
2. Watcher會被調度器放到nextTick中運行，也就是微隊列中，這樣是爲了不多個依賴的數據同時改變後被屢次執行。
3. 運行生命週期鉤子函數beforeUpdate

4. updateComponent函數從新執行

   在執行_render函數的過程當中，會去掉以前的依賴，畢竟也要考慮v-if的感覺，從新收集全部依賴，未來依賴變化時會從新運行updateCompontent函數

   在執行_updata函數的過程當中，觸發patch函數，而後新舊兩棵樹進行對比：

   • 普通html節點的對比會致使真實節點被建立、刪除、移動、更新
   • 組件節點的對比一樣會致使組件被建立、刪除、移動、更新

   當新組件須要被建立時，進入實例化流程，從第一條再走一遍流程就能夠了

   當舊組件須要被刪除時，會調用組件的$destroy方法，而後觸發生命週期鉤子函數destroyed

   當組件屬性更新時，至關於組件的updataComponent函數被從新觸發執行，進入重渲染流程，走一遍重渲染流程就好了

5. 運行生命週期鉤子函數updated

😊 好了， 以上就是個人分享，你們對於vue生命週期還有其它理解的話能夠在評論區討論鴨～

但願小夥伴們點贊 👍 支持一下哦～ 😘，我會更有動力的 🤞