Cara menggunakan kaedah dan memahami prinsip kitaran hayat Vue 3

Gambaran Keseluruhan Prinsip

Kitaran hayat Vue 3 merujuk kepada satu siri peristiwa yang dilalui oleh komponen daripada penciptaan kepada pemusnahan Sesetengah operasi boleh dilakukan semasa peristiwa ini, seperti memulakan data, memaparkan paparan, memuatkan Data tak segerak, dsb. Dalam Vue 3, kitaran hayat komponen ditakrifkan melalui fungsi persediaan().

Analisis contoh

Kitaran hayat Vue 3 merangkumi peringkat berikut:

1 sebelumBuat

Sebelum tika dibuat, iaitu sebelum inisialisasi dipanggil. Pada masa ini, tika komponen belum dimulakan, dan atribut seperti data, kaedah dan pengiraan tidak boleh diakses, dan beberapa operasi dilakukan sebelum keadaan komponen dimulakan.

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
}

2. dibuat

dipanggil selepas kejadian dibuat, iaitu selepas pemula. Pada ketika ini, konfigurasi seperti pemerhatian data telah selesai, tetapi DOM belum lagi dipasang dan atribut seperti data, kaedah dan pengiraan boleh diakses. Anda boleh menggunakan fungsi cangkuk yang dicipta untuk melaksanakan operasi seperti pemulaan data dan pemantauan acara.

import { onMounted, onUnmounted } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    onMounted(() => {
      console.log('component mounted');
    });
  },
  unmounted() {
    onUnmounted(() => {
      console.log('component unmounted');
    });
  }
}

3. beforeMount

dipanggil sebelum pemasangan dimulakan. Pada peringkat ini, nod DOM sebenar belum diberikan lagi. Anda boleh menggunakan fungsi cangkuk beforeMount untuk melaksanakan beberapa operasi tak segerak sebelum komponen dipasang, seperti memuatkan animasi.

export default {
  beforeMount() {
    console.log('beforeMount');
  }
}

4 yang dipasang

dipanggil selepas pemasangan selesai. Pada ketika ini, komponen telah menghasilkan DOM sebenar. Fungsi cangkuk yang dipasang sering digunakan untuk memulakan operasi DOM dan mengisi data komponen selepas berinteraksi dengan pelayan, seperti mendapatkan nod DOM melalui ref dan mendaftarkan pendengar acara.

export default {
  mounted() {
    console.log('mounted');
    const button = this.$refs.myButton;
    button.addEventListener('click', () => {
      this.count++;
    });
  }
}

5 beforeUpdate

dipanggil sebelum data dikemas kini. Pada ketika ini, keadaan data lama boleh diakses sebelum mengemas kini. Anda boleh menggunakan fungsi cangkuk beforeUpdate untuk melaksanakan beberapa operasi sebelum data komponen dikemas kini, seperti pengikatan dinamik kelas dan gaya, dsb.

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

6. dikemas kini

dipanggil selepas data dikemas kini. Pada ketika ini, komponen telah mengemas kini DOM dan boleh melengkapkan operasi DOM dengan mengakses keadaan data terkini. Anda boleh menggunakan fungsi cangkuk yang dikemas kini untuk melaksanakan beberapa operasi selepas data komponen dikemas kini, seperti mencetuskan kesan animasi, dsb.

export default {
  updated() {
    console.log('updated');
  }
}

7. sebelum Nyahlekap

dipanggil sebelum komponen dinyahlekap. Pada ketika ini, tika komponen masih tersedia sepenuhnya, tetapi paparannya telah dimusnahkan dan tidak lagi dikemas kini. Anda boleh menggunakan fungsi cangkuk beforeUnmount untuk melakukan beberapa operasi pembersihan sebelum komponen dinyahlekap, seperti membatalkan pendengar acara, pemasa dan permintaan tak segerak.

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}

8 dinyahlekap

dipanggil selepas komponen dinyahlekap. Pada ketika ini, tika komponen dan semua elemen DOM yang berkaitan telah dimusnahkan dan data dan kaedah dalaman komponen tidak boleh diakses lagi. Anda boleh menggunakan fungsi cangkuk yang tidak dilekapkan untuk melakukan beberapa operasi pembersihan akhir selepas komponen dinyahlekapkan.

export default {
  unmounted() {
    console.log('unmounted');
  }
}

Perlu diambil perhatian bahawa beberapa fungsi kitaran hayat telah dialih keluar daripada Vue 3, seperti diaktifkan, dinyahaktifkan, errorCaptured, dsb., yang boleh dilaksanakan melalui API Komposisi baharu.

Atas ialah kandungan terperinci Cara menggunakan kaedah dan memahami prinsip kitaran hayat Vue 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!