Vue程序运行过程

Vue程序运行过程分析图

• parse:解析
• ast （abstract syntax tree）抽象语法树
• virtual dom 虚拟dom
• UI(真实dom)

运行过程：
template解析成ast，ast编译成render函数，render函数走向虚拟dom（vdom），最后虚拟dom渲染成真实的UI

如果在vue中使用runtime-compiler的话（需要更多vue源码[比runtime-only多出的代码就是template和ast的]），步骤如下：

template -> ast -> render -> vdom -> UI

如果在vue中使用runtime-only的话(跳过了template和ast)（1，性能更高。2，需要的vue源代码更少），步骤如下：

render -> vdom -> UI

我们一般在用Vue手脚架CLI搭建项目的时候，选择的是Runtime-only就可以了，但是第1个会保险一点。

代码说明：

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

Vue.config.productionTip = false

// 这里的App的是App.vue编译后的对象（由vue-template-compiler编译）
console.log(App);

/* eslint-disable no-new */
new Vue({
  el: '#app',

  // 使用了render函数，直接渲染了App
  render: function (h) {
    return h(App)
  }
})


// 那么.vue文件中的template是由谁处理的了?
// 是由vue-template-compiler
// render -> vdom -> UI

//帮我们做了很多效果的是template-compiler(Vue会自动默认安装)，它是调试的时候的，我们最终在运行的时候不需要template-compiler
// 也就是说，我们安装的时候使用runtime-only就行了，不需要runtime-compiler
// .vue文件中的模板在调试的时候都被转化为object对象了，在运行的时候不需要再编译了
//，也就说不需要runtime-compiler，只需要runtime-only就可以了。

参考来源：
(理解)runtime-compiler和runtime-only的区别