vue3 のリアクティブな依存関係の収集、ディスパッチ、更新の原理は何ですか?

proxy

vue3 は

Object.property から Proxy、Proxy## に変更されました#前者と比較すると、オブジェクト配列を直接監視できます。深いレベルのオブジェクトや配列の場合、トリガーは getter に対応し、依存関係を再帰的に収集します。vue2 のように直接的に暴力的ではありません。 この種の再帰は全体的なパフォーマンスが向上します

reactive によって渡されたオブジェクトのプロキシをハイジャックし、依存関係の収集と通知更新操作を内部で実行します

• function reactive(raw) {
    return new Proxy(raw, {
      get(target, key) {
        const res = Reflect.get(target, key);
        //添加依赖
        track(target, key as string);
        return res;
      },
      set(target, key, value) {
        const res = Reflect.set(target, key, value);
        trigger(target, key);
        return res;
      },
    });
  }

JS を直接使用して失敗した場合、例外プロンプトは生成されないため、

Reflet

を使用してオブジェクトを標準化します。 このようにして、依存関係の収集は、

依存関係コレクション

次に、依存関係コレクションがどのようなものかを紹介します

const targetMap = new WeakMap();
function track(target, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  dep.add(currentEffect);
}

最初は WeakMap です-->その後ユーザーはターゲットを介して対応する応答を取得します。内部マップ-->次に、キーを介して Set コレクションが取得され、内部依存関係が 1 つずつ保存されます。実際、これは依存関係を収集するプロセスです。

ここで WeakMap が使用される理由は、これが弱い参照であり、ガベージ コレクション メカニズムに影響を与えないためです。

currentEffect

それでは、

currentEffect

とは何でしょうか?実際には、後で詳しく説明する ReactiveEffect<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>class ReactiveEffect { private fn: Function; constructor(_fn: Function) { this.fn = _fn; } run() { currentEffect = this; this.fn(); } } let currentEffect: null | ReactiveEffect = null; function effect(fn: Function) { const reactiveEffect = new ReactiveEffect(fn); reactiveEffect.run(); }</pre><div class="contentsignin">ログイン後にコピー</div></div> で実行されているクラスです。ここでは、依存関係として理解できます。ユーザーがエフェクト関数を使用した後、内部の応答データが発生します。変更後、渡されたコールバック関数が再実行されます。

vue2 で収集された依存関係はウォッチャーに相当し、vue3 で収集された依存関係は実際にはエフェクトです。それらが実装する関数は次のとおりです。実際には同じです。

更新の配布

今のところ

DOM

の問題は無視してください。操作は実際には非常に簡単で、Proxy# によってハイジャックされた target## を渡すだけです。 key を使用して対応する Set コレクションを検索し、ユーザーによって渡された fn 関数を呼び出して依存関係

function trigger(target, key) {
  let depsMap = targetMap.get(target);
  let dep = depsMap.get(key);
  for (let effect of dep) {
    effect.fn();
  }
}

を更新します

以上がvue3 のリアクティブな依存関係の収集、ディスパッチ、更新の原理は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。