【Vue原理】依存更新-ソース版

文章を書くのは容易ではない,ほめてくれないか.
Vueソースの共有に専念し、文章は白話版とソース版に分けられ、白話版は仕事の原理を理解し、ソース版は内部の詳細を理解するのに役立ち、一緒に勉強しましょう.
研究はVueバージョンに基づいて
【2.5.17】
レイアウトが悪いと思ったら、下のリンクをクリックするか、下に引いて公衆番号に注目してもいいでしょう.
【Vue原理】依存更新-ソース版
収集に頼ることに全く概念がない同級生なら、まず私のこの白話版を見てもいいです.
レスポンスの原理
私たちはすでに収集に依存することを話しました.
【Vue原理】依存収集-ソース版の基本データ型
【Vue原理】依存収集-ソース版の参照データ型
今すぐ依存更新を见ますハハハ、结局収集し终わって更新するのですか
実は更新に頼るのは簡単で、2つのステップです.
属性値通知保存の依存を修正して更新するポイントはObjectのみを見る.definePropertyが設定したset関数は、データに新しい値を再付与すると、自然にset関数がトリガーされ、依存更新が完了します.

function defineReactive(obj, key, val) {   

    var dep = new Dep(); 
    var childOb = observe(val);   

    Object.defineProperty(obj, key, {

       get(){   
            ...      ，                  
            //      
            return val
       },

       set(newVal) {    
       
            //      
           if (newVal ===val) return
           
           //      
           val = newVal;    
       
            //          ，       ，       
           childOb = observe(newVal);  
         
            //     
           dep.notify();    
       }    
    }); 
}

更新に依存するポイントは、更新の通知に重点を置きます.
通知更新のポイントは、「dep.notify」という一言だけです.
だから、私たちは重点的にこの言葉を理解して、どのように通知して、どのように更新します
はい、depは最初の編で話しました.
【Vue原理】依存収集-ソース版の基本データ型
depは主にストレージ依存であることを知っています.ソースコードをもう一度見てください.

var Dep = function Dep() {    

    this.subs = []; //      

};

//    subs ，      ，       watcher.update
Dep.prototype.notify = function() {    

    var subs = this.subs.slice();    

    for (var i = 0, l = subs.length; i < l; i++) {

        subs[i].update();
    }
};

ソースコードを見て、私たちは知っていて、もとは通知の更新は【依存メモリを遍歴します】で、それから1つ1つ【watcher.updateを呼び出します】
subsはwatcherを入れているので、subs[0].それはwatcherだupdate
それでまた問題が来たupdateはどのように更新しましたか???

function Watcher(vm, expOrFn) {    

    this.vm = vm;    

    //              
    this.getter = expOrFn;

    //    watcher    ，        
    this.get();
};



Watcher.prototype.get = function() {  

    //       
    this.getter.call(this.vm,this.vm);  

};

Watcher.prototype.update = function() {    
    this.get()
}

上のソースが見えます
1 Watcherがインスタンスを新規作成すると、入力した関数が保存されます(この関数は更新用に使用されます)
2 watcherインスタンスにはupdateメソッドがあり、前のステップで保存した更新関数を実行する役割を果たします.
ではwatcherはいつから作成されたのでしょうか.
ページwatcherで例を挙げて、インスタンス全体の構築の基本的な流れを探求します

function Vue(options) {    

    this._init(options);

}

Vue.prototype._init = function(options) {
    // ...       
    this.$mount()
}

Vue.prototype.$mount = function() {

    // ...  template redner    

    /**         watcher，

               watcher        **/

    new Watcher(this,        

        //          ，  watcher    ，               

        function() {
             /** ...           VNode，

                             DOM     **/
        }
    );
};

上のソースコードと注釈を見れば大体よくわかります
「new Vue」から「vm._init」に初期化して「vm.$mount」にページにマウントすると、プロセス全体が完了します.
ポイントはwatcherの更新関数を明らかにすることです
関数の更新
このページの更新関数は、レンダリング関数を呼び出し、DOMノードを生成してページに挿入する役割を果たします.
更新関数はWatcherに渡され、watcherのインスタンスに保存されます.
「関数全体にわたるソースコードは多いが、ここでは一律に過ぎない」
だから、通知更新はこれらの仕事をしました.
1.watcherを直接呼び出す.update、すなわちwatcherに保存されている更新関数を再呼び出す
2、更新関数の更新はレンダー関数を実行し、インスタンスの最新の値(変更された値)を読み込み、最後にDOMノードを再生成することである
3、DOMノードがページを挿入または置換し、更新を完了する
通知フローチャートを描く