Mengapakah vue mempunyai kitaran hayat?

Vue.js ialah rangka kerja JavaScript bahagian hadapan yang popular yang membantu pembangun membina aplikasi web dinamik. Ciri utama Vue.js ialah kaedah kitaran hayatnya. Kaedah kitar hayat ialah kaedah yang dijalankan pada titik masa tertentu apabila dipanggil dalam aplikasi web, dan kaedah ini membenarkan pembangun mengawal keadaan dan tingkah laku komponen.

Mengapa Vue.js mempunyai kaedah kitaran hayat? Untuk apa mereka digunakan? Dalam artikel ini, kami akan membincangkan isu ini dan meneroka kaedah kitaran hayat Vue.js dalam tindakan.

Kaedah kitar hayat Vue.js

Dalam komponen Vue.js, kaedah kitaran hayat ialah satu siri kaedah yang dipanggil dalam susunan tertentu. Kaedah ini dipanggil apabila komponen dibuat, dikemas kini atau dimusnahkan. Setiap kaedah mempunyai tujuan khusus dan kes penggunaannya, dan susunan kaedah ini dilaksanakan dipanggil "kitaran hayat."

Kaedah kitaran hayat Vue.js dibahagikan kepada tiga kategori:

1 Kitaran penciptaan: kitaran yang berjalan apabila komponen dimulakan, termasuk sebelumCreate, dicipta, beforeMount dan dipasang.
2. Kitaran kemas kini: kitaran yang berjalan apabila data berubah, termasuk sebelumKemas kini dan dikemas kini.
3. Kitaran pemusnahan: kitaran yang berjalan apabila komponen dimusnahkan, termasuk sebelum Musnah dan musnah.

Kaedah kitaran ini membolehkan pembangun melaksanakan operasi semasa kitaran hayat, seperti memulakan keadaan, mengendalikan data tak segerak, mendaftarkan pendengar acara dan membersihkan apabila komponen dimusnahkan.

Kebergunaan Kaedah Kitar Hayat

Membina komponen Vuejs dan menambah pendengar acara, data awal dan keadaan komponen boleh menjadi sukar, terutamanya untuk aplikasi yang besar. Vue.js menyediakan beberapa kaedah kitar hayat yang memudahkan pembangun mengawal kitaran hayat komponen. Kaedah ini membolehkan pembangun mengurus komponen dengan lebih baik supaya ia dilaksanakan pada masa yang sesuai.

Berikut ialah kegunaan setiap kitaran yang mungkin:

• beforeCreate: Berjalan selepas kejadian dibuat, tetapi sebelum data dan peristiwa ditetapkan.
• dicipta: Masa yang sesuai untuk menentukan sama ada data sudah sedia dan cara ia akan digunakan sebelum ia tersedia.
• beforeMount: Berjalan sebelum memasang elemen DOM.
• dilekapkan: Elemen dipasang, kami boleh melakukan operasi dalam kaedah ini
• sebelumKemas kini: Apabila data komponen berubah, ini adalah masa yang baik untuk melakukan semakan akhir sebelum kami mengubah suai data. Sebarang pengubahsuaian yang berlaku pada masa ini akan berlaku sebelum data dipaparkan semula.
• dikemas kini: Dipanggil apabila data dalam komponen telah ditukar dan DOM telah dikemas kini.
• beforeDestroy: Lakukan sebarang operasi pembersihan sebelum komponen dimusnahkan, seperti mengalih keluar pendengar acara atau membatalkan pemasa.
• dimusnahkan: Komponen dan arahan telah dimulakan dan ditubuhkan, dan memori serta sumber lain dikeluarkan pada peringkat ini.

Sebagai contoh, untuk proses panggilan Ajax, kita boleh menggunakan kaedah beforeCreate dan cipta kerana kita perlu mendapatkan data dan memastikan data wujud dalam skop contoh. Kaedah beforeMount dan mounted boleh digunakan untuk mengesahkan sama ada elemen DOM tersedia untuk kemas kini. Jika memori atau sumber lain digunakan, anda boleh menggunakan kaedah beforeDestroy dan musnah untuk membersihkannya.

Kaedah kitaran hayat dalam tindakan

Pertimbangkan contoh berikut:

eksport lalai {
data() {

return {
  message: "Hello World"
};

} ,
dicipta() {

console.log("created called");

},
dipasang() {

console.log("mounted called");

},
dikemas kini() {

console.log("updated called");

},
musnah() {

console.log("destroyed called");

}
};

Untuk memudahkan demonstrasi dan melihat kaedah kitaran hayat Pelaksanaan status, kod mengeluarkan console.info(). Dalam contoh ini, kami mentakrifkan atribut data "mesej" dan empat kaedah kitaran hayat: dicipta, dipasang, dikemas kini dan dimusnahkan.

Semasa dibuat, konsol mengeluarkan "dicipta dipanggil". Ini kerana pada ketika ini Vue.js telah menyelesaikan secara dalaman kerja-kerja menginstant objek komponen dan menyediakan data dan peristiwa, tetapi ia masih belum diberikan kepada halaman.

Seterusnya, kami berinteraksi dengan DOM dalam fasa yang dipasang dan output "dipanggil dipasang". Ini kerana ia kelihatan semasa "dilekapkan" dan boleh berinteraksi dengan DOM.

Apabila kod terus berubah, data juga akan diubah suai. dikemas kini akan dipanggil apabila data dikemas kini. console.info() output log berubah kepada "dipanggil dikemas kini".

Akhir sekali, apabila komponen itu dimusnahkan, ia dipanggil musnah. Menurut console.info(), "dipanggil musnah" ialah output, menghentikan penggunaan sumber dalam contoh dan menamatkan kitaran hayat komponen.

Ringkasan

Kaedah kitar hayat Vue.js ialah salah satu ciri teras rangka kerja, kerana ia membenarkan pembangun mengawal gelagat dan keadaan komponen. Kaedah kitar hayat dilaksanakan dalam susunan tertentu, membenarkan pembangun melakukan perkara yang betul pada masa yang betul, seperti memulakan komponen, mengendalikan data tak segerak, mendaftarkan pendengar acara dan membersihkan memori apabila komponen dimusnahkan. Kewujudan kaedah kitaran hayat membolehkan pembangun mengurus keseluruhan kitaran hayat aplikasi dengan lebih baik, dengan itu memberikan pengalaman aplikasi yang dioptimumkan.

Atas ialah kandungan terperinci Mengapakah vue mempunyai kitaran hayat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!