Vue Academy · Pelajaran

Ikhtisar Tahap Siklus Hidup

Pembuatan, pemasangan, pembaruan, pelepasan — hal yang terjadi pada setiap tahap.

Ikhtisar Tahap Siklus Hidup adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Komponen Memiliki Siklus Hidup

Setiap komponen Vue melalui perjalanan yang dapat diprediksi: dibuat, dipasang ke halaman, diperbarui saat data berubah, dan akhirnya dihapus. Inilah fase siklus hidup, dan Vue memungkinkan Anda memasang kait pada setiap fase.

Empat Fase

Pembuatan — setup dijalankan dan reaktivitas diinisialisasi.
Pemasangan — DOM dibuat dan disisipkan.
Pembaruan — perubahan reaktif memicu perenderan ulang.
Pelepasan — komponen dihapus dan dibersihkan.

Fase 1: Pembuatan

Pertama, instans komponen dibuat dan reaktivitasnya disiapkan. Dalam Composition API, <script setup> (atau setup()) dijalankan di sini. DOM belum ada, jadi Anda belum dapat membaca elemen pada tahap ini.

Yang Dapat Anda Lakukan Selama Pembuatan

Pembuatan adalah waktu yang tepat untuk mendeklarasikan status reaktif dan memulai pekerjaan yang tidak terkait DOM, seperti memulai pengambilan data. Ingatlah bahwa templat belum dirender, sehingga referensi DOM masih kosong.

<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>

Fase 2: Pemasangan

Selanjutnya, Vue membuat node DOM sebenarnya dari templat Anda dan menyisipkannya ke halaman. Setelah pemasangan, referensi templat menunjuk ke elemen nyata dan Anda dapat mengukur atau memanipulasi DOM.

Kait Pemasangan

onMounted berjalan satu kali, tepat setelah komponen disisipkan. Inilah tempat untuk penyiapan yang bergantung pada DOM, seperti menginisialisasi grafik atau memfokuskan kolom masukan.

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('in the DOM now')
})
</script>

Fase 3: Pembaruan

Saat data reaktif yang menjadi dependensi komponen berubah, Vue merender ulang dan menambal DOM secara efisien—hanya bagian yang berubah. Siklus pembaruan ini dapat terjadi berkali-kali selama masa hidup komponen.

Kait Pembaruan

onBeforeUpdate berjalan tepat sebelum DOM ditambal, sedangkan onUpdated berjalan tepat setelahnya. Keduanya berjalan pada setiap perubahan reaktif yang memengaruhi perenderan.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM patched')
})
</script>

Fase 4: Pelepasan

Saat komponen dihapus—melalui v-if, perubahan rute, atau penghapusan dari daftar—Vue membongkarnya. Inilah kesempatan Anda untuk membersihkan pengatur waktu, pendengar, dan langganan agar tidak terjadi kebocoran memori.

Kait Pelepasan

onUnmounted berjalan setelah komponen tidak lagi ada. Batalkan interval, hapus pendengar global, dan batalkan permintaan yang sedang berjalan di sini.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Urutan Lengkap

Kait berjalan dalam urutan berikut selama masa hidup komponen: setup, onBeforeMount, onMounted, lalu pasangan onBeforeUpdate/onUpdated yang berulang, dan akhirnya onBeforeUnmount/onUnmounted.

Pemeriksaan Singkat

Pastikan Anda memahami siklus hidup.

Ringkasan

Sekarang Anda melihat gambaran utuh:

Pembuatan: proses penyiapan berjalan, reaktivitas siap, belum ada DOM.
Pemasangan: DOM dibuat dan disisipkan; referensi menjadi dapat digunakan.
Pembaruan: perubahan reaktif memicu penerapan perubahan yang efisien.
Pelepasan: komponen dihapus; lakukan pembersihan di sini.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Ikhtisar Tahap Siklus Hidup” gratis?

Ya — teks lengkap “Ikhtisar Tahap Siklus Hidup” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Ikhtisar Tahap Siklus Hidup”?

Pembuatan, pemasangan, pembaruan, pelepasan — hal yang terjadi pada setiap tahap. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Ikhtisar Tahap Siklus Hidup” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy