Vue はデータの変更をどのように追跡しますか?

背景

仕事では、ページに表示されるデータが正しくなく、フロントエンドの同僚がそのデータを見つける必要があるという状況が時々発生します。

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 の他の関連記事に注目してください。