Vue中runtime+compiler和runtime-only的区别

首先，在Vue中，程序的运行过程大致如下：
template作为参数传递给Vue实例，保存在vm.options中--->vm.options.template（模板）解析为ast（abstract syntax tree，抽象语法树)--->
编译成render(function)函数--->把template转为vDom树--->渲染成页面。
runtime+compiler就遵循这套步骤，而runtime-only跳过了前两步，直接从第三步开始，也就是直接执行render()，所以，相比runtime+compiler，它的代码体积更小，代码运行性能更高。
runtime-only对包含template模板的代码执行会报错，因为它无法进行解析。而runtime+compiler可以对template模板进行编译。如果在用Vue CLI构建项目中选用了runtime-only，为了解决报错问题，那么，在配置文件中，需要做如下配置：

resolve:{
    // alias:别名
    alias:{
        'vue$':'vue/dist/vue.esm.js'
    }
},

不过，在实际开发中多以选择runtime-only，因为它的体积小，代码性能高。

---

render()的使用：

new Vue({
  el: '#app',
  router,
  // render: h => h(App)
  //h其实是createElement()函数
  /**createElement('标签','{标签的属性}',['']) */
  // render: h => h('div',{class:'box'},['我是一个div',h('div',{class:'box2'},['我是子div'])])

  //那把App组件作为参数传递进去可以吗？要知道App组件内是有template模板的，runtime-only不是处理不了template模板的吗？
  //事实是，传递进去的这个App不是个组件了，它已经被转成了一个普通的对象:console.log(App)输出一下就知道。这个普通的对象中不再含有template
  //那是谁转变的呢？
  //vue-template-compiler插件转变完成的，并把template变成了render()
  
  render:h=>h(App)
})

参考：https://www.bilibili.com/video/BV15741177Eh?p=95