背景仕事では、ページに表示されるデータが正しくなく、フロントエンドの同僚がそのデータを見つける必要があるという状況が時々発生します。 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をインストールする際のエラーの解決方法
リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...
目次序文sudo書き込み権限を追加するgit 2.9.0をインストールopenssl 1.1.1l ...
NC のフルネームは Netcat (Network Knife) で、作成者は Hobbit &a...
コマンドライン mysqld –skip-grant-tables は mysql8 では正常に起動...
ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...
目次Promise の基本的な使用法: 1. Promiseオブジェクトを作成する2. プロミス方式...
1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...
protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...
操作効果コードの実装html <div id="ウォッチ"> <...
注意: 3 番目の方法は XSell でのみ使用され、finalsell では使用できません。方法1...
CSS を使用するだけで、コーナーカット + ボーダー + 投影 + コンテンツの背景色のグラデーシ...
vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...
私がデザインした最初の Web ページは次のとおりです。 私はこの業界に7年間在籍し、プログラミング...
コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...
1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...