【Vueの高度な知識】Vueソースコードの実現プロセス全体を整理する

Vueの全体の実現の流れのソースコードの解読??(まとめポイント)
テンプレートをrender関数に解析

    <template>template> --->>> render   

with関数の使用テンプレートのすべての情報はrender関数にテンプレートで使用されるdataの属性が含まれており、JS変数テンプレートのv-model v-for v-onはJS論理render関数になってvnodeを返す
レスポンスによるデータのリスニングの開始
Object.defineProperty dataのプロパティをvmにエージェントする

    with(vm) {
        
    }

最初のレンダリング、ページの表示、依存関係のバインド
初回レンダリング、updateComponentの実行、vm._の実行render()はrender関数を実行し、vmにアクセスする.listとvm.title属性は応答式getメソッドによって傍受される(Object.defineProperty)

    Object.defineProperty(mv, key, {
        get: function() {
          return data[key];
        }
    })

updateComponentを実行すると、vdomのpatchメソッドpatchを実行してvnodeをDOMにレンダリングし、初回レンダリング完了

なぜgetを傍受するのか、setを直接傍受するのはだめですか?

dataには多くのプロパティがあり、使用される場合もあり、使用されない場合はgetに移動し、使用されない場合はgetがgetに移動しないプロパティに移動しない場合もあります.setの場合、不要な繰り返しレンダリング(キー)を避けることにも関心を持つ必要はありません.

    vm._update(vnode) {
        const prevNode = vm._vnode;
        vm._vnode = vnode;
        if (!prevNode) {
            //        
            vm.$el = vm.__patch__(vm.$el, vnode);
        }
        else{
            vm.$el = vm.__patch__(prevNode, vnode);
        }
    }
    
    //     vue  （  data      ，Object.defineProperty）
    function updateComponent() {
      vm._update(vm._render());
    }

dataプロパティの変化、rerender関数のトリガー

    Object.defineProperty(mv, key, {
        set: function(newVal) {
          data[key] = newVal;
          //     
          updateComponnet()
        }
    })

属性を変更し、応答式setでsetに傍受されてupdateComponent updateComponent再実行vm.render()で生成されたvnodeとpreVnodeは、patchでhtmlに比較レンダリングされます.