Vue程序的执行过程

我们在使用@vue/cli来构建vue项目的过程中，是需要选择runtime-compiler或者runtime-only版本；

在cli的介绍中说only是比compiler轻6KB的，具体是哪里不一样也没有说明。

下面是Vue程序的执行过程：

runtime-complier的main.js:

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

runtime-only的main.js:

new Vue({
  el: '#app',
  render: h => h(App)
  // render: function (createElement) {
  //   //这里用的是箭头函数，相当于下面的用法
  //   //用法1：直接传入相应的html代码
  //   // return createElement("h2",
  //   //   {class: "title"},
  //   //   ["helloVue",createElement("button",["按钮"])])
  //
  //   //用法2：传入相应的组件
  //   return createElement(App)
  // }
})

vue中对.vue文件中的template的转化是这样的：
runtime+compiler：
template->ast(抽象语法树)->render函数->vDOM(虚拟DOM)->UI

runtime+only:
render函数->vDOM(虚拟DOM)->UI
其实我们在vue文件传过来的App对象里面是没有template的，template已经被我们之前下载的
vue-template-compiler转化为render

only是节省一些步骤的，但是又存在一个问题，那就是在.vue文件中是存在template模板的，那么是如何处理这个的

我们在使用webpack关于vue文件的解析是需要下载三个东西的，vue，vue-loader，vue-template-compiler；

其中vue-template-compiler就是用来解析.vue文件中template，其实我们在import的组件之中其实就是没有template，但是其中是多了一个render函数的，直接执行接下来的步骤