Bagaimana untuk menutup komponen luaran vue

Vue.js ialah rangka kerja progresif yang membolehkan anda membina komponen boleh guna semula dengan mudah dengan menggabungkan pelbagai fungsi. Komponen Vue biasa biasanya dibuka semasa beberapa jenis interaksi, tetapi kadangkala ia juga perlu ditutup dalam keadaan tertentu. Artikel ini akan memperkenalkan cara untuk mematikan pendengaran acara, pemasa, permintaan ajax dan sumber lain di luar komponen dalam Vue untuk mengelakkan kebocoran memori dan meningkatkan prestasi aplikasi.

1. Mendengar acara

Apabila komponen dimuatkan, ia sering menambah pendengar acara supaya ia boleh bertindak balas kepada pelbagai operasi pengguna semasa interaksi. Jika pendengar acara ini tidak diketepikan tepat pada masanya, kebocoran memori akan berlaku, menyebabkan aplikasi menjadi perlahan dan akhirnya ranap.

Penyelesaian: Sebelum komponen dimusnahkan, semua pendengar acara komponen perlu dialih keluar. Anda boleh melakukan operasi berikut dalam fungsi cangkuk beforeDestroy komponen:

beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
  element.removeEventListener('click', this.handleClick);
}

Kod di atas akan mengalih keluar acara tatal dan klik pendengar acara sebelum komponen dimusnahkan supaya ia tidak lagi menduduki memori.

2. Pemasa

Pemasa ialah satu lagi masalah biasa yang menyebabkan kebocoran memori. Senario biasa ialah pemasa dicipta apabila komponen dimuatkan, tetapi jika komponen dipunggah sebelum dimusnahkan, pemasa akan terus berjalan dan menduduki memori.

Penyelesaian: Semua pemasa perlu dikosongkan sebelum komponen dimusnahkan. Anda boleh melakukan operasi berikut dalam fungsi cangkuk beforeDestroy komponen:

beforeDestroy() {
  clearInterval(this.timer);
}

Kod di atas akan mengosongkan semua pemasa sebelum komponen dimusnahkan supaya ia tidak lagi menduduki memori.

3. Permintaan Ajax

Permintaan Ajax ialah operasi tak segerak yang sangat biasa. Jika komponen mencipta permintaan Ajax dan tidak menamatkannya sebelum komponen dimusnahkan, permintaan itu akan terus menduduki memori.

Penyelesaian: Semua permintaan Ajax yang belum selesai perlu dibatalkan sebelum komponen dimusnahkan. Untuk mencapai matlamat ini, anda boleh merangkum semua permintaan Ajax ke dalam Promise dan membatalkan permintaan menggunakan fungsi cancelToken yang disediakan oleh axios. Apabila komponen dimusnahkan, batalkan semua permintaan tertunggak di bawah komponen.

// 封装成Promise
const get = (url, data) => {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: data,
      cancelToken: new axios.CancelToken(function(cancel) {
        // 将cancel存储在请求列表中
        requestList.push({ cancel });
      })
    })
    .then(res => {
      resolve(res.data);
    })
    .catch(err => {
      reject(err);
    });
  });
}

// 取消封装的请求
beforeDestroy() {
  // 取消所有未完成的请求
  requestList.forEach(item => item.cancel());
  // 清空取消列表
  requestList = [];
}

Kod di atas merangkum setiap permintaan ke dalam Promise dan menyimpannya dalam senarai permintaan supaya ia boleh dibatalkan. Dalam fungsi cangkuk pemusnahan komponen, panggil fungsi batal setiap permintaan untuk membatalkan semua permintaan yang belum selesai.

Sumber keluaran dalam Vue adalah sangat penting bukan sahaja untuk mengelakkan kebocoran memori tetapi juga untuk meningkatkan prestasi aplikasi anda. Jika komponen anda telah menambah pendengar acara, pemasa atau permintaan Ajax, pastikan anda mempertimbangkan untuk mengeluarkan sumber ini apabila menutup komponen.

Atas ialah kandungan terperinci Bagaimana untuk menutup komponen luaran vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!