关于一些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 的部分，这里我们在第三篇已经详解，不再重复。

---

完。