本来是想写到漫漫学vue路系列的，但这个好像有点牵涉vue的底层知识了，所以单开一个博客。本文主要是看coderwhy（微博，b站搜索）老师的vue视频做的笔记。
用vue cli2创建项目时，往往会碰到让我们选择runtime-compiler模式还是runtime-only模式
默认选择的是runtime-compiler，因为runtime-compiler“更保险一点”。但是其实runtime-only优点更多一点。
runtime-only相比runtime-compiler有两个优点：
其实runtime-compiler模式，untime-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)
}
- 1
- 2
- 3
h其实是一个Vue中的一个内置函数createElement的缩写，它就是创建虚拟DOM的。
这里其实就是创建出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
还有个问题，runtime-only版本的main.js中的template会被render函数代替掉，那其组件中的template为什么还在，它怎么被编译呢？
这是因为组件会调用vue中的一个包：vue-template-compiler，跑项目时，这个包会自动将组件中的template转化为render函数的。
建议大家以后还是多用runtime-only版本
（看了coderwhy老师的视频加上自己的理解写的，不权威，直供自己理解）