Runtime-Compiler和Runtime-only的区别

Runtime-Compiler和Runtime-only的区别

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

运行时+编译器

• 如果你需要客户端编译模板
  • 例如，向template选项传入一个字符率，或者需要将模板中的非DOM的HTML挂到一个元素上
  • 你需要带有编译器的版本，因而需要完整构建版本

//这种情况需要编译器(comoiler)
new Vue({
    template:'<div>{{ h }}</div>'
})
//这种情况下不需要
new Vue({
    render (h) {
        return lazy('div', this.h) 
    }
})

• 在使用vue-loader或vueify时，*.vue文件中的模板会在构建时(build time)预编译(pre-compile)为JavaScript,最终生成的bundle中你不再需要编译器(compiler)，因此可以直接使用只含有运行时的构建版本(runtime-only)
  • 用于运行时的版本比其它全面版本的重量轻约30%，应该尽可能使用只含有运行时的构建版本
  • 如果你仍需要使用完整版本，则需要在捆绑程序中配置别名

render和template

Runtime-Compiler

new Vue({
    el: '#app',
    components: { App },
    template: '<App/a.'
})

• Vue中的模板如何最终渲染成真实DOM
  • template -> ast -> render -> vdom -> UI

Runtime-only

new Vue({
    el: '#app',
    render: h => h(App)
})

• Vue中的模板如何最终渲染成真实DOM

  • render -> vdom -> UI
    • 性能更高
    • 代码量更少

• 那么.vue文件中的template是由谁处理的

  • 是由vue-template-compiler