关于一些Vue的文章。（6）

原文链接我的blog，欢迎STAR。

在上篇里，我们已经分析了在 main.js 可以通过el属性设置挂载点，又可以通过手动设置 vm.$mount()。在这篇，我们深入底层，了解原理。

老规矩，我们先分享一篇文章 Vue.js 源码学习笔记。

这篇文章里反复提到了compile, 额….（什么鬼？手动摊手。）

查 Vue，官网文档, 原来Vue模板编译成render函数的过程叫做 compile。

---

现在入正题：

在 _init, 文件里，有一条重要的线索：

在 _init 的最后，会运行 initRender 方法，在这个方法中，如果el属性存在，既是运行vm.$mount(vm.$options.el),挂载一个未挂载的实例。如果不存在，既是已经通过vm.$mount()手动地挂载一个未挂载的实例。

接下来，我们找到 vm.$mount() 方法，

源码上分析：

  // 如果options.render 存在，直接运行mount方法
  // 如果不存在时
  if (!options.render) {
    let template = options.template

    // 如果template模板存在，获取template参数作为模板
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      // 如果template不存在，且el存在
      // 则获取template的outHTML作为模板
      template = getOuterHTML(el)
    }

    // 如果template模板存在，则调用compileToFunctions, 转化为render
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        delimiters: options.delimiters
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)

从这段源码里，我们也能够很直观的得到以前的一个结论，Vue 2.0中的模板有三种引用写法：el, template, render。其中的优先级是 render > template > el。

当完成 compileToFunctions() 将模板转化为 render 以后，会开始 mount 方法。

在mount方法里，

    vm._watcher = new Watcher(vm, updateComponent, noop)

    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }

转了一圈，其实又回到了从render函数，返回 vnode 的部分，这里我们在第三篇已经详解，不再重复。

---

完。