Kaedah Kitar Hayat dalam Vue 3

pengenalan

Vue 3, rangka kerja JavaScript progresif, menawarkan pembangun set alat yang mantap untuk membina aplikasi web dinamik dan reaktif. Salah satu ciri teras Vue ialah kaedah kitar hayatnya, yang membolehkan pembangun menyambung ke peringkat berbeza kitaran hayat komponen. Kaedah ini tersedia dalam kedua-dua API Pilihan dan API Komposisi, memberikan fleksibiliti dalam cara anda menstruktur kod anda.

Dalam artikel ini, kami akan meneroka kaedah kitaran hayat yang tersedia dalam Vue 3, membandingkan penggunaannya dalam API Pilihan dan API Komposisi dan memberikan contoh praktikal untuk menggambarkan aplikasinya.

kandungan

API Pilihan lwn. API Komposisi

Dalam Vue 3, anda boleh menentukan kaedah kitaran hayat menggunakan sama ada API Pilihan atau API Komposisi. API Pilihan ialah cara tradisional untuk mentakrifkan pilihan komponen, manakala API Komposisi menawarkan pendekatan yang lebih fleksibel dan modular, terutamanya berguna untuk aplikasi yang kompleks.

Kaedah Kitar Hayat

Di bawah ialah gambar rajah yang menggambarkan peringkat kitaran hayat komponen Vue:

sebelumCipta

• Pilihan API: Tidak diperlukan
• API Komposisi: Tidak diperlukan

Cakuk ini dipanggil sebelum tika komponen dicipta.

dicipta

• Pilihan API: Tidak diperlukan
• API Komposisi: Tidak diperlukan

Cakuk ini dipanggil selepas tika komponen dibuat.

beforeMount

• Pilihan API: beforeMount
• API Komposisi: onBeforeMount

Cakuk ini dipanggil betul-betul sebelum komponen dipasang pada DOM.

Contoh:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

dipasang

• Pilihan API: dipasang
• API Komposisi: onMounted

Cakuk ini dipanggil apabila komponen dipasang pada DOM.

Contoh:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

beforeUpdate

• Pilihan API: beforeUpdate
• API Komposisi: onBeforeUpdate

Cakuk ini dipanggil sebelum kemas kini komponen.

Contoh:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

dikemas kini

• Pilihan API: dikemas kini
• API Komposisi: onUpdated

Kail ini dipanggil selepas kemas kini komponen.

Contoh:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

sebelumNyahlekap

• API Pilihan: sebelum Nyahlekap
• API Komposisi: onBeforeUnmount

Cakuk ini dipanggil sejurus sebelum komponen dinyahlekapkan.

Contoh:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

dinyahlekapkan

• Pilihan API: dinyahlekapkan
• API Komposisi: onUnmounted

Cakuk ini dipanggil selepas komponen dinyahlekapkan.

Contoh:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

errorCaptured

• API Pilihan: errorCaptured
• API Komposisi: onErrorCaptured

Kail ini dipanggil apabila ralat ditangkap daripada komponen kanak-kanak.

Contoh:

<script>
export default {
  updated() {
    console.log('Component has been updated');
  }
}
</script>

<script setup>
import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('Component has been updated');
});
</script>

renderTracked

• API Pilihan: renderTracked
• API Komposisi: onRenderTracked

Kail ini dipanggil apabila kebergantungan reaktif dijejaki semasa pemaparan.

Contoh:

<script>
export default {
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  }
}
</script>

<script setup>
import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
});
</script>

renderDicetuskan

• API Pilihan: renderTriggered
• API Komposisi: onRenderTriggered

Cakuk ini dipanggil apabila kebergantungan reaktif mencetuskan pemaparan.

Contoh:

<script>
export default {
  unmounted() {
    console.log('Component has been unmounted');
  }
}
</script>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Component has been unmounted');
});
</script>

Ringkasan

Memahami dan menggunakan kaedah kitaran hayat dalam Vue 3 adalah penting untuk menguruskan peringkat berbeza kitaran hayat komponen. Sama ada anda lebih suka API Pilihan atau API Komposisi, Vue 3 menyediakan set cangkuk yang komprehensif untuk membantu anda mengawal tingkah laku komponen anda dengan berkesan. Dengan menguasai kaedah kitaran hayat ini, anda boleh mencipta aplikasi Vue yang lebih cekap dan boleh diselenggara.

Selamat pengekodan! ?

Jika anda mempunyai sebarang soalan, sila tanya saya!

Jika anda suka siaran saya, sokong saya di:

Atas ialah kandungan terperinci Kaedah Kitar Hayat dalam Vue 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!