vue之Runtime+Compiler和Runtime+Only区别

  1).vue这选择Runtime+Compiler或Runtime+Only版本生成的项目，public 下面都有的 index.html 模板文件

 <div id="app"></div>

  html里面的div元素id为app可以不用在里面写内容，因为在main.js里的template里面的内容会对el绑定的元素进行替换。
  这是Runtime+Compiler版本项目下main.js内容

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

  这是Runtime+Only版本项目下main.js内容

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

  2)Runtime+Compiler版本和Runtime+Only版本区别
  1. 只包含运行时版本 ，会在webpack打包时将模板编译成js，也即是进行了预编译，在打好的包里面是已经编译好的，在浏览器可以直接运行 vue.runtime.esm.js

  2.运行时+编译器版本，不是在打包是对模板进行编译的，是在客户端(浏览器)运行时进行编译的，所以要使用编译器的完整版本 vue.esm.js

  3). runtime-only 更快的原因：

runtime-only比runtime-compiler更快，因为它省略了vue内部过程中的第一个过程，如果是runtime-compiler

那么main.js中就会出现template从而需要过程一导致增加了一个过程，同时增加了大小

而 runtime-only 模式中不是没有写 template ，只是把 template 放在了.vue 的文件中了

并有一个叫 vue-template-compiler的在开发依赖时将.vue文件中的 template 解析成 render 函数了

因为是开发依赖，不在最后生产中，所以最后生产出来的运行的代码没有template

  4).组件渲染到页面的过程
  template --> ast --> render --> vDom --> 真实的Dom --> 页面
  ast：抽象语法树
  vDom：虚拟Dom
  template最终还是会被渲染为 render函数