Vue のインターフェイスが 2 回呼び出されるのはなぜですか?

Vue で開発していると、Vue コンポーネントのライフサイクル関数 (LifeCycle Hook) の実行順序と Vue のレンダリング機構に起因して、インターフェイスが 2 回呼び出される問題がよく発生します。

まず、作成、マウント、更新、その他の機能など、Vue コンポーネントのライフサイクル機能を理解する必要があります。コンポーネントが作成されると、これらのライフサイクル関数が特定の順序で自動的に呼び出されます。これらの関数の実行順序は次のとおりです:

1. created 関数: この関数は Vue インスタンスの作成直後に呼び出されます;
2. mounted 関数: この関数は Vue インスタンスの作成後に呼び出されますインスタンスは DOM にマウントされます;
3. updated 関数: この関数は、Vue インスタンスが更新された後に呼び出されます。

上記のライフサイクル関数の実行シーケンスを通じて、マウントされた関数は DOM レンダリングの完了後に実行され、インターフェイス要求は通常、マウントされた関数内で行われることがわかります。ただし、Vue のレンダリング メカニズムでは、マウントされた関数が最初のレンダリング時とデータの更新時に 1 回呼び出されるため、インターフェイスが 2 回呼び出されます。

Vue では、ビューのレンダリングは非同期です。データが更新されると、Vue は最初にデータを更新し、次に次のイベント ループでビューを更新します。その結果、マウントされた関数でインターフェイス要求を行う場合、コンポーネントが最初にレンダリングされるときに最初の呼び出しが発生し、データが更新された後にコンポーネントが再レンダリングされるときに 2 番目の呼び出しが発生します。

それでは、インターフェイスが 2 回呼び出される問題を回避するにはどうすればよいでしょうか?いくつかの方法があります:

1. コンポーネントの頻繁なレンダリングを避けるために v-if ディレクティブを使用する

マウントされた関数でインターフェイス要求を行うとき、次のことに基づいて判断できます。条件 [次の場合のみ] インターフェイス リクエストは、コンポーネントが初めてレンダリングされるときにのみ開始されます。これは、v-if ディレクティブを使用することで実現できます。例:

<template>
  <div v-if="!isFetched">
    <!-- 接口请求相关的DOM结构 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFetched: false,
      responseData: null
    }
  },
  mounted() {
    if (!this.isFetched) {
      // 发起接口请求
      // 请求成功后将isFetched置为true，将responseData更新为接口返回值
      this.isFetched = true;
    }
  }
}
</script>

v-if ディレクティブを使用すると、コンポーネントが初めてレンダリングされるときにのみインターフェイス要求を開始するようになり、インターフェイスが 2 回呼び出される問題。

2. 作成された関数でインターフェイス リクエストを開始する

Vue のライフサイクル関数では、インスタンスが作成された直後、マウントされた関数よりも先に、作成された関数が呼び出されます。したがって、作成された関数内でインターフェイス リクエストを開始して、マウントされた関数内でインターフェイスが 2 回呼び出されるという問題を回避できます。

<template>
  <div>
    <!-- 接口请求相关的DOM结构 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      responseData: null
    }
  },
  created() {
    // 发起接口请求
    // 请求成功后将responseData更新为接口返回值
  }
}
</script>

作成した関数でインターフェイス リクエストを作成すると、コンポーネントは 2 回リクエストを行うのではなく、インターフェイスを 1 回だけ呼び出すようになります。

概要:

インターフェイスが 2 回呼び出される問題は、Vue コンポーネントのライフサイクル関数とレンダリング メカニズムが原因で発生します。v-if ディレクティブを使用するか、インターフェイス リクエストを開始できます。問題を解決するために作成した関数などのメソッド。実際の開発では、最高のパフォーマンスとユーザー エクスペリエンスを達成するために、特定の状況に応じてインターフェイスを 2 回呼び出すという問題を解決するための最も適切な方法を選択する必要があります。

以上がVue のインターフェイスが 2 回呼び出されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。