Runtime + Compiler与Runtime-only不同

通过VueCLI创建vue项目的时候，会让选择使用Runtime + Compiler还是Runtime-only，那这两个之间到底有什么区别呢？

想要了解Runtime + Compiler与Runtime-only的不同，首先要知道template在vue内部是怎么样渲染成页面的。

由下图可知，template会被解析成ast（抽象语法树），再被编译成render函数，这个render函数构造出一个virtual dom(虚拟dom)，最后virtual dom会转换为真实dom，进行页面展示。

 

下面就来说一下 Runtime + Compiler与Runtime-only不同

主要不同之处在与main.js文件里面

h其实是一个Vue中的一个内置函数createElement的缩写，它就是创建虚拟DOM的。

 components: { App },
 template: '<App/>'

上面两行代码可以被改写成一个rander函数

 Runtime + Compiler：template->抽象语法树->render->virtual dom->ui页面
 Runtime-only: rander->virtual dodm->ui页面  （代码量更少）

                   另一个问题：.vue里面的template是这样被处理的呢

                                   由vue-template-compiler包进行处理，将template解析成rander函数

所以runtime-only相比runtime-compiler

1.运行效率高

2.源代码量更少

建议在以后的项目中使用runtime-only