Bagaimana untuk memusnahkan halaman sebelumnya sebelum Vue melompat

Dengan pembangunan rangka kerja bahagian hadapan, semakin banyak tapak web dan aplikasi mula menggunakan Vue sebagai rangka kerja bahagian hadapan. Sebagai rangka kerja yang ringan, Vue mempunyai ciri yang sangat baik seperti responsif dan komponenisasi. Walau bagaimanapun, apabila menggunakan Vue untuk melompat ke halaman, beberapa masalah mungkin berlaku, seperti halaman sebelumnya tidak dimusnahkan, mengakibatkan penggunaan memori yang berlebihan, pendengar acara tidak dipisahkan dengan betul, dsb. Artikel ini akan memperkenalkan cara untuk memusnahkan halaman sebelumnya sebelum melompat dalam Vue.

1. Memusnahkan pendengar acara halaman sebelumnya

Dalam Vue, kami boleh menambah pendengar acara melalui fungsi kitaran hayat() yang dicipta. Sebagai contoh, dalam komponen, kita perlu mendengar acara roda tetikus:

created() {
  window.addEventListener('wheel', this.onWheel);
}

Pendengar acara ini ditambah apabila komponen dibuat, tetapi apabila kita melompat ke halaman, halaman sebelumnya tidak dimusnahkan. Pendengar acara ini Pelayan belum dipadamkan. Ini mungkin menyebabkan beberapa masalah, seperti acara roda skrol penyemak imbas dipantau oleh berbilang halaman pada masa yang sama, meningkatkan penggunaan memori dan penggunaan prestasi.

Untuk mengelakkan situasi ini, kita perlu mengalih keluar pendengar acara apabila komponen dimusnahkan. Ini boleh dicapai dalam fungsi kitaran hayat beforeDestroy():

beforeDestroy() {
  window.removeEventListener('wheel', this.onWheel);
}

Fungsi ini akan dipanggil sebelum tika Vue dimusnahkan dan mengalih keluar pendengar kejadian roda.

2. Memusnahkan pemasa halaman sebelumnya

Dalam Vue, kita boleh menetapkan pemasa melalui setInterval() dan setTimeout(). Pemasa ini boleh ditambah apabila komponen dicipta, tetapi mungkin tidak dikosongkan dengan betul apabila komponen dimusnahkan. Jika pemasa tidak dikosongkan dalam masa, ia akan terus berjalan sehingga halaman dipunggah atau pelayar dimuat semula.

Untuk mengelakkan situasi ini, kita perlu mengosongkan pemasa apabila komponen dimusnahkan. Ini boleh dicapai melalui fungsi kitaran hayat beforeDestroy():

beforeDestroy() {
  clearInterval(this.intervalId);
  clearTimeout(this.timeoutId);
}

Fungsi ini akan dipanggil sebelum tika Vue dimusnahkan dan mengosongkan pemasa selang dan tamat masa.

3. Memusnahkan komponen bukan Vue pada halaman sebelumnya

Selain komponen Vue itu sendiri, mungkin terdapat beberapa komponen bukan Vue pada halaman, seperti pemalam daripada perpustakaan pihak ketiga juga perlu dibersihkan dengan betul. Jika komponen ini tidak dimusnahkan, ia mungkin terus menduduki memori dan sumber, menyebabkan kemerosotan prestasi halaman dan kebocoran memori.

Dalam fungsi kitaran hayat beforeDestroy() komponen Vue, kita boleh menggunakan kaedah destroy() untuk memusnahkan komponen bukan Vue. Contohnya, jika kami menggunakan pemalam pihak ketiga dalam komponen:

created() {
  this.$plugin = new Plugin();
  this.$plugin.init();
}

beforeDestroy() {
  this.$plugin.destroy();
}

Coretan kod ini menunjukkan cara untuk memusnahkan pemalam pihak ketiga. Pada penciptaan komponen, kami mencipta contoh pemalam baharu dan memanggil kaedah init(). Apabila komponen dimusnahkan, kami memanggil kaedah destroy() untuk memusnahkan pemalam dan melepaskan memori.

Ringkasan

Memusnahkan halaman sebelumnya sebelum melompat dalam Vue ialah isu penting yang, jika tidak dikendalikan dengan betul, boleh menyebabkan kemerosotan prestasi dan kebocoran memori. Artikel ini menerangkan cara untuk memusnahkan pendengar acara, pemasa dan komponen bukan Vue dengan betul melalui fungsi kitaran hayat Vue. Dalam proses pembangunan sebenar, pelarasan dan pemprosesan yang sepadan hendaklah dibuat mengikut situasi tertentu untuk memastikan prestasi dan kestabilan halaman.

Atas ialah kandungan terperinci Bagaimana untuk memusnahkan halaman sebelumnya sebelum Vue melompat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!