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

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

以下もご興味があるかもしれません:
  • Vue2.0/3.0双方向データバインディングの実装原理の詳細説明
  • vuexの強制リフレッシュによるデータ損失問題の分析
  • Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)
  • Vueデータ割り当て問題の解決
  • Vueはデータを初期状態にリセットします
  • Vue コンポーネント値転送中のデータ損失の分析と解決
  • SpringBoot+Vueでデータ追加機能を実現
  • 手書きの Vue2.0 データハイジャックの例
  • Vueデータ双方向バインディング実装方法
  • Vueでデータを読み取るためにこれを悪用しないでください
  • Vue でデータコレクターを設計する

<<:  CentOSバージョンにDockerをインストールする際のエラーの解決方法

>>:  Docker が MySQL を作成する説明

推薦する

Linux CentOS でスクリプトを定期的に実行するように設定する方法

多くの場合、サーバーでスクリプトを定期的に実行して操作をトリガーする必要があります。たとえば、Qin...

docker createコマンドの使用方法

docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...

MySQL のマスタースレーブレプリケーションと読み取り書き込み分離の原理と使用法の詳細な説明

この記事では、例を使用して、MySQL マスター/スレーブ レプリケーションと読み取り/書き込み分離...

WindowsでcmdからDOSウィンドウに入り、MySQLデータベースにアクセスします。

1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...

JSはキャンバス技術を使用してeChartsの棒グラフを模倣します

Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...

MySQL で二重引用符の位置が誤っていたために起きた殺人事件の詳細な分析

1. はじめに最近、開発者が誤ってデータを削除したり更新したりするケースがよくあります。今回もまた問...

VMware 仮想マシンの 3 つのネットワーク方式と原則 (概要)

1. ブリッジ: デフォルトでは VMnet0 が使用されます1. 原則:ブリッジは、それぞれ 2...

html+vue+element-ui のスムーズさを 1 分で体験

テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...

Linuxのファイル操作の知識ポイントを詳しく解説

ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...

CentOS システムでの JDK のインストールと設定の概要

目次序文OpenJDKの確認とアンインストールダウンロードした圧縮パッケージを使用してJDKをインス...

Ubuntu 18.04 でソースコードから Odoo14 をインストールするチュートリアル

目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...

mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題

cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...

VMware仮想マシンを使用してUbuntu 20.04をインストールする完全なチュートリアル

Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....

Ubuntu ブート自動起動サービス設定

Ubuntu でサービスを作成し、自動的に起動する方法: 1. [/lib/systemd/syst...

MySQLのデッドロックチェック処理の通常の方法

通常、デッドロックが発生すると、重みが最も小さい接続が強制終了され、ロールバックされます。ただし、最...