runtime-compiler和runtime-only的区别

当我们用vue-cli2创建项目时，往往会碰到让我们选择runtime-compiler模式还是runtime-only模式
默认选择的是runtime-compiler，因为runtime-compiler“更保险一点”。但是其实runtime-only优点更多一点。
runtime-only相比runtime-compiler有两个优点：

1.运行效率高

2.源代码量更少

其实runtime-compiler模式，runtime-only模式在src文件里面只在main.js里面有区别，如图所示

可以看出runtime-compiler模式里的Vue实例的模板，和注册的组件，都被一个render函数替换掉了，这里就要细说一下template在vue内部是怎么样渲染成页面的了

由上图可知，template会被解析为ast，再被编译成为一个render函数，这个render函数会构造一个virtual dom（虚拟dom），最后virtual dom会转换为真是的dom，进行页面展示。
而在第二个图的render函数，换成ES5其实也是下面这种写法：

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

h（超文本标记语言）其实是一个Vue的一个内置函数createElement的缩写，他就是创建虚拟DOM的。return返回一个createElement方法，其中要传3个参数，第一个参数就是创建的div标签；第二个参数传了一个对象，对象里面可以是我们组件上面的props，或者是事件之类的东西；第三个参数就是div标签里面的内容。
这里其实就是创建出APP这样一个组件，用来替换index.html中id’为app的div，其实就是跟上面的template，注册组件最后的效果是一样的！

接下来，我们回到runtime-compiler和runtime-only的区别上来

runtime-compiler的步骤：

• template-> ast-> render-> virtual dom-> 真是dom

runtime-only的步骤：

• render-> virtual dom-> 真实dom

由此可见runtime-only相比于runtime-compiler

• 运行效率更高，性能更好
• 源代码量更少不需要（不需要template->ast这个过程的代码，如下图）
  
  还有一点，runtime-only版本的main.js中的template会被render函数代替掉，那为啥组件中的template还在，他怎么被编译的呢？

这是因为组件中会调用vue的一个包：vue-template-compiler，跑项目的时候，这个包会自动将组件的template转化为render函数。


render函数：通过createElement这个函数可以直接传递一个组件