vue-vue构建版本runtime-compiler和runtime-only的区别

　　构建vue项目会有两个版本进行选择，runtime-compiler和runtime-only；他们主要的不同体现在一个文件里面，main.js，下面看看两种的区别：

 

 　　一眼就看可以看出代码上的区别了；但要讲的并不是这个，要说的是他们执行流程的区别：

　　runtime-compiler的执行流程是：template会被解析成ast（抽象树结构），然后编译成render函数，再转换为虚拟DOM，再变成真实DOM；即过程是 template->ast->render->vitualdom->UI

　　runtime-only的执行流程是：render函数转换为虚拟DOM，再变成真实DOM；即过程是 render->vitualdom->UI

　　区别很明显，runtime-compiler多了前两个步骤，runtime-only没有，这就导致了两者主要2个区别：性能和代码量。

　　　　性能：runtime-compiler低，runtime-only高

　　　　代码量：由于runtime-only不需要再进行前两个步骤，因此他不需要再用vue-template-compiler去解析，所以少了一些解析的工具和代码

　　但大家有两个疑问是：

　　　　1. render函数是什么？h(App)是什么东西？

　　　　2. runtime-only中也有template的代码，那不是也要前两个步骤吗？

　　先说第一个问题，render函数的作用是创建和渲染页面的标签，其实上面写的是箭头函数以及参数h有点抽象了，准确的写法应该是下面：

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

　　参数h其实就是creareElement，他是一个函数，他的作用是创建标签；看下面的代码把：

 

 　　这是creareElement的普通用法，他的意思是创建一个h2标签，有class属性等于box，并且标签内容是Hello World和一个button标签

　　creareElement还有一种用法就是传入一个组件，也就是createElement(App) ，就相当于创建App提供的模板标签了

　　好了，到第二个问题； 为什么runtime-only中也有template的代码，那不是也要前两个步骤吗？答案是不需要的，这样说吧，在创建完runtime-only后，前面两个步骤相当已经执行过了，再说一遍，前面两个步骤已经执行过了，所以实际上去执行 h(App)的时候，App此时已经没有template了，template已经被渲染成render函数；

　　OK，作一个结论吧，如果你刚使用vue就用runtime-compiler来过渡下，实际开发就用runtime-only