深Vue.js応答原則

まず、アプリケーションのVueを作成

新しいヴュー（{ 
  データ（）{ 
    リターン{ 
      名： 'yjh' 、
    }; 
  }、
  ルータ、
  店舗、
  レンダリング：H => H（APP）、
}）。$マウント（ '#app'）;

第二に、アプリケーションは、何が起こったのか、最後にVueのをインスタンス化？

this._init（）
callHook（VM、 'beforeCreate'）
観察（vm._data）

vm._data = VM。$のoptions.data（）

proxy(vm, _データ, key) 代理到vm上访问

 
  関数プロキシー（VM、_data、キー）（）{ 
  Object.defineProperty（ターゲット、キー、{ 
    得る（）{ 
      戻りvm._data.key 
    }、
    設定（ヴァル）{ 
      vm._data.key = ヴァル
    } 
  }）
} 
 

callHook（VM、 'を作成'）
mountComponent（VM。$実行後、実行mountComponentマウント）
callHook（VM、 'beforeMount'）
新しいウォッチャー（VM、updateComponent）

 
  updateComponent =一定（）=> {
   // 仮想DOMの作成 
  のvnode =一定をvm._render（）

  // 次のコード行に仮想DOMのプロセスと同等の作成
  // constのvノード= VM。$のoptions.render.callを（VM、VM 。$のcreateElement）

  // 更新EL $ 
  vm._update（vノード）
} 
 

callHook（VM、 'マウント'）

上記の動作では、両方のステップ3とステップ7補完、相互間で発生し、我々はまた、両方を明確にするために、最も気にする必要があり、応答VUEは、基本的な原則を習得しました

第三に、どのようにデータ変更を追跡します

我々は、すべてのデータも更新されるビューを変更されたことを知っているので、我々が持っているすべての最初は、データの変更を監視する方法を知っています

 
  クラスオブザーバー{ 
  コンストラクタ（値）{ 
    この .VALUE = 値
     この.walk（値）
  } 

  ウォーク（OBJ）{ 
    CONSTキー = Object.keys（OBJ）
     のための（I = 0せ; iは<keys.length; iは++ ）{ 
      defineReactive（OBJ、キー[I]）
    } 
  } 
} 
関数defineReactive（OBJ、キー）{ 
  Object.defineProperty（OBJ、キー、{ 
    得る（）{ 
      // 数据被访问
      戻りobj.key 
    }、
    設定（ヴァル）{ 
      もし（ヴァル=== obj.key）{
         リターン
      } 
      //更新されたデータ 
      obj.key = ヴァル
    } 
  }）
} 
 

第四に、クラスのパブリケーション・サブスクリプションの定義発

我々は仮想DOMを作成するプロセスである場合、その実行されたVM $ createElementメソッドは、同じデータフィールドに使用することができる。：複数の場所で（例えばvm.name）、より多くの加入者は、更新名に加入すること、したがって、パブリッシュ・サブスクライブのDEPクラスにVueの中で定義されて

クラス発{ 
  コンストラクタ（）{ 
    これは .subs = [] 
  } 

  ADDSUB（サブ）{ 
    この.subs.push（サブ）
  } 

  （依存）{ 
    場合（Dep.target）{
       この.addSub（Dep.target）は
    } 
  } 

  通知（）{ 
    この .subs.forEach（副=> sub.update（））
  } 

  removeSub（サブ）{ 
    CONST I = この.subs.findIndex（サブ）
     であれば（I> -1 ）{
       この .subs.splice（I 、1 ）
    } 
  } 
}

第五に、データ登録者

最後に、我々は次のシナリオを見て更新されたデータに登録

 
  <！ - シーン1 - > 
< DIV >名称：{{}} userInfo.name、フルネーム：のfullName {{}} </ DIV >

輸出のデフォルト{ 
  データ（）{ 
    リターン{ 
      のUserInfo：{ 
        名： 'junhua' 、
      }、
    } 
  }、 
  （マウント）{ 
    // 场景2 
    本。$（newValに、ヴァル）=> '名前'（見る{
       // ... 
    }）
  }、
  // 场景2 
  時計：{ 
    名前（newValに、ヴァル）{ 
      // ... 
    } 
  }、
  計算された（）{ 
    // 场景3 
    のfullName（）{
       リターン `陽$ { この.userInfo。名} ` 
    } 
  }
}

サンプルコードの上から、シーンのサブスクリプションデータを更新することは、次のとおりです。

テンプレート補間：new Watcher(vm, updateComponent)データの変更、更新コンポーネント
VMの$腕時計:.いくつかの論理演算を行うために、個々のデータを聴きます
計算された使用シナリオ：計算プロパティ

したがって、加入者データ（パラメータexpOrFnを含む[Function|String]、コールバックデータの更新は、以下のように、後に実行する必要があります）。

クラスウォッチャー{ 
  コンストラクタ（VM、expOrFn、CB）{ 
    この .vm = VM
       場合（typeof演算 expOrFn === '関数' ）{
       この .getter = expOrFn 
    } 他{
       この .getter = parsePath（expOrFn）
    } 
    この .cb = CB || （）=> {}
     この .VALUE = これに.get（）
  } 

  を取得（）{ 
    Dep.target = この
    CONST値は = この .getter.call（この .vm、この.vm）
    Dep.target = 未定義の
     戻り値
  } 

  更新（）{ 
    CONSTヴァル = この.VALUE 
    CONST newValに = これに.get（）
     この .cb.call（この.vm、newValに、ヴァル）
  } 
}

第六に、究極のオブザーバーオブザーバー

クラスオブザーバー{ 
  コンストラクタ（値）{ 
    この .VALUE = 値
     この.walk（値）
  } 

  ウォーク（OBJ）{ 
    CONSTキー = Object.keys（OBJ）
     のための（I = 0せ; iは<keys.length; iは++ ）{ 
      defineReactive（OBJ、キー[I]）
    } 
  } 
} 

関数defineReactive（OBJ、キー）{ 
  CONST DEP = 新しい発（）
  Object.defineProperty（OBJ、キー、{ 
    得る（）{ 
      // 依赖收集、收集订阅者ウォッチャー实例
      dep.depend（）
       // 数据被访问
      戻りobj.key 
    }
    SET（ヴァル）{ 
      IF（ヴァル=== obj.key）{
         リターン
      } 
      // データが更新 
      obj.key = ヴァル
       // 加入者がインスタンス更新ウォッチャーに通知
      dep.notifyを（）
    } 
  }）
}

七つの概要

私たちは、アプリケーションVueの最も重要なポイントのインスタンスを振り返って

 
  観察（vm._data）
 // VM。$マウント（） 
constのcomponentUpdateWatcher = 新しいウォッチャー（VM、updateComponent） 
 

コンポーネントを描画更新、またはデータテンプレート補間複数のアクセスデータにアクセスする場合、加入者に依存する複数のとしてcomponentUpdateWatcherゲッターインターセプターに添加updateComponent、データ更新のたびに一つの実行セッターこの関数は、対応する依存性は、加入者componentUpdateWatcher実行更新、updateComponentのすなわち実施を通知します。この目的に応じてVueのデータが到達している、この絵は再び私によい理解の上でどのようなネットワークに知らせます

githubのアドレス出典：ブログの庭-ヤンJunhua、ソースを明記してください：ヤンJunhua

深Vueの応答性の原則