Vue がルート変更を監視するときに watch メソッドが複数回実行される理由と解決策

Vue がルート変更を監視するときに watch メソッドが複数回実行される理由と解決策

私はフロントエンドの新人ですが、バックエンドのバグの中断のない生産管理に尽力しており、これを自分自身の励みにしています。最近依頼を受け、インターネットで多くの事例を検索しましたが、根本的な問題は解決されませんでした。ここで私自身の解決過程を記録しておきます。Nuggetsで話すのも初めてなので、お手柔らかにお願いします。

要件の説明:

ページ A と B の 2 つのページがあります。ページ A の orderId は、ルーティング パラメータによってページ B に渡され、データ関連付けクエリが実行され、ページ B に表示される必要があります。

要件分析:

この要件がわかれば、ページ B のルートの変更を監視し、データを照会するメソッドを実行するためのパラメータを取得することを考えるのは簡単なはずです。

ニーズの解決

ページA:

定数ルート = {
        名前: 'BpageName',
        パラメータ: { orderId: this.tableData[index].id },
        メタ: {
          タイトル: 「ページB」
        }
      }
this.$router.push(ルート)

ページBを再度開くためのルートをプッシュする

次に、ページ B はルーティング パラメータを受け入れます。

@Watch('$route.params.packageId')
routeParamsChanged(newParams: any, oldParams: any) :void { // 渡されたパラメータの変更を監視してパラメータを再コピーする if (newParams) {
      this.getList(新しいパラメータ)
    }
}

シンプルに見えませんか?

しかし、問題は、ページ B にキープアライブ ページ キャッシュがあるため、ルートが初めて切り替えられたときに routeParamsChanged メソッドが 1 回だけ実行され、期待どおりの効果が得られないことです。ただし、ページ B を閉じたり、ページ B を閉じずにページ A からページ B にジャンプしたりすると、routeParamsChanged メソッドが 2 回以上トリガーされます。
多くの情報を確認した後、Vue プロジェクト ウォッチで関数が繰り返しトリガーされる問題がこの状況の原因であることがわかりました。

解決策1: fullPathがページAであるかどうかを判断する

if (this.$route.fullPath === 'ページルーティングパス') {
    // 何かをする
}

ワクワクしながら試してみました。

@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 渡されたパラメータの変更を監視してパラメータを再コピーします if (newParams === '/Apage') {
      this.getList(新しいパラメータ)
    }
}

結果はまだ機能しておらず、routeParamsChanged メソッドは依然として 2 回以上実行されます。 解決策 2: ページがアクティブ状態かどうかを判断するためのフラグ パラメータを追加します。キープアライブ キャッシュを使用するコンポーネントは、アクティブ化イベントと非アクティブ化イベントのみをトリガーするため、これら 2 つのイベントがトリガーされたときにフラグを true と false に設定します。GetList() は、フラグが true の場合にのみ実行されます。

プライベート activatedFlag: ブール値 = false
アクティブ化(){
    this.activatedFlag = true;
}

非アクティブ化(){
    this.activatedFlag = false;
}
@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // 渡されたパラメータの変更を監視してパラメータを再コピーします if (newParams && this.activatedFlag) {
      this.getList(新しいパラメータ)
    }
}

今回は修正されましたか?結果はまだ機能しておらず、routeParamsChanged メソッドは依然として 2 回以上実行されます。 クラッシュ...

問題解決

上記のソリューション 2 を参考にして、パラメータを取得するメソッドと、activated() ライフサイクル フック関数内でデータを取得するメソッドを呼び出すメソッドを最終的に実装できます。ルートの変更をリッスンする必要はありません。this.$route.params.orderId を取得するだけでデータを取得できます。

プライベート activatedFlag: ブール値 = false
アクティブ化(){
    this.activatedFlag = true
    if (this.$route.params.orderId && this.activatedFlag) {
      this.getList(this.$route.params.orderId)
    }
}

非アクティブ化(){
    this.activatedFlag = false;
}

完了しました。ついに解決しました。専門家の皆様、コードについてコメントをお願いします。より良い意見や提案がある場合は、コメントを残してガイダンスを提供してください。

以上が、Vue がルート変更を監視する際に、watch メソッドが複数回実行される理由と解決策の詳細な内容です。Vue watch メソッドが複数回実行される理由と解決策の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • 同じページを動的にロードするための Vue ルーティングリスニングの例
  • VueはルーティングフックインターセプターbeforeEachとafterEachを使用してルーティングを監視します
  • Vueはブラウザのネイティブリターンボタンをリッスンしてルートジャンプ操作を実行します。
  • Vueはルートの変更を監視し、App.vueファイル内のページを更新します。
  • Vueルーティングキャッシュルーティングネストルーティングガードは物理的な戻り操作をリッスンします
  • Vue がルート変更を監視するいくつかの方法の概要

<<:  Linux での MySQL 5.7.19 (tar.gz) インストール グラフィック チュートリアル

>>:  LinuxでSVNサーバーを構築する方法

推薦する

docker-compose を使用して Clickhouse をすばやくデプロイする方法のチュートリアル

ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...

VMware で Nginx+KeepAlived クラスタ デュアルアクティブ アーキテクチャを展開する際の問題と解決策

序文負荷分散には nginx を使用します。アーキテクチャのフロントエンドまたは中間層として、トラフ...

MySQLで負荷分散を実装する方法

序文MySQL は、クライアント/サーバー構造に基づく、高速、高性能、マルチスレッドのオープン ソー...

CocosCreator最適化DrawCallの詳細な説明

目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...

Linux echo テキスト処理コマンドの使用法と例

Linux ヘルプ ドキュメントでの echo の説明は、Python や Java などのプログラ...

jQueryは画像の強調表示を実現します

ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...

Vue の proto ファイルの関数呼び出しのグラフィカルな説明

1. protoをコンパイルするすべての .proto ファイルを保存するために、src フォルダー...

MySQL のレイテンシ問題とデータフラッシュ戦略プロセスの分析

目次1. MySQLレプリケーションプロセス2. MySQLの遅延問題の分析3. プロモーション期間...

Windows で nginx を素早くインストールし、自動的に起動するように設定する

目次1. Windows システムでの Nginx のインストールと起動プロセス: 2. 起動時にN...

JavaScriptの原理と方向性

これが何を指しているのかをどのように判断するのでしょうか? ①グローバル環境で呼び出された場合はwi...

Apache の一般的な仮想ホスト設定方法の分析

1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...

Vueプロジェクトのパッケージングと展開の実際のプロセスの記録

目次序文1. 準備 - サーバーとnginxの使用1. サーバーを準備する2. nginxをインスト...

CSSのborder-radiusプロパティを使用して円弧を設定します

現象: divを一定の振幅で円、楕円などに変更する方法: CSSのborder-radiusプロパテ...

Webpack プロジェクトでローダー プラグインをデバッグする方法

最近、webpackの使い方を学んでいたときに、webpack-replace-loaderの設定正...

Vue3.0 における Ref と Reactive の違いの詳細な分析

目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...