Vue源碼閱讀之11掛載過程概述

       當Vue組件的$options屬性中具有el屬性將會在此元素上進行掛載內容。

if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }

       在掛載這裏就要區分Vue的一個概念，runtime only和runtime+compile，一個最主要的特徵是runtime only的Vue對象中有渲染函數而runtime+compile的版本是需要經過編譯生成渲染函數。

      對於runtime only版本的Vue程序將會直接執行vue-master\src\platforms\web\runtime\index.js路徑下的Vue.prototype.$mount所對應的的函數，對於runtime+compile版本的函數將會先執行vue-master\src\platforms\web\entry-runtime-with-compiler.js中的Vue.prototype.$mount函數然後再執行vue-master\src\platforms\web\runtime\index.js路徑下的Vue.prototype.$mount所對應的函數

   講了一下runtime only和runtime+compile的區別之後我們繼續講解掛載執行的內容。

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    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
        )
      }
    }
  }
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }
  vm._watcher = new Watcher(vm, updateComponent, noop)
  hydrating = false
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

從上我們可以看到，首先獲取掛載的元素節點，然後進行調用mountComponent函數。處理流程如下

（1）是否具有渲染函數沒有則創建一個空的虛擬節點，然後就調用beforemount函數，即完成和組件的初掛載。

（2）根據是否是發佈模式設置組件更新函數。

（3）設置組件的監聽器屬性爲新建的監聽器實例。

（4）根據組件的虛擬節點是否爲null如果爲null設置組件的掛載狀態並調用組件的mounted函數

（5）最後返回組件對象。

        從上面可以看出在完成created之後便開始着手處理將組件掛載在DOM上的過程，如果是runtime only基本上將直接完成beforemount過程這個過程基本上沒有做什麼操作就是獲取掛載元素。然後就是設置組件的更新函數然後設置組件的_watcher屬性如果組件的虛擬節點的值爲null則進行調用組件的hook函數，可以看出組件的mount過程主要設設置組件的更新函數和設置組件的_watcher屬性。

具體的流程圖如下圖所示。