摘要：從開始看運行流程本篇文章不會具體分析很多每個方法內部具體邏輯，只為了研究一下瀏覽器加載文件后以及我后，都調用了哪些方法，這些方法都是做什么的等等。

本篇文章不會具體分析很多每個方法內部具體邏輯，只為了研究一下瀏覽器加載vuejs文件后以及我new Vue后，都調用了哪些方法，這些方法都是做什么的等等。以便對vue的執行流程有個大致了解，方便遇見問題排查是哪個過程出了問題。

用vue這么久我是很好奇從vue是怎么一步步把單文件組件的內容給渲染到空的div下面的，那從main.js入口開始,為了方便理解，我們只保留一個App.vue, main.js文件，路由，vuex,插件等等都不引入，在App.vue里面我們只定義一個data字段，插值綁定一個。

vue版本：2.5.2

先看下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)
});

下面開始分析具體調用了哪些方法

分析過程會忽略一些輔助方法等無關的方法調用...

在new Vue之前也就是會做一些初始化的工作,列舉部分重要的代碼

/*
initMixin給Vue.prototype添加：
_init函數,
...
*/
initMixin(Vue);
/*
stateMixin給Vue.prototype添加：
$data屬性,
$props屬性,
$set函數,
$delete函數,
$watch函數,
...
*/
stateMixin(Vue);
/*
eventsMixin給Vue.prototype添加：
$on函數,
$once函數,
$off函數,
$emit函數,
$watch方法,
...
*/
eventsMixin(Vue);
/*
lifecycleMixin給Vue.prototype添加:
_update方法:私有方法,用于更新dom,其中調用_patch產生跟新后的dom,
$forceUpdate函數,
$destroy函數,
...
*/
lifecycleMixin(Vue);
/*
renderMixin給Vue.prototype添加:
$nextTick函數,
_render函數,
...
*/
renderMixin(Vue);

至此，部分常見的我們經?？吹降某跏蓟ぷ饕呀涀鐾辏F在我們知道我們在vm上用的$開頭的方法都是在一加載vue.js完成后就掛在了Vue.prototype,我們的vm實例就可以用這些方法了。
下面當我們正式開始new Vue()

//調用this._init()
new Vue(options);
/*
this._init函數
依次調用了跟vm相關的初始化函數:
initLifecycle:給vm掛在一下屬性
  $parent:undefined,
  $root:vm,
  $children:[],
  $refs:{},
  _isMounted:false,
  _isDestoryed:false,
  _watcher:null,
  ...
initEvents:初始化事件.

initRender:主要做了一下事情:
  給vm添加_c函數和$createElement，其實是createElement別名， 
  給vm添加$attrs和$listeners屬性，$attrs & $listeners are exposed for easier HOC creation

callHook(vm, "beforeCreate")：此時我們看到觸發了beforeCreate鉤子，此時的vm有哪些屬性應該一目了然了.

initInjections(vm)： resolve injections before data/props，我們可以看到在初始化inject時還沒有data和props

initState:主要進行初始化:
  data：initData(vm),
  props:initProps(vm,opt.props)
  computed:initComputed(vm,opt.computed),
  methods:initMethods(vm,opt.methods),
  watch:initWatch(vm,opt.watch)

initProvide:resolve provide,根據源碼注釋我們可以知道，在provide中可以使用props和data

callHook(vm, "created"):此時生命周期created觸發，我們能訪問data,prop,provide等等
下面最后一步至關重要：
 if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
這里是判斷我們是否傳入了el，屬性，傳入了則調用$mount方法掛載內容到el所在節點下
*/
 this._init(options)
//在執行完 this._init() 后進入了最最重要的一步，掛載組件
//程序接著往下走回執行:mountComponent
/*
  函數 mountComponent 主要做了下面這些事情:
  觸發 beforeMount() 鉤子函數,
  聲明 updateComponent 函數，里面調用了 vm_update(vm._render(),...)，這兩個方法作用下面執行到的時候說一下.
  new Watcher(),此時會傳入updateComponent函數,并隨后執行此函數，執行后會發生一些函數執行，我只列舉比較重要的大流程函數：
  Vue._render：執行由vue-loader生成的render函數或者自己寫的render函數，最終返回一個由createComponent(非createPatchFunction內部的)產生的vnode.
  createComponent(非createPatchFunction內部):創建組件虛擬節點，此函數返回一個vnode，表示vue組件的vnode.
  vm._update:接收上面的vnode參數，這里面會觸發VM.__patch__函數，這個函數里面最終返回的結果就是我們在html頁面寫的空的div,但是里面有了真實的內容，此時頁面可以看到內容了，
  觸發 mount() 鉤子函數，這個mount鉤子每個組件實例會在自己的insert hook中調用

*/
mountComponent()

到了這里，函數moutComponent執行完畢并且返回了vm,
等 this._init()執行完我們在頁面就可以看到內容了

我們可以大致總結一下從new Vue開始都大致執行了哪些重要的方法

1.new Vue();
2.Vue.prototype._init();
3.Vue.prototype.$mount();
4.mountComponent();
5.new Watcher();
6.Watcher.prototype.get();
7.updateComponent();
8.Vue.prototype._render();
9.render();
10.createElement()
11.Vue.prototype._update();//這里面會執行vm.$el=vm.__patch__(),最終根vm的$el就有了真實dom值
12.Vue.prototype.__patch__();//這個應該是最重要的方法了，他返回了真實的dom節點。

在 vm.__patch__中會產生一個屬于App.vue這個虛擬節點的實例,然后再次調用該實例的_init()方法，然后依次執行步驟2到12,繼而完成app組件的掛載,最終new Vue出來的vm的$el,就是所有的真實dom。

在開始研究時在瀏覽器一步步調試看執行的過程，在谷歌的調試工具中借助這個call Stack

很方便查看運行過程都調用了哪些函數，在程序運行vm.__patch__后里面涉及到了這倆函數 createElm，createChilren互相調用的邏輯，然后由于在這之前又調用了幾十個函數，導致調試到最后按F10電腦要卡頓好久才能進入下一步，我們看到頁面可能是一瞬間的事情，但是vue幫我們做了很多事情，很感謝vue這么優秀的框架。