背景仕事では、ページに表示されるデータが正しくなく、フロントエンドの同僚がそのデータを見つける必要があるという状況が時々発生します。 Vue で構築された SPA アプリケーションでは、初期化から最終的な表示まで、ページに最終的に表示されるデータは単純な場合も複雑な場合もあります。複雑なデータ フローに遭遇した場合、適切な方法がないとトラブルシューティングが困難になります。 データが変更されたときのコールスタックを確認できれば、間違ったデータが生成される前に何が起こったのか、また、エラーのどのステップが最終的なエラーにつながったのかがわかります。コールスタックによって提供される手がかりに従うことで、問題をすばやく見つけることができます。 例<テンプレート> <div> <!-- 期待される出力: hello,world --> <!-- 実際の出力: hello,woold --> {{メッセージ}} <button @click="f1">メッセージを変更</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { メッセージ: 'こんにちは、'、 } }, メソッド: { f1() { this.msg += 'w' this.f2(); }, f2() { this.msg += 'oo'; this.f3(); }, f3() { this.msg += 'ld' } } }; </スクリプト> 誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定するページの右側のコール スタックでは、f1 と msg のコールバックを確認できますが、f2 と f3 は確認できません。つまり、f2 と f3 は失われますが、実際にデータ エラーを引き起こすのは f2 です。 f2 と f3 の呼び出し情報が失われるのはなぜですか? f1、f2、f3 はすべて msg を変更したため、同じマイクロタスクで msg のウォッチャーがトリガーされました。f1 が最初にトリガーされたため、f2 と f3 のトリガーは無効でした。 Watcher コールバックが最終的に実行されると、f1 がそれをトリガーしたことのみが記憶されるため、この時点でのコール スタックでは f1 の情報しか見ることができません。 正しいアプローチnode_modules\vue\dist\vue.runtime.esm.js に移動し、defineReactive 関数の set メソッドにブレークポイントを追加します。ここで重要なのは、監視する変数の名前です。 ここでは、msg の変更の完全なプロセスを確認し、f2 によって発生した問題をすばやく見つけることができます。 要約するコールスタックを表示することで、プロジェクトに精通していなくても、データ エラーが発生した場所をすぐに見つけることができます。 console.log を使用したり、コード ロジックを整理するために多くの時間を費やしたりするのと比較して、データ フロー方式を使用すると、作業負荷を大幅に削減できます。 上記は、Vue がデータの変更を追跡する方法の詳細です。Vue によるデータの変更の追跡の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: CentOSバージョンにDockerをインストールする際のエラーの解決方法
多くの場合、サーバーでスクリプトを定期的に実行して操作をトリガーする必要があります。たとえば、Qin...
docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...
この記事では、例を使用して、MySQL マスター/スレーブ レプリケーションと読み取り/書き込み分離...
1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...
Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...
1. はじめに最近、開発者が誤ってデータを削除したり更新したりするケースがよくあります。今回もまた問...
1. ブリッジ: デフォルトでは VMnet0 が使用されます1. 原則:ブリッジは、それぞれ 2...
テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...
ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...
目次序文OpenJDKの確認とアンインストールダウンロードした圧縮パッケージを使用してJDKをインス...
目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...
cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...
Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....
Ubuntu でサービスを作成し、自動的に起動する方法: 1. [/lib/systemd/syst...
通常、デッドロックが発生すると、重みが最も小さい接続が強制終了され、ロールバックされます。ただし、最...