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 を作成する説明

推薦する

Nginx リバース プロキシと負荷分散の実践

リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...

CentOS7 で ethereum/Ethereum を最初からインストールする

目次序文sudo書き込み権限を追加するgit 2.9.0をインストールopenssl 1.1.1l ...

Linux ncコマンドの概要

NC のフルネームは Netcat (Network Knife) で、作成者は Hobbit &a...

XHTML CSSを使用して正式なブログを書く

ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...

JavaScript における Promise の詳細な説明

目次Promise の基本的な使用法: 1. Promiseオブジェクトを作成する2. プロミス方式...

Win10 での MySQL 8.0.16 のインストールと設定のチュートリアル

1. MySQL 8.0.16を解凍する次の図に示すように、解凍後にdadaフォルダとmy.ini構...

protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル

protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...

実行中の時計を実装するための純粋な CSS3 コード

操作効果コードの実装html <div id="ウォッチ"> <...

MySQLデータベースでコマンドを自動補完する3つの方法

注意: 3 番目の方法は XSell でのみ使用され、finalsell では使用できません。方法1...

CSSはコーナーカット+ボーダー+投影+コンテンツ背景色のグラデーション効果を実現します

CSS を使用するだけで、コーナーカット + ボーダー + 投影 + コンテンツの背景色のグラデーシ...

vue-element-admin プロジェクトのインポートとエクスポートの実装

vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...

ブログデザイン ウェブデザイン デビュー

私がデザインした最初の Web ページは次のとおりです。 私はこの業界に7年間在籍し、プログラミング...

IEのクラッシュバグ

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

初心者のための HTML コーディングガイドライン 30 選

1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...