>[success] # 掛載階段 ~~~ 1.經過上個章節的分析$mount 有兩個版本一個版本是'runtime only 版本的 Vue '對 在'src/platform/web/runtime/index.js',這個版本只能用render 函數，另一個版本 'runtime compiler'對應在'platforms\web\runtime-with-compiler.js' 邊運行變將 '模板渲染'翻譯成AST在轉譯成'render',即使是'runtime compiler'版本的$mount最后也都使用了 'runtime only 版本的 。 2.接下來Vue 要做的就是：函數被調用的時候就會渲染并且返回一個虛擬DOM的樹。這個樹非常輕量， 它的職責就是描述當前界面所應處的狀態。當我們有了這個虛擬的樹之后，再交給一個patch函數， 負責把這些虛擬DOM真正施加到真實的DOM上 3.接下來要做的就是生命周期這個部分 ~~~  >[info] ## 分析 掛載階段 ~~~ 1.因此最后即使你使用的是'函數渲染'版本vue也是將render 變成 虛擬dom過程，整個 分析就變成了'runtime only' 版本 ~~~ >[danger] ##### runtime only 版本的 $mount ~~~ 1.'runtime only' 版本$mount 代碼很短，最后整個工作交給了'mountComponent'（掛載組件） ~~~ ~~~ // wrap mount Vue.prototype.$mount = function ( el?: any, hydrating?: boolean ): Component { return mountComponent( this, el && query(el, this.$document), hydrating ) } ~~~ >[danger] ##### mountComponent（掛載組件） ~~~ 1.在下面的源碼'mountComponent'函數的定義位于源碼的'src/core/instance/lifecycle.js'中 2.下面代碼做的事情： 2.1.判斷實例上是否存在渲染函數，如果不存在，則設置一個默認的渲染函數createEmptyVNode，、 該渲染函數會創建一個注釋類型的VNode節點 2.2.然后調用callHook函數來觸發beforeMount生命周期鉤子函數，beforeMount生命周期在這里觸發。 這里就可以理解生命周期中說的，判斷模板格式是否正確（2.1做了這個），也可以理解此時只是 render 函數并沒有形成虛擬dom，也沒有將頁面內容真正渲染上 2.3.定義了'updateComponent',其中這個定義函數中參數'vm._render()'將會為我們得到一份最新的VNode 節點樹,'如果調用了updateComponent函數，就會將最新的模板內容渲染到視圖頁面中' 2.4.接下來到了watcher 這部分，updateComponent函數作為第二個參數傳給Watcher類從而創建了 watcher實例，那么updateComponent函數中讀取的所有數據都將被watcher所監控 2.5掛載階段才算是全部完成了，接下來調用掛載完成的生命周期鉤子函數mounted ~~~ ~~~ export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean ): Component { vm.$el = el if (!vm.$options.render) { /*render函數不存在的時候創建一個空的VNode節點*/ vm.$options.render = createEmptyVNode if (process.env.NODE_ENV !== 'production') { /* istanbul ignore if */ if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') || vm.$options.el || el) { warn( 'You are using the runtime-only build of Vue where the template ' + 'compiler is not available. Either pre-compile the templates into ' + 'render functions, or use the compiler-included build.', vm ) } else { warn( 'Failed to mount component: template or render function not defined.', vm ) } } } /*觸發beforeMount鉤子*/ callHook(vm, 'beforeMount') /*updateComponent作為Watcher對象的getter函數，用來依賴收集*/ let updateComponent /* istanbul ignore if 一些埋點操作 省略掉了*/ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { ...... } else { updateComponent = () => { vm._update(vm._render(), hydrating) } } /*這里對該vm注冊一個Watcher實例，Watcher的getter為updateComponent函數， 用于觸發所有渲染所需要用到的數據的getter，進行依賴收集，該Watcher實例會存在所有 渲染所需數據的閉包Dep中*/ vm._watcher = new Watcher(vm, updateComponent, noop) hydrating = false // manually mounted instance, call mounted on self // mounted is called for render-created child components in its inserted hook if (vm.$vnode == null) { /*標志位，代表該組件已經掛載*/ vm._isMounted = true /*調用mounted鉤子*/ callHook(vm, 'mounted') } return vm } ~~~