runtime-compiler和runtime-only的区别

一、程序运行过程

1、runtime-compiler中vue的运行过程

58632F94D84C3A9FCDF4E3EB21FCDDC7.jpg

如上图所示：

• 1、将vue中的模板解析成abstract syntax tree(art)抽象语法树。
• 2、将语法树编译成render函数。
• 3、将render函数翻译成virtual dom 虚拟DOM。
• 4、将虚拟DOM渲染到浏览器上。

2、runtime-only

• 基于vue-template-compiler开发依赖，可以将vue文件中的template解析成render函数；所以它只有上面的3、4步骤。

二、区别

• 1、runtime-only比runtime-compiler轻6kb（创建时，官方文档说明有）。
• 2、runtime-only的运行速度相较于runtime-compiler更快。
• runtime-compiler可以识别.html文件中的template，而runtime-only不能识别template，只能识别render函数，.vue文件中的template也是被开发依赖vue-template-compiler翻译成render函数，所以只能在.vue中写template。而该依赖为开发依赖，并不在最后生产中，所以最后生产出来的代码是没有template。

原因：如上图中的程序运行过程，runtime-only比runtime-compiler少了1、2两个步骤，解析和编译需要时间，且需要注入相应的方法以便于解析和编译；runtime-only轻、快的原因也就在于此。

3、两者之间主要的区别体现main.js中，如以下两张图片：

• 8C32205EFF901A18E134992E1A042771.jpg
  F8C059DE68ED0F26B696726BFC97AD6F.jpg

在runtime-only模板中的的函数
render: h => h(App)
其实质为：

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

ES6简写：

render (createElement) {
    return createElement(App);
}

再进一步缩写为：

render (h){
    return h(App);
}

通过箭头函数就有了：

render: h => h(App);