Perbezaan antara Vue3 dan Vue2: cangkuk kitaran hayat yang lebih kaya

Perbezaan antara Vue3 dan Vue2: cangkuk kitaran hayat yang lebih kaya

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web interaktif. Vue2 ialah versi Vue.js yang stabil, manakala Vue3 ialah versi terkini Vue.js. Vue3 membawa banyak penambahbaikan, salah satunya ialah cangkuk kitaran hayat yang lebih kaya. Artikel ini akan memperkenalkan perbezaan antara cangkuk kitaran hayat Vue3 dan Vue2 dan menunjukkannya melalui contoh kod.

Kait kitaran hayat Vue2
Dalam Vue2, kami mempunyai lapan cangkuk kitaran hayat yang boleh digunakan:

1. beforeCreate: dipanggil sebelum instance dibuat.
2. dicipta: Dipanggil selepas contoh dibuat, tetapi sebelum ia dipasang.
3. beforeMount: Dipanggil sebelum DOM dipasang.
4. dilekapkan: Dipanggil selepas DOM dipasang.
5. beforeUpdate: Dipanggil sebelum komponen dikemas kini.
6. dikemas kini: Dipanggil selepas komponen dikemas kini.
7. beforeDestroy: Dipanggil sebelum instance dimusnahkan.
8. dimusnahkan: Dipanggil selepas instance dimusnahkan.

Cakuk ini boleh membantu kami melakukan operasi yang sepadan pada peringkat yang berbeza, seperti melakukan beberapa tetapan awal selepas penciptaan contoh, atau melakukan beberapa operasi pembersihan selepas pemasangan DOM dan sebelum pemusnahan.

Kait kitaran hayat Vue3
Vue3 memperkenalkan cangkuk kitaran hayat baharu, sejumlah sepuluh:

1. sebelum Cipta: Sama seperti dalam Vue2, dipanggil sebelum tika dibuat.
2. dicipta: Sama seperti dalam Vue2, dipanggil selepas contoh dibuat, tetapi sebelum dipasang.
3. beforeMount: Sama seperti dalam Vue2, dipanggil sebelum DOM dipasang.
4. dilekapkan: Sama seperti dalam Vue2, dipanggil selepas DOM dipasang.
5. beforeUpdate: Sama seperti dalam Vue2, dipanggil sebelum komponen dikemas kini.
6. dikemas kini: Sama seperti dalam Vue2, dipanggil selepas komponen dikemas kini.
7. before Unmount: Dipanggil sebelum komponen dinyahlekap.
8. dilepaskan: Dipanggil selepas komponen dinyahlekap.
9. beforeDeactivate: Dipanggil sebelum komponen beralih.
10. dinyahaktifkan: Dipanggil selepas komponen beralih.

Kait kitaran hayat baharu memberi kita kawalan yang lebih baik ke atas pelbagai peringkat komponen.

Contoh Kod
Mari kita tunjukkan perbezaan antara cangkuk kitaran hayat Vue3 dan Vue2 dengan contoh kod mudah:

Vue2 Contoh:

Vue.component('my-component', {
  beforeCreate: function () {
    console.log('beforeCreate hook in Vue2');
  },
  created: function () {
    console.log('created hook in Vue2');
  },
  beforeMount: function () {
    console.log('beforeMount hook in Vue2');
  },
  mounted: function () {
    console.log('mounted hook in Vue2');
  },
  beforeUpdate: function () {
    console.log('beforeUpdate hook in Vue2');
  },
  updated: function () {
    console.log('updated hook in Vue2');
  },
  beforeDestroy: function () {
    console.log('beforeDestroy hook in Vue2');
  },
  destroyed: function () {
    console.log('destroyed hook in Vue2');
  },
  template: '<div>My Component</div>'
});

new Vue({
  el: '#app'
});

Vue3 Contoh:

const app = Vue.createApp({
  beforeCreate() {
    console.log('beforeCreate hook in Vue3');
  },
  created() {
    console.log('created hook in Vue3');
  },
  beforeMount() {
    console.log('beforeMount hook in Vue3');
  },
  mounted() {
    console.log('mounted hook in Vue3');
  },
  beforeUpdate() {
    console.log('beforeUpdate hook in Vue3');
  },
  updated() {
    console.log('updated hook in Vue3');
  },
  beforeUnmount() {
    console.log('beforeUnmount hook in Vue3');
  },
  unmounted() {
    console.log('unmounted hook in Vue3');
  },
  beforeDeactivate() {
    console.log('beforeDeactivate hook in Vue3');
  },
  deactivated() {
    console.log('deactivated hook in Vue3');
  },
  template: '<div>My Component</div>'
});

app.mount('#app');

Sila ambil perhatian bahawa kaedah Vue.createApp()方法创建应用程序实例，并使用app.mount() Vue3 digunakan aplikasi Dipasang pada elemen DOM.

Dengan menjalankan contoh kod di atas, anda akan melihat konsol mencetak log cangkuk kitar hayat yang berbeza untuk menunjukkan perbezaan antara Vue3 dan Vue2 dari segi cangkuk kitaran hayat.

Kesimpulan
Vue3 memperkenalkan cangkuk kitaran hayat yang lebih kaya berbanding Vue2, membolehkan kami mengawal tingkah laku komponen dengan lebih baik pada peringkat yang berbeza. Penambahbaikan cangkuk kitaran hayat ini menjadikan pembangunan dan penyelenggaraan aplikasi Vue lebih mudah dan fleksibel. Saya harap contoh kod dan penjelasan dalam artikel ini akan membantu anda memahami cangkuk kitaran hayat Vue3 dan Vue2.

Atas ialah kandungan terperinci Perbezaan antara Vue3 dan Vue2: cangkuk kitaran hayat yang lebih kaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!