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中两者的切换
/* 带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配置需要重启项目
