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 を使用してさまざまな画面に適応する例
ビジネス ソーシャル ネットワーキング サイト LinkedIn は最近、ナビゲーション バーとユー...
概要中小規模のプロジェクトでは、特にレポートを作成するときに、結合テーブル クエリが非常に一般的な操...
jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...
開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...
背景すべての業務を Docker の運用管理に移行してから、一連の落とし穴に遭遇しましたが、今回は ...
VMware Tools は VMware 仮想マシンに付属するツールで、VirtualBox (...
注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...
目次1. 浅いコピーとはどういう意味ですか? 2. ディープコピーとはどういう意味ですか? 3. デ...
この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...
目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...
カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...
目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...
背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...
CSS 属性セレクターは素晴らしいです。大量のクラス名を追加することを回避し、コード内の問題を指摘す...
最初の方法: docker インストール1. オープンソース版のイメージを取得する2. 対応するデー...