3.1 Runtime Only VS Runtime + Compiler

在正文开始之前，先了解vue基于源码构建的两个版本，一个是runtime only，另一个是runtime加compiler的版本，两个版本的主要区别在于后者的源码包括了一个编译器。

什么是编译器，百度百科上面的解释是

简单讲，编译器就是将“一种语言（通常为高级语言）”翻译为“另一种语言（通常为低级语言）”的程序。一个现代编译器的主要工作流程：源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 目标代码 (object code) → 链接器 (Linker) → 可执行程序 (executables)。

通俗点讲，编译器是一个提供了将源代码转化为目标代码的工具。更进一步理解，vue内置的编译器实现了将.vue文件转换编译为可执行javascript脚本的功能。

3.1.1 Runtime + Compiler

一个完整的vue版本是包含编译器的，我们可以使用template进行模板编写。编译器会自动将模板编译成render 函数。

// 需要编译器的版本
new Vue({
  template: '<div>{{ hi }}</div>'
})

3.1.2 Runtime Only

而对于一个不包含编译器的runtime-only版本，需要传递一个编译好的render函数，如下所示：

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

很明显，编译过程对性能有一定的损耗，并且由于加入了编译过程的代码，vue代码体积也更加庞大，所以我们可以借助webpack的vue-loader工具进行编译，将编译阶段从vue的构建中剥离出来，这样既优化了性能，也缩小了体积。