首先,在Vue中,程序的运行过程大致如下:
template作为参数传递给Vue实例,保存在vm.options中--->vm.options.template(模板)解析为ast(abstract syntax tree,抽象语法树)--->
编译成render(function)函数--->把template转为vDom树--->渲染成页面。
runtime+compiler就遵循这套步骤,而runtime-only跳过了前两步,直接从第三步开始,也就是直接执行render(),所以,相比runtime+compiler,它的代码体积更小,代码运行性能更高。
runtime-only对包含template模板的代码执行会报错,因为它无法进行解析。而runtime+compiler可以对template模板进行编译。如果在用Vue CLI构建项目中选用了runtime-only,为了解决报错问题,那么,在配置文件中,需要做如下配置:
resolve:{
// alias:别名
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
不过,在实际开发中多以选择runtime-only,因为它的体积小,代码性能高。
render()的使用:
new Vue({
el: '#app',
router,
// render: h => h(App)
//h其实是createElement()函数
/**createElement('标签','{标签的属性}',['']) */
// render: h => h('div',{class:'box'},['我是一个div',h('div',{class:'box2'},['我是子div'])])
//那把App组件作为参数传递进去可以吗?要知道App组件内是有template模板的,runtime-only不是处理不了template模板的吗?
//事实是,传递进去的这个App不是个组件了,它已经被转成了一个普通的对象:console.log(App)输出一下就知道。这个普通的对象中不再含有template
//那是谁转变的呢?
//vue-template-compiler插件转变完成的,并把template变成了render()
render:h=>h(App)
})