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