CLI中Runtime-Compiler和Runtime-only的区别

在用脚手架新建一个项目时，会有以下这个选项：

这里来区分一下Runtime-Compiler和Runtime-only（开发更常用）

先看一下vue程序的运行过程

这两个项目的区别在于main.js文件不同：

Runtime-Compiler

import Vue from 'vue'
import App from './App'
new Vue({
  el: '#app',
  template: '<App/>',
  components: {App}
})
// 按照vue程序运行顺序图可知，是这样运行的：
// template -> ast -> render -> vdom -> UI

因为用到了template，所以需要 -> ast -> render -> vdom -> UI
Runtime-only

import Vue from 'vue'
import App from './App'
new Vue({
  el: '#app',
  render: h => h(App)  // render 渲染
})
// 按照vue程序运行顺序图可知，是这样运行的：
// render -> vdom -> UI
// 可知，Runtime-only 性能更高，源码量更少。

而 .vue文件的template是由 vue-template-compiler 处理的，它随着脚手架的安装已经安装了。所以在传入main.js之前，vue文件中的template已经编译了。

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
如果在之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

当然，我们就算选择了Runtime-Compiler，依旧可以用.vue文件夹开发，并用render引用。

但最好还是选择Runtime-only，毕竟相对来说 “ 轻 ”。