Hook Siklus Hidup dan Pengambilan Data
Ambil data pada tahap yang tepat dalam siklus hidup komponen.
Hook Siklus Hidup dan Pengambilan Data adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 3 pelajaran total.
Kapan Mengambil Data
Komponen memiliki siklus hidup: komponen dibuat, dipasang ke DOM, diperbarui, dan akhirnya dilepas. Dengan mengetahui kait siklus hidup yang tepat untuk mengambil data, aplikasi Anda tetap responsif dan berjalan dengan benar.
Kait created
Kait created berjalan setelah data reaktif disiapkan, tetapi sebelum komponen disisipkan ke DOM. Kait ini merupakan tempat yang baik untuk mulai mengambil data karena reaktivitas sudah berfungsi.
export default {
data() {
return { posts: [] }
},
created() {
this.fetchPosts()
}
}Kait mounted
Kait mounted berjalan setelah komponen disisipkan ke DOM. Gunakan kait ini ketika logika pengambilan data memerlukan akses ke elemen DOM atau pustaka pihak ketiga yang membutuhkan elemen yang sudah dirender.
export default {
mounted() {
this.fetchPosts()
// template refs are now available here
}
}created vs mounted
Untuk pengambilan data murni, keduanya dapat digunakan. created berjalan sedikit lebih awal, sehingga permintaan dimulai lebih cepat. Pilih mounted hanya jika Anda benar-benar memerlukan DOM yang sudah dirender. Untuk sebagian besar panggilan API, keduanya sama-sama memadai.
onMounted dalam Composition API
Dalam Composition API, kait siklus hidup merupakan fungsi yang diimpor dan dipanggil di dalam setup. Padanan mounted adalah onMounted.
import { ref, onMounted } from "vue"
import { api } from "./api"
export default {
setup() {
const posts = ref([])
onMounted(async () => {
const res = await api.get("/posts")
posts.value = res.data
})
return { posts }
}
}Pola Status Pemuatan
Permintaan jaringan memerlukan waktu. Lacak penanda loading agar Anda dapat menampilkan pemutar saat data sedang tiba dan menyembunyikannya setelah selesai.
data() {
return {
posts: [],
loading: false
}
}Mengubah Status Pemuatan
Atur loading menjadi true sebelum permintaan, lalu kembalikan menjadi false setelahnya, apa pun hasilnya.
async fetchPosts() {
this.loading = true
try {
const res = await api.get("/posts")
this.posts = res.data
} finally {
this.loading = false
}
}Menampilkan Indikator Pemuatan
Dalam templat, gunakan penanda pemuatan untuk menentukan apakah akan menampilkan pemutar atau pesan saat data sedang dikirim.
<template>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>Menangani Hasil Kosong
Selalu siapkan penanganan untuk respons kosong. Tampilkan pesan yang ramah ketika daftar yang diambil tidak memiliki item.
<ul v-if="posts.length">
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>Pola Pemuatan Composition API
Pola pemuatan yang sama dapat diterapkan dengan mudah pada Composition API menggunakan ref.
const posts = ref([])
const loading = ref(false)
async function load() {
loading.value = true
try {
posts.value = (await api.get("/posts")).data
} finally {
loading.value = false
}
}
onMounted(load)Menampilkan Data yang Diambil
Setelah data berada dalam status reaktif, templat akan merendernya secara otomatis. Gabungkan status pemuatan, data, dan kosong untuk menghasilkan pengalaman pengguna yang baik.
<template>
<section>
<p v-if="loading">Loading...</p>
<ul v-else-if="posts.length">
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
<p v-else>Nothing here yet.</p>
</section>
</template>Pemeriksaan Singkat
Uji pengetahuan Anda tentang kait siklus hidup dan pengambilan data.
Ringkasan
Ambil data dalam created atau mounted (atau onMounted dalam Composition API). Lacak penanda loading dengan try/finally agar antarmuka dapat menampilkan pemutar, merender data, dan menangani hasil kosong. Selanjutnya, Anda akan membuat permintaan ini lebih tangguh dengan menangani kesalahan dan menggunakan pencegat.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Hook Siklus Hidup dan Pengambilan Data” gratis?
Ya — teks lengkap “Hook Siklus Hidup dan Pengambilan Data” 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 3 pelajaran total.
Apa yang akan aku pelajari di “Hook Siklus Hidup dan Pengambilan Data”?
Ambil data pada tahap yang tepat dalam siklus hidup komponen. 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 2 dari 3.
Berapa lama pelajaran “Hook Siklus Hidup dan Pengambilan Data” 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
- Permintaan HTTP dengan Axios
- Hook Siklus Hidup dan Pengambilan Data
- Penanganan Kesalahan dan Interseptor Global