在用脚手架新建一个项目时,会有以下这个选项:
这里来区分一下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,毕竟相对来说 “ 轻 ”。