runtimecompiler和runtimeonly的区别

Runtime-Compiler和Runtimel-only的区别

大家在使用vue-cli创建项目时，其中有一个重要的选项是这样的：

那么这两者有何区别呢？
我分别创建了两个项目来进行对比会发现，两者创建的项目只有main.js中的内容存在细微差别：

我们会发现，我们较为熟悉的应该是左边这一种，也就是Runtime-Compiler创建方式。其中包含我们熟悉的template模班以及componts注册事件。

分析这两者的区别就需要我们深入剖析一下两者的vue模板是如何最终渲染成我们所看到的UI界面。

先来看Runtime-Compiler:

总结为：template>ast>render>v-dom>ui

再来看Runtimel-only：
我们会发现它的src中内容是这样的：

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

没错，实际上它的执行过程会直接从render开始进行
执行过程：render>v-dom>ui
那App.vue中存在的template去哪里了呢。这是因为vue-template-compiler插件的存在，会帮助我们将template转换成render函数。

对比两者不难发现Runtime-only的执行过程短，因此效率会更高，实际开发中也用的更多。

ps：坚持写了博客好几天啦，还没有小伙伴来一起学习呢，希望看到滴小伙伴给个三连支持一下。