Runtime-Only 和 Runtime-Compiler 的区别

我们使用 vue init 命令初始化 vue 项目时，需要选择使用 runtime-only 还是 runtime-compiler

我们会发现，这两种模式初始化的项目主要不同之处在于 main.js

 左：runtime-compiler 模式           右：runtime-only 模式

不难发现，runtime-compiler 模式创建的项目使用组件的步骤比较清晰，先引入App组件，然后App 组件在 Vue 实例中的 components 中注册，最后在 template 中使用，template 中的App 组件的模板会替换 el 中挂载的 id 为 app 的标签；而在 runtime-only 模式创建的项目中，Vue 实例中的 template 和 components 属性被 render 函数代替，h 实际上是 createElement 函数的别称，它的参数是 App 组件对象，App 组件的模板会替换 el 中挂载的 id 为 app 的标签。因此，实际上两种模式的写法不同，但最终实现的效果相同，那么，两种模式本质上有什么不同呢？

要了解两种模式本质上的不同，关键在于需要了解组件被渲染到页面上的过程

渲染过程在两种模式中的区别：

runtime-compiler:

template --- ast --- render --- virtue dom --- UI

• 首先，template 会被解析成 ast，全称是 abstract syntax tree, 抽象语法树
• 然后，ast 会被编译成 render 函数
• 其次，render 函数会变成 virtue dom，也就是虚拟 dom
• 最后，vdom 会被渲染成 UI, 也就是真实 dom

runtime-only:

render --- virtue dom --- UI

runtime-only 模式下，vue的运行省略了 template 和 ast，直接使用了 render 函数，render 表示渲染

结论：

两个模式中组件渲染最终都是由 render 函数来实现的，但是在 runtime-compiler 中 vue 项目在打包上线时才开始解析 template；而在 runtime-only 中，vue 运行时 template 的编译已经由 vue-template-compiler 在开发环境中完成，打包后项目运行时直接使用 render 函数，效率更高，因此，runtime-only 的代码体量更小，性能更好。

因此，构建项目推荐选择 runtime-only 模式