vuejs学习4.3 runtimecompiler和runtimeonly区别

runtimecompiler和runtimeonly区别

vue程序运行过程

两者区别

两个区别只在main.js里面

runtimeonly的箭头函数相当于

function(h){
	return h(App)
}

可见两者区别在于：
runtimecompiler：template->ast->render->vdom->ui
runtimeonly:render->vdom->ui
可见runtimeonly的性能更高，代码量更少（小6kb，就是选择时两者6kb的原因）
而引入的app组件里面有template模板，但是在编译时已经变成一个普通的对象，在引入app时其实就是引入一个render函数（可以打印app组件，可以看到没有template，而是render函数，这是因为在解析vue时引入了vue-template-compiler，作用是template变成render函数），所以runtimeonly直接从render函数变成vdom即可

render函数

render: h => h(App)
createElement函数简写成h

等价于：
render:function(createElement h){
	return createElement(App)
}

createElement函数的参数：标签，对象（标签的属性），数组（标签的内容）
例如：

render:function (createElement) {
    return createElement('h2',{class:'box'},['helloword']);
  }

npm run dev运行结果：

例如：

render: function (createElement) {
    return createElement('h2', 
    {class: 'box'}, 
    ['helloword', createElement('button', ['按钮'])])
  }

结果是：

所以createElement直接使用组件App标签，

  render: function (createElement) {
    return createElement(App)
  }