runtime-only和runtime-compiler

博客内容来自coderwhy老师的vue.js视频，进行学习总结。

一、解析过程的差异

// Runtime-Complier 解析过程：
1、将template模板解析成抽象语法树（ast）抽象语法树;
2、将抽象语法树编译成render函数;
3、将render函数再翻译成virtual dom (虚拟dom);
4、将虚拟dom转换成真正的DOM并挂载到浏览器上;

// Runtime-only 解析过程：
1、通过loader：vue-template-compiler 直接将组件编译成 render函数；
2、将render函数再翻译成virtual dom (虚拟dom);
3、将虚拟dom转换成真正的DOM并挂载到浏览器上;

二、性能差异

1、runtime-only比起runtime-compiler由于在解析过程中由所省略，所以性能更高。
2、runtime-only比runtime-compiler代码量更少，约6kb左右。

//runtime compiler
import Vue from 'vue'
import App from './App'
new Vue({
	el:'#app',
	template:'<App/>',
	components: {App}
})


//runtime only
import Vue from 'vue'
import App from './App'
new Vue({
	el:'#app',
	render:h=>h(App)
})
/*或:
new Vue({
	render:h=>h(App),
}).$mount('#app')
*/

runtime only中：
①：
render:h=>h(App) 是箭头函数，还原到es5是：
render: function(h){ return h(App) }
②：
其中的 h 是一个函数：createElement()
所以：render: function(createElement){ return createElement(App) }
③：关于 createElement()
1、普通用法 return createElement(‘标签名’，{标签属性}，[‘标签内容’]）
render: function(createElement){
    return createElement(‘p’,
    {class:‘box’},
    [‘hello world!’,createElement(‘button’,[‘按钮’])])

2、传入组件对象用法
return createElement(App)

new Vue({
  router,
  render: h => h(App)
  /* render: function(h){
	  return h(App)
  } */
  /* render: function(createElement){
	  //普通用法 return createElement('标签名'，{标签属性}，['标签内容']）
	  return createElement('p',
		{class:'box'},
		['hello world!',createElement('button',['按钮'])])
		
	  //传入组件对象用法
	  return createElement(App)
  } */
}).$mount('#app')

最后贴上coderwhy老师的图：