Vue Runtime-only 与 Runtime + Com

一、vue 程序运行过程 如下图

1、vue 的options 会将template 解析成 ast (抽象语法树abstract syntax tree)
2、ast 转化成render函数
3、render函数 再转化成 虚拟dom （virtual dom）
4、虚拟dom 再转成 真实的dom 然后展示UI

二、Runtime + Compiler

1、使用Runtime + Compiler 创建工程
创建完成 查看程序入口（main.js）代码 如下：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

解读上诉代码：
1、挂载el ：#app （此#app 就是index.html 里面的div）
2、注册一个 App 组件
3、template 使用App组件 （template 会直接覆盖 挂载el 的div）

这个步骤与上面vue程序运行过程完全相符
template -> ast -> render -> vdom -> UI

三、Runtime-only

1、使用Runtime-only创建工程
创建完成 查看程序入口（main.js）代码 如下：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

解读上诉代码：
1、挂载el ：#app （此#app 就是index.html 里面的div）
2、直接使用render函数渲染App组件
过程如下：
render -> vdom -> UI

总结：

从过程来看 选择Runtime-only 的项目 比 选择Runtime + Compiler的项目 代码少 而且运行效率高