Runtime-Compiler:
template -> ast(抽象语法树) -> render -> visual Dom -> UI
import Vue from 'Vue'
import App from './App' // App 为创建的.vue文件,表示App组件
new Vue({
el: '#app',
template: '</app>',
components: { App }
})
Runtime-only:
render -> visual Dom -> UI
import Vue from 'Vue'
import App from './App' // App 为创建的.vue文件,表示App组件
new Vue({
el: '#app',
render: h => h(App)
})
箭头函数等同于:
render: function(h) ({
return h(App)
})
即Runtime-Compiler 相比于Runtime-only 多了一个 “template -> ast” 的过程,所以 Runtime-only 性能更高,代码量更少。
Runtime-Compiler模式中,也可以直接使用 render 函数,省略掉 “template -> ast” 这个过程:
new Vue({
el: '#app',
render: function (creatElement) {
return creatElement(App)
}
})
虽然App.vue 文件中也存在 “template”, 但是其最终编译的时候,所有“template”都已经被渲染成一个 “render” 函数了,在调用App 时,其中已经不存在 “template” 元素了。那么, .vue文件中的template 是由谁处理的呢?
vue-template-compiler
若需要正确加载.vue文件,需安装 “vue-loader” 和 “vue-template-compiler”
npm vue-loader vue-template-compiler --save-dev
总结:
1.若在之后的开发中,依然使用 “template” ,就需要选择 Runtime-Compiler
2. 若在之后的开发中,使用的是 “.vue” 文件夹开发,则可以选择Runtime-only