Vue runtime-compiler与runtime-only

1. Vue的编译渲染过程

template --> ast --> render函数 --> VDom --> 真实DOM

• 先将template解析(parse)成抽象语法树(ast)
• 将ast编译(compiler)成render函数
• 将render函数渲染(render)成虚拟DOM
• 最后将虚拟DOM渲染成真实DOM

(1) runtime-compiler的步骤
template --> ast --> render函数 --> VDom --> 真实DOM

(2) runtime-only的步骤
render函数 --> VDom --> 真实DOM

---

2. 两者的对比

(1) 首先从代码的完整性来看，runtime-only版本比runtime-compiler版本少了一个API -- Vue.compile，这个API是执行前两步，将一个模板字符串编译成 render 函数。因此，runtime-only是无法使用template选项的。

(2) 由于runtime-only少了相应的功能，使得该版本的体积更小。

综上：

runtime-compiler	runtime-only
体积大	体积小
有Vue.compile API	无Vue.compile API
可以使用template模板、render函数渲染	只可使用render函数渲染

---

3. 两者如何选用

(1) 两者各有各的好处，runtime-compiler包含编译器，可以选用template或render，选择更灵活；但是体积略大，性能略差；
(2) runtime-only不包含编译器，在渲染页面时能节省两步操作，性能略好；但只能选择render进行编写，灵活度不够。那如何选择呢？

• 使用runtime-compiler的情况

(1) 在html中使用vue库，在这种操作下，你可能只是为了使用vue的一些功能，如指令、数据绑定等，此时你写template模板要比写一个render函数更容易且易理解，此时建议使用runtime-compiler

(2) 如果 render 函数和 template property 都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。

• 使用runtime-only的情况

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

---

4. vue中两者的切换

https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6

/* 带webpack显性配置的 */
//webpack.config.js
//其实就是取别名，找到以 vue 结尾的，就去node_modules重新查一下路径
module.exports = {
  resolve: {
   alias: {
    'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
  }
 }
}


/* webpack隐性配置的 */
//vue.config.js
//true 就是完整版的（即runtime-compiler）
module.exports = {
  runtimeCompiler: true  //ture: runtime-compiler  false: runtime-only
}

温馨提示：修改webpack配置需要重启项目