Vue3 kini merupakan salah satu rangka kerja paling popular di dunia hadapan, dan fungsi kitaran hayat Vue3 ialah bahagian yang sangat penting dalam Vue3. Fungsi kitaran hayat Vue3 membolehkan kami mencetuskan peristiwa tertentu pada masa tertentu, meningkatkan tahap kebolehkawalan komponen yang tinggi.

Artikel ini akan meneroka dan menerangkan secara terperinci konsep asas fungsi kitaran hayat Vue3, peranan dan penggunaan setiap fungsi kitaran hayat dan kes pelaksanaan, untuk membantu pembaca menguasai fungsi kitaran hayat Vue3 dengan cepat.

1. Konsep asas fungsi kitaran hayat Vue3

Fungsi kitaran hayat Vue3 ialah bahagian yang sangat penting dalam Vue3 dan merupakan kaedah yang dipanggil secara automatik semasa pemaparan komponen. Ia membolehkan pembangun mengendalikan dengan sewajarnya apabila komponen dimusnahkan, dikemas kini atau dimulakan. Sama seperti fungsi kitaran hayat React, fungsi kitaran hayat Vue3 terbahagi terutamanya kepada lima peringkat: "sebelum", "dicipta", "dipasang", "kemas kini" dan "dimusnahkan".

1. beforeCreate(): Fungsi cangkuk ini dipanggil selepas contoh dimulakan digunakan dalam fungsi cangkuk ini.
2. created(): Fungsi cangkuk ini dipanggil selepas kejadian dibuat Dalam fungsi cangkuk ini, atribut seperti data dan kaedah telah dimulakan, tetapi $el belum lagi diberikan. Fungsi cangkuk ini ialah tempat yang baik untuk melaksanakan permintaan tak segerak.
3. beforeMount(): Fungsi cangkuk ini dipanggil sebelum komponen dipasang. Semasa pemprosesan fungsi cangkuk ini, kami boleh mengubah suai nod DOM atau melakukan beberapa kerja permulaan lain.
4. mounted(): Fungsi cangkuk ini dipanggil selepas komponen dipasang. Ia menunjukkan bahawa komponen telah diberikan dan boleh mula mengendalikan DOM.
5. beforeUpdate(): Fungsi cangkuk ini dipanggil sebelum komponen dikemas kini. Dalam fungsi cangkuk ini, beberapa sandaran status atau pengubahsuaian boleh dilakukan.
6. updated(): Fungsi cangkuk ini dipanggil selepas komponen dikemas kini. Dalam fungsi cangkuk ini, anda boleh melakukan beberapa operasi kemas kini DOM.
7. beforeUnmount(): Fungsi cangkuk ini dipanggil sebelum komponen dinyahlekapkan. Dalam fungsi cangkuk ini, anda boleh melakukan beberapa kerja selepas itu, seperti membersihkan pemasa dan sebagainya.
8. unmounted(): Fungsi cangkuk ini dipanggil selepas komponen dinyahlekap, menunjukkan bahawa komponen telah musnah sepenuhnya.

2. Peranan dan penggunaan setiap fungsi kitaran hayat

1. beforeCreate()

beforeCreate() fungsi dipanggil selepas kejadian dimulakan Dipanggil, contoh vue belum dibuat pada masa ini, atribut seperti data dan kaedah belum dimulakan, dan komponen belum dipasang pada masa ini. Jadi $el tidak boleh diakses dalam fungsi cangkuk ini.

Fungsi cangkuk ini biasanya digunakan untuk memulakan beberapa kerja penting Contohnya, dalam fungsi cangkuk ini, anda boleh melakukan beberapa konfigurasi global, dan anda juga boleh memulakan dan menetapkan beberapa data atau komponen Kaedah ini sangat berguna dan boleh digunakan untuk kemudian Sediakan data untuk operasi.

Contoh penggunaan biasa:

beforeCreate() {
  console.log('beforeCreate hook!');
}

2. created()

created() fungsi cangkuk dipanggil selepas contoh Vue3 dicipta, ini The Vue3 instance telah dibuat dalam fungsi. Dalam fungsi ini, kita boleh mengakses data dan kaedah contoh, tetapi halaman itu belum lagi diberikan.

Fungsi cangkuk ini biasanya digunakan untuk memulakan kejadian Contohnya, dalam fungsi cangkuk ini, anda boleh meminta data, melakukan beberapa pemprosesan data atau melakukan beberapa kerja permulaan pemalam Kaedah ini sangat berguna dan boleh digunakan kemudian.

Contoh penggunaan biasa:

created() {
  console.log('created hook!');
}

3. beforeMount()

fungsi cangkuk beforeMount() dipanggil sebelum komponen diberikan. Pada masa ini, komponen telah dimulakan dan beberapa operasi boleh dilakukan dalam fungsi ini Sebagai contoh, DOM boleh dikendalikan dalam fungsi cangkuk ini.

Secara umumnya disyorkan untuk tidak melakukan operasi yang memakan masa dalam fungsi cangkuk ini, kerana ini mungkin menyekat pemaparan pertama DOM.

Contoh penggunaan biasa:

beforeMount() {
  console.log('beforeMount hook!');
}

4. mounted()

mounted() fungsi cangkuk dipanggil selepas komponen diberikan. Dalam fungsi cangkuk ini, kita boleh mengakses elemen DOM yang diberikan dan melakukan beberapa operasi Contohnya, dalam fungsi cangkuk ini, kita boleh mendapatkan lebar dan ketinggian elemen dan maklumat lain.

Contoh penggunaan biasa:

mounted() {
  console.log('mounted hook!');
}

5. beforeUpdate()

beforeUpdate() fungsi cangkuk dipanggil sebelum komponen dikemas kini. Dalam fungsi cangkuk ini, beberapa sandaran status atau pengubahsuaian boleh dilakukan.

Fungsi cangkuk ini biasanya digunakan di beberapa negeri yang perlu dikemas kini Contohnya, sebelum keadaan komponen berubah, fungsi cangkuk ini digunakan untuk menyandarkan keadaan ke tempat lain untuk perbandingan dan pengesahan. Pada masa yang sama, fungsi cangkuk ini juga boleh digunakan untuk satu siri pengiraan dalam tempoh Sebagai contoh, data yang diperlukan boleh diperoleh semula dalam fungsi cangkuk ini.

Contoh penggunaan biasa:

beforeUpdate() {
  console.log('beforeUpdate hook!');
}

6. updated()

updated() fungsi cangkuk dipanggil selepas komponen dikemas kini. Dalam fungsi cangkuk ini, anda boleh melakukan beberapa operasi selepas DOM dikemas kini, seperti mendapatkan semula maklumat seperti lebar dan ketinggian elemen.

這個(gè)鉤子函數(shù)一般用于實(shí)現(xiàn)某些需要DOM元素更新后才能進(jìn)行的操作，例如對(duì)比前后數(shù)據(jù)的信息，需要根據(jù)DOM元素的更新來(lái)做出相應(yīng)的處理等。

一個(gè)典型的使用示例：

updated() {
  console.log('updated hook!');
}

7. beforeUnmount()

beforeUnmount()鉤子函數(shù)在Vue3組件卸載之前被調(diào)用。在這個(gè)鉤子函數(shù)中，可以進(jìn)行一些善后的工作，例如清理定時(shí)器等等。

一個(gè)典型的使用示例：

beforeUnmount() {
  console.log('beforeUnmount hook!');
}

8. unmounted()

unmounted()鉤子函數(shù)在Vue3組件卸載之后被調(diào)用。這個(gè)鉤子函數(shù)表示組件已經(jīng)被完全銷毀。

這個(gè)鉤子函數(shù)用于釋放組件占用的內(nèi)存和資源。

一個(gè)典型的使用示例：

unmounted() {
  console.log('unmounted hook!');
}

三、實(shí)現(xiàn)案例

在Vue3中實(shí)現(xiàn)生命周期函數(shù)非常簡(jiǎn)單，只需在組件中定義對(duì)應(yīng)的函數(shù)即可實(shí)現(xiàn)。

下面是一個(gè)根據(jù)生命周期函數(shù)實(shí)現(xiàn)數(shù)據(jù)的獲取和處理的實(shí)現(xiàn)案例：

<template>
  <div>
    <h2>{{ data }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '',
    };
  },
  beforeCreate() {
    console.log('開始第一步：數(shù)據(jù)初始化');
    // 進(jìn)行異步請(qǐng)求，獲取數(shù)據(jù)等操作
    this.data = '數(shù)據(jù)初始化成功';
  },
  created() {
    console.log('開始第二步：數(shù)據(jù)處理');
    // 對(duì)數(shù)據(jù)進(jìn)行處理，例如進(jìn)行格式化或者加工
    this.data = this.data + '-數(shù)據(jù)處理成功';
  },
  beforeMount() {
    console.log('開始第三步：準(zhǔn)備數(shù)據(jù)');
    // 渲染組件之前，對(duì)數(shù)據(jù)進(jìn)行進(jìn)一步的處理
    this.data = this.data + '-數(shù)據(jù)準(zhǔn)備完成！';
  },
  mounted() {
    console.log('開始第四步：操作DOM');
    // 操作DOM，例如獲取元素的寬度或者高度等信息
  },
  beforeUpdate() {
    console.log('開始第五步：備份數(shù)據(jù)');
    // 對(duì)需要更新的狀態(tài)進(jìn)行備份，以便進(jìn)行比較和校驗(yàn)
  },
  updated() {
    console.log('開始第六步：更新狀態(tài)');
    // 根據(jù)DOM更新后的狀態(tài)進(jìn)行狀態(tài)的更新
  },
  beforeUnmount() {
    console.log('開始第七步：清理定時(shí)器');
    // 清理組件中的定時(shí)器等占用內(nèi)存的資源
  },
  unmounted() {
    console.log('開始第八步：釋放內(nèi)存');
    // 釋放組件中占用的內(nèi)存和資源
  },
};
</script>

以上實(shí)現(xiàn)案例中，我們根據(jù)生命周期函數(shù)分別進(jìn)行了數(shù)據(jù)的初始化、數(shù)據(jù)的處理、數(shù)據(jù)的準(zhǔn)備、DOM的操作、狀態(tài)的備份、狀態(tài)的更新、定時(shí)器的清理和內(nèi)存的釋放等八個(gè)步驟。

總結(jié)

通過本文對(duì)Vue3的生命周期函數(shù)的探究和講解，我們可以深入了解和理解每個(gè)生命周期函數(shù)的作用和使用方法，用于幫助讀者深入掌握Vue3的生命周期函數(shù)。同時(shí)，在實(shí)際項(xiàng)目中的應(yīng)用中，我們也可以根據(jù)具體需求，在生命周期函數(shù)中實(shí)現(xiàn)相應(yīng)的邏輯，以滿足實(shí)際需求的業(yè)務(wù)場(chǎng)景。

Atas ialah kandungan terperinci Fungsi kitar hayat dalam Vue3: Kuasai kitaran hayat Vue3 dengan cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!