Mengapa antara muka dalam Vue dipanggil dua kali?

Apabila membangun dengan Vue, kami sering menghadapi masalah antara muka dipanggil dua kali Ini disebabkan oleh susunan pelaksanaan fungsi kitaran hayat komponen Vue (LifeCycle Hook) dan mekanisme pemaparan Vue.

Pertama sekali, kita perlu memahami fungsi kitaran hayat komponen Vue, seperti dicipta, dipasang, dikemas kini dan fungsi lain. Apabila komponen dicipta, fungsi kitaran hayat ini dipanggil secara automatik dalam susunan tertentu. Susunan pelaksanaan fungsi ini adalah seperti berikut:

1. fungsi yang dibuat: Fungsi ini dipanggil serta-merta selepas tika Vue dicipta;
2. fungsi dipasang: Fungsi ini dipanggil selepas Vue instance dipasang pada DOM;
3. fungsi yang dikemas kini: Fungsi ini dipanggil selepas tika Vue dikemas kini.

Melalui urutan pelaksanaan fungsi kitaran hayat di atas, boleh didapati bahawa fungsi yang dipasang dilaksanakan selepas pemaparan DOM selesai dan permintaan antara muka biasanya dibuat dalam fungsi yang dipasang. Walau bagaimanapun, mekanisme pemaparan Vue akan menyebabkan fungsi yang dipasang dipanggil sekali semasa pemaparan awal dan apabila data dikemas kini Inilah sebabnya antara muka dipanggil dua kali.

Dalam Vue, pemaparan paparan adalah tidak segerak Apabila data dikemas kini, Vue akan mengemas kini data dahulu, dan kemudian mengemas kini paparan dalam gelung acara seterusnya. Ini menyebabkan apabila membuat permintaan antara muka dalam fungsi yang dipasang, panggilan pertama berlaku apabila komponen pertama kali diberikan, dan panggilan kedua berlaku apabila komponen dipaparkan semula selepas data dikemas kini.

Jadi bagaimana kita boleh mengelakkan masalah antara muka dipanggil dua kali? Terdapat beberapa kaedah:

1. Gunakan arahan v-if untuk mengelakkan pemaparan komponen yang kerap

Apabila membuat permintaan antara muka dalam fungsi yang dipasang, kita boleh menilai berdasarkan hanya apabila Permintaan antara muka dimulakan hanya apabila komponen diberikan untuk kali pertama. Ini boleh dicapai dengan menggunakan arahan v-if, contohnya:

<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>

Menggunakan arahan v-if boleh memastikan bahawa komponen hanya akan memulakan permintaan antara muka apabila ia diberikan buat kali pertama, mengelakkan masalah antara muka dipanggil dua kali.

2. Mulakan permintaan antara muka dalam fungsi yang dicipta

Dalam fungsi kitaran hayat Vue, fungsi yang dicipta dipanggil serta-merta selepas kejadian dibuat, lebih awal daripada fungsi yang dipasang . Oleh itu, kita boleh memulakan permintaan antara muka dalam fungsi yang dicipta untuk mengelakkan masalah antara muka dipanggil dua kali dalam fungsi yang dipasang.

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

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

Membuat permintaan antara muka dalam fungsi yang dicipta boleh memastikan bahawa komponen hanya akan memanggil antara muka sekali, bukannya membuat dua permintaan.

Ringkasan:

Masalah antara muka dipanggil dua kali disebabkan oleh fungsi kitaran hayat komponen Vue dan mekanisme pemaparan Kita boleh menggunakan arahan v-if atau memulakan permintaan antara muka dalam fungsi dicipta, dsb. kaedah untuk menyelesaikan masalah. Dalam pembangunan sebenar, kita harus memilih cara yang paling sesuai untuk menyelesaikan masalah memanggil antara muka dua kali mengikut situasi tertentu untuk mencapai prestasi terbaik dan pengalaman pengguna.

Atas ialah kandungan terperinci Mengapa antara muka dalam Vue dipanggil dua kali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!