1. 応答原理の基盤応答性の基本原理は 拡張: 上記は vue2.0 の基本的な応答性原則です。vue3.0 の基本原則は Proxy で、属性の get および set メソッドの監視、属性の追加と削除の監視などを行うことができます。Object.defineProperty よりも強力ですが、IE11 と互換性がありません。 2. コアオブジェクト: Dep と Watcher 1. computed で定義された計算プロパティ。 2. 時計に書き込まれた監視機能。 3. コンポーネントレンダリングウォッチャー 3. 依存関係を収集して更新する3.1 依存関係の収集Watcher インスタンス オブジェクト w を、それが依存する属性の Dep に配布します。プロセスは次のとおりです。 1. Dep.target を現在の Watcher のインスタンス オブジェクト w に設定します。 2.w は定義された関数 (つまり、computed/watch で記述された関数) を実行します。 3. 関数実行プロセス中に data で定義された属性が使用されると、属性の get メソッドがトリガーされます。 get メソッドでは、Dep インスタンス オブジェクト dep が Dep.target に格納されている w を dep.subs 配列に格納して、依存関係のコレクションを完了します。 注: Dep.targetは現在のウォッチャーのインスタンスオブジェクトです。 3.2 依存関係の更新宣言したプロパティを変更すると、プロパティの set メソッドがトリガーされます。set メソッドは、dep.subs 配列に収集された Watcher インスタンス オブジェクトを更新します。つまり、computed および watch で定義した関数をトリガーします。 4. ソースコードのデバッグ4.1 テストページコード<テンプレート> <div> <div>a:<input v-model="a" /> </div> <div>c:{{ c }}</div> <div>b:<input v-model="b" /> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ: () => { 戻る { a: ''、 b: '' } }, 計算: { c() { 'source from ' + this.a を返します。 } }, 時計: b() { console.log('bが変更されました'); } } }; </スクリプト> 上記のコードは、Vue が初期化された後に次のオブジェクトを生成します。 1. オブジェクトの説明属性 a と b に対応する Dep インスタンス オブジェクト (a と b が変更されたときに更新する必要があるウォッチャーを収集): ページ レンダリング関数は、対応する Watcher インスタンス オブジェクト 計算プロパティ c は、対応する Watcher インスタンス オブジェクト ウォッチ リスナー属性 b は、対応する Watcher インスタンス オブジェクト 2. DepとWatcherの関係a と b が変更されるとページを再レンダリングする必要があるため、 計算されたプロパティ c はプロパティ a の変更に依存するため、 b の変更は、watch の定義内の b の listen 関数をトリガーするため、 3. 最終的な関係の結果最後のプロパティ a は依存関係を収集します 最終プロパティ b は依存関係を収集します 4.2 ソースコードのデバッグソースファイルを見つけます: 主に以下の機能が含まれます。 1. コレクション依存のエントリ関数: initState (ページが初期化されるときに実行されます)。初期化の順序は、データ --> 計算済み --> ウォッチです。これは、計算済みがデータに依存し、ウォッチがデータとウォッチに依存するため、依存するものを最初に初期化する必要があるためです。 2. 計算と監視を初期化するときに、ウォッチャーインスタンス化オブジェクトを生成するまずWatcher.get関数を実行し、Dep.targetを現在のWatcherインスタンス化オブジェクトに設定します。 依存関係の収集をトリガーする 計算プロパティで関数を実行します。データ内のプロパティにアクセスすると、データ プロパティの get メソッドがトリガーされ、依存関係の収集がトリガーされます。 このプロパティが変更されると、set メソッドがトリガーされ、dep.subs 内のウォッチャー オブジェクトの更新がトリガーされます。 最後に、Watcher の更新関数がトリガーされ、更新されるウォッチャーがキューに入れられます。 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTML のスクロールバーについて/スクロールバーの削除
>>: @media レスポンシブ CSS を使用してさまざまな画面に適応する例
MySQL では、REVOKE ステートメントを使用してユーザーの特定の権限を削除できます (ユーザ...
ボリュームデータボリュームは Docker の重要な概念です。データ ボリュームは、1 つ以上のコン...
目次1. 画像のバイナリデータを表示する方法2. 絵の種類の見分け方3. 画像の種類を検出する方法3...
目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...
序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...
1. MySQL Yumリポジトリを追加するMySQL公式サイト>ダウンロード>MySQ...
注: データベースのバージョンの問題により、プロジェクトの起動時にエラーは発生しませんでしたが、デー...
人気があり強力な Apache Web サーバーで 2 つ以上のサイトをホストする方法。前回の記事で...
目次序文始めるステップトラブルシューティング序文CPU 使用率が高くなるのは、オンラインでよくある問...
1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element....
序文PC サーバーは今日まで発展を続け、パフォーマンスにおいて大きな進歩を遂げてきました。 64ビッ...
Robots.txt はプレーンテキスト ファイルであり、Web サイト管理者は、ロボットによるアク...
ul liの前のアイコン1をキャンセルしますクリア値1値を1に設定ラベル中央値1をクリアラベルの中央...
前提条件: Mac、zsh がインストールされ、bash のときに mysql がダウンロードされ、...
インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...