Vue：Rutime-Compiler 和 Rutime-only的区别

1. 概述

在我们搭建vue cli2脚手架的时候，它会需要我们选择是 Rutime-compiler安装还是 Rutime-only安装，如下。

那它们是什么呢？又有什么区别呢？

---

2. 简单介绍

它们的区别其实就在于能否解析template内容
Rutime-compiler：可以解析template
Rutime-only：不能解析，但性能高，比Rutime-compiler内存小

---

3. 进一步了解

让我们先了解Vue应用程序是如何运行起来的

首先，获取到template文件，进行解析（parse），生成ast（abstract syntax treee）抽象语法树，再进行编译（compile）生成render函数，render函数解析创建节点，最终形成虚拟DOM树（vistual dom），最终再将虚拟DOM渲染成页面上真实的DOM。

好的现在大致了解了vue的运行过程，我们再来看看通过Rutime-compiler和Rutime-only分别创建的脚手架的入口文件。

Rutime-compiler

new Vue({
     
  el: '#app',
  components: {
      App },
  template: ''
})

Rutime-only

new Vue({
     
  el: '#app',
  render: h => h(App)
})

从这里可以看出
Rutime-compiler 内声明了App组件，并在template属性调用了组件App，可见它读取了template文件，是从上述过程第一步执行的。

再看Rutime-only，它直接一个render函数执行了，这里h其实就是creatElement方法，而且这里使用了箭头函数，其实就是和以下一样

new Vue({
     
  el: '#app',
  render: function(creatElement){
     
  	return creatElement(App)
  }
})

所以它其实是从第三步开始执行的，省去了前两步。
显然少了两步也是少了6kb内存的原因所在，而且肯定性能也会更高。

---

4. 再进一步了解

那Rutime-only创建的脚手架里不是.vue文件里不都是template吗？那怎么解析？

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

这其实是因为默认装载了 vue-template-compiler

这个转换器会在我们进行webpack打包时将所有含有template的文件通过打包成对象以render函数的形式返回。

将传回来的App组件打印看一看

发现并没有存在什么template，反而存在render函数，可见已经被转成了render函数。

---

5. 总结

1.运行过程
Rutime-compiler运行过程:
template -> ast -> render -> vdom -> ui

Rutime-only运行过程:
render -> vdom -> ui

2.性能
Rutime-only 比 Rutime-compiler 运行过程少了两步，小了6kb，性能更强。

3.选择
因为loader一般就打包的时候用，用完就丢了， vue-template-compiler同理。

为了后续还能解析template的话选Rutime-compiler
为了提高性能，不为了后续选Rutime-only

其实还是推荐Rutime-only，因为性能第一，为了解析再安装一个vue-template-compiler呗。让电脑偷懒不让自己偷懒。