ホームページ > 記事 > ウェブフロントエンド > vue3 のリアクティブな依存関係の収集、ディスパッチ、更新の原理は何ですか?
Object.property から
Proxy、
Proxy## に変更されました#前者と比較すると、オブジェクト配列を直接監視できます。深いレベルのオブジェクトや配列の場合、トリガーは getter
に対応し、依存関係を再帰的に収集します。vue2 のように直接的に暴力的ではありません。
この種の再帰は全体的なパフォーマンスが向上します
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; }, }); }
を使用してオブジェクトを標準化します。 このようにして、依存関係の収集は、
依存関係コレクション
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
とは何でしょうか?実際には、後で詳しく説明する 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 で収集された依存関係は実際にはエフェクトです。それらが実装する関数は次のとおりです。実際には同じです。
更新の配布
の問題は無視してください。操作は実際には非常に簡単で、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 サイトの他の関連記事を参照してください。