vue-cli项目 runtime-compiler 与 runtime-only的区别

runtime-compiler、runtime-only

使用vue-cli构建项目的时候，
有一步让选择使用 runtime-compiler 或者 runtime-only 
分别选择 runtime-compiler 和 runtime-only创建两个项目，
会发现唯一的区别就是main.js中，vue实例是否使用template

runtime-compiler

使用 runtime-compiler创建项目，
内部会将template中的内容保存为 ast文件，
然后创建render函数去渲染在内存中形成一个虚拟dom树，
最后渲染为UI    
过程为：template -- ast  -- render -- Virtual Dom -- UI

runtime-only

使用 runtime-only创建项目，
内部会直接通过render函数渲染成一个虚拟dom树并渲染为UI   
过程为：render -- Virtual Dom -- UI, 
其内部不会有template，只会有render函数
(.vue文件中的 <template>是被 vue-template-compiler 编译了 )

总结

对比发现，
使用runtime-only性能会更高，并且体积更小，所以推荐使用runtime-only
因为runtime-only比runtime-compiler步骤更少 所以体积也小

render函数

render函数中有参数 这个参数其实是一个创建对象的方法
全称应为 createElement
render( createElement ){
   return createElement( 'xxx' )
}

createElement( 标签名，标签属性，标签内容或子标签)
eg：
	createElement( 'h2', { id : 'hh' }, [ '我是h2元素' ])
 此方法会返回当前创建的对象，所以可以连续创建
 createElement(  'h2', 
	 			    {class:'hh'},
	                ['我是元素内容'， 
	                   createElement('span',
	                                  {id:ss},
	                                   ['我是span元素内容']
	                                 )
	                ]
               )