ホームページ  >  記事  >  ウェブフロントエンド  >  vue3 のリアクティブな依存関係の収集、ディスパッチ、更新の原理は何ですか?

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

王林
王林転載
2023-05-16 19:28:201128ブラウズ
    proxy

    vue3 は

    Object.property から ProxyProxy## に変更されました#前者と比較すると、オブジェクト配列を直接監視できます。深いレベルのオブジェクトや配列の場合、トリガーは 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<pre class="brush:js;">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> で実行されているクラスです。ここでは、依存関係として理解できます。ユーザーがエフェクト関数を使用した後、内部の応答データが発生します。変更後、渡されたコールバック関数が再実行されます。

    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 サイトの他の関連記事を参照してください。

    声明:
    この記事はyisu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。