blog

vueのソースコードに深く潜って、vueの双方向データバインディングの原理を理解する。

データの双方向バインディングを実現するには、まずデータをハイジャックしてリッスンする必要があります。属性が変更された場合、サブスクライバのWatcherに更新が必要かどうかを伝える必要があります。 多...

Feb 23, 2020 · 2 min. read
シェア

データの双方向バインディングを実現するには、まずデータをハイジャックしてリッスンする必要があるため、すべての属性をリッスンするリスナーオブザーバをセットアップする必要があります。属性が変更された場合、サブスクライバのWatcherに更新が必要かどうかを伝える必要があります。

多くのサブスクライバが存在するため、これらのサブスクライバを収集し、リスナオブザーバとサブスクライバウォッチャの間で統一された方法で管理するために、メッセージサブスクライバ Dep が必要です。次に、コマンドパーサ Compile が必要で、各ノード要素をスキャンして解析し、関連するコマンドをサブスクライバ Watcher に初期化し、テンプレートデータを置き換えるか、対応する関数をバインドします。

そこで、データの双方向バインディングを実現するために、次の3つのステップを実行します:

1.リスナーObserverを実装し、すべてのアトリビュートをハイジャックしてリッスンし、変更があればサブスクライバーに通知します。

2.サブスクライバーSuberを実装することで、属性の変更の通知を受信し、ビューを更新するために適切な関数を実行することができます。

3.各ノードの関連する命令をスキャンして解析し、テンプレートデータを初期化し、それに応じて適切なサブスクライバーを初期化するパーサーCompileを実装します。

Observer は、Object.defineProperty( ) をコア実装メソッドとするデータリスナーです。すべてのプロパティをリスニングしたい場合は、すべてのプロパティ値を再帰的に繰り返し、Object.defineProperty( )を適用します。以下のコードでは、Observer を実装しています。

サブスクライバSuberは、初期化のために対応するget関数を実行します。初期化の間に、サブスクライバキューSubQueueに自分自身を追加する必要があり、元の値が変更されると、対応する更新関数を実行します。

すべての購読者を収集し、変更が発生したときに購読者に通知します。

テンプレート・ディレクティブを解析し、ビューを初期化するためにテンプレート・データを置換します。テンプレート・ディレクティブに対応するノードを対応する更新関数にバインドし、対応するサブスクライバを初期化します。



Read next

さあ、Javaの初期化順序を1つの記事で読もう!

Javaプログラムでは、オブジェクトがインスタンス化されると、そのオブジェクトのクラスのすべてのメンバ変数が初期化され、初期化が完了して初めてコンストラクタ・メソッドが呼び出されてオブジェクトが生成されます。変数がブロックより優先され、静的が非静的より優先されます。 初期化は派生クラスよりも親クラスが優先されます。 メンバ変数の初期化は、定義された順番に行います。変数定義がさまざまなメソッド定義の間に散らばっていても、コンストラクタの中にあることに変わりはありません。

Feb 23, 2020 · 2 min read