Vue生命週期圖示解析

前言

最近開始在看Vue的內部原理，之前在使用Vue的時候最讓我有點迷糊就是它教程裏面那個生命週期圖示，雖然咱們在入門的時候並不須要知道週期中每一個鉤子函數具體是什麼時機觸發了，可是應用到項目中，就會由於一個時機問題致使一個意想不到的結果，恰好看到了這個部分，所以作個記錄。

生命週期圖示 - 官方圖示

下面是中文對照圖：

初始化階段具體作了什麼詳情請看下圖：

Vue的構造函數裏只作了一件事情，那就是調用_init函數，而_init函數是在initMixin裏掛載上去的，具體能夠去查看Vue.js源碼，在src/core/instance/index.js目錄底下，從這裏能夠看到執行了五個函數initMixin、stateMixin、eventsMixin、lifecycleMixin、renderMixin，這幾個函數作了什麼，下圖作了一個簡單的總結：

從執行new Vue()開始發生了什麼，能夠很輕鬆的從初始化階段那張圖觀察出來（圖中標註未知和猜想字樣的暫時還未了解到）。從圖中還能夠很清楚的知道，在執行beforeCreate鉤子函數的時候，咱們在單文件組件裏面聲明的data、props、methods等選項還不能經過實例直接訪問到，到了created階段纔可以訪問到。 編譯階段也就是模板編譯階段，在這個過程當中解析器會將模版解析成AST語法樹，而後經過遍歷AST語法樹生成代碼字節碼，最終生成render函數，render函數生成vnode，而後vnode轉化爲真實的dom。當頁面呈如今用戶面前時表明模板編譯階段、掛載階段都已經完成，而beforeMount鉤子在生成render函數以後就會調用，隨後會進行渲染操做，渲染結束以後就會調用mounted鉤子函數。 卸載階段會先執行beforeDestroy鉤子函數，等執行beforeDestroy鉤子函數後會將_isBeingDestroyed標記爲true，表示該實例正在卸載中，防止後面屢次調用$destroy，由於在執行beforeDestroy鉤子函數以前會先判斷_isBeingDestroyed是否爲true，若是爲true則直接返回。將_isBeingDestroyed標記爲true後，會前後切斷與父組件的聯繫、卸載全部watcher（包括_wather和_wathers全部wather實例，_wather是在組件初始化過程當中生成的全部wather，_wathers使用戶建立的全部watcher）、標記_destroeyed爲true、觸發vnode樹上的destroy鉤子函數、觸發用戶聲明的destroyed鉤子函數，一個實例的生命週期結束。