new Vue()からページまで実際のdomを見て何を経験したのか見てみましょう.

new Vue()からvue実行フローを見る
この文章は多くの方法の内部の具体的な論理を具体的に分析することはできません.ブラウザがvuejsファイルをロードした後と私のnew Vueの後、どのような方法を呼び出したのか、これらの方法は何をしているのかなどを研究するためです.vueの実行プロセスを大まかに理解し、問題に遭遇してどのプロセスに問題が発生したのかを調べるのに便利です.
vueをこんなに長く使うのは、vueがどのようにして単一ファイルコンポーネントの内容を空のdivの下にレンダリングしたのか、mainから知りたいです.jsエントリは、理解を容易にするために、App.vue, main.jsファイル、ルーティング、vuex、プラグインなどを1つだけ残して、Appに導入しません.vueではdataフィールドを1つだけ定義し、補間バインドします.
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);

ここで、よく見られる初期化作業の一部はすでに完了しており、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__その後、この2つの関数 createElm，createChilrenが互いに呼び出される論理に関連し、それからその前に数十の関数が呼び出されたため、最後にF 10コンピュータを押すまでカートンを押してから次のステップに入ることができ、私たちはページを見たのは一瞬のことかもしれませんが、vueは私たちに多くのことをしてくれて、vueのような優秀なフレームワークに感謝しています.
最後に皆さんも自分でソースコードをデバッグしてみてください.新しい発見があります.