runtime-complier 和 runtime-only 的区别

runtime-complier 和 runtime-only 的区别

在使用vue-cli2创建项目时，会遇到一个选项，如下图：

有两种不同的模式
第一种：runtime-complier 默认选择
第二种：runtime-only 优点更多

runtime-only 有两种优点：

1. 代码量更少
2. 性能更高

所以我分别创建两个不同的项目，来进行比较，发现只有main.js中一些差别，如下图：

得出：runtime-complier 是用template模板，使用components注册组件的，而runtime-only是使用render函数来实现的

这里我们就需要来了解一下，template在vue 内部里是怎么渲染的

由上图可知：template 会先被解析成 ast（abstract syctax tree 抽象语法树），在被编译成 render 函数，而这个render函数会构建一个virtual(虚拟) dom，最后再渲染成真实dom，也就是UI，进行页面展示。

所以我们就可以得出：

1. runtime-complier的步骤：template -> ast -> render -> virtual dom -> 真实dom
2. runtime-only 的步骤：render ->virtual dom -> 真实dom

所以这里就有一个疑问了，为什么在runtime-only中就可以直接跳过前面的template解析阶段呢？因为在创建项目的时候，vue-cli自动帮我们安装了一个 vue-template-complier 插件，而这个插件会在项目启动时自动帮我们把template转换为render函数。

通过上面的比较就能够得出 runtime-only 相比于 runtime-complier ，代码量更少，性能更高

所以建议大家在开发项目时，多使用runtime-only模式，并且在实际开发中也使用的更多。
ps：第一次写博客，有什么不足的地方，请指出其中的错误，我会改正的。