Vue Academy · Pelajaran

onUpdated dan onBeforeUpdate

Merespons perubahan data reaktif, menghindari loop pembaruan tanpa akhir dalam onUpdated.

onUpdated dan onBeforeUpdate adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Pengait di Sekitar Pembaruan

Saat data reaktif berubah, Vue merender ulang komponen. Dua pengait mengapit proses ini: onBeforeUpdate dipanggil sebelum DOM diperbarui, sedangkan onUpdated dipanggil sesudahnya.

onUpdated: Setelah Perubahan Diterapkan

onUpdated berjalan setelah DOM diperbarui untuk mencerminkan status reaktif yang baru. Pada titik ini, DOM hasil perenderan sesuai dengan data Anda.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

Membaca DOM yang Diperbarui

Karena pembaruan telah selesai, onUpdated adalah tempat yang tepat untuk membaca ukuran atau posisi elemen baru yang bergantung pada perenderan terbaru.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

Jebakan Perulangan Tak Berujung

Jangan pernah mengubah status reaktif di dalam onUpdated. Tindakan tersebut memicu perenderan lain, yang kembali memanggil onUpdated, lalu mengubah status lagi — menghasilkan perulangan tak berujung yang membuat aplikasi macet.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

Gunakan watch Sebagai Gantinya

Jika Anda ingin merespons perubahan nilai tertentu, gunakan watch, bukan onUpdated. Pemantau menargetkan satu sumber dan menghindari risiko perulangan, sedangkan onUpdated berjalan pada setiap perenderan.

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: Sebelum Perubahan Diterapkan

onBeforeUpdate berjalan setelah perubahan reaktif, tetapi sebelum Vue memperbarui DOM. Pada tahap ini, DOM masih menampilkan nilai lama.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

Kasus Penggunaan: Cuplikan Sebelum Pembaruan

Karena onBeforeUpdate melihat DOM lama, pengait ini sangat cocok untuk mengambil cuplikan sebelum perubahan — misalnya, mencatat posisi gulir saat ini agar dapat dipulihkan setelah pembaruan.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

Keduanya Berjalan pada Setiap Perenderan

Kedua pengait berjalan pada setiap siklus pembaruan, yang dapat terjadi cukup sering. Buat fungsi panggilan baliknya tetap ringan agar tidak menimbulkan masalah kinerja.

Bukan untuk Efek Samping Data

Pengait ini berkaitan dengan DOM, bukan data Anda. Untuk reaksi berbasis data, pilih computed (untuk nilai turunan) atau watch (untuk efek samping pada sumber tertentu).

Ringkasan Urutan

Saat terjadi perubahan reaktif, urutannya adalah: status berubah, onBeforeUpdate berjalan (DOM lama), Vue memperbarui DOM, lalu onUpdated berjalan (DOM baru).

Memilih di Antara Keduanya

onBeforeUpdate: mengambil status DOM lama, seperti gulir atau pilihan.
onUpdated: membaca DOM baru setelah pembaruan — tetapi jangan pernah mengubah status reaktif di sini.

Pemeriksaan Singkat

Uji pengetahuan Anda tentang pengait pembaruan.

Ringkasan

Ringkasan pengait pembaruan:

onUpdated berjalan setelah pembaruan DOM — baca ukuran baru di sini.
Jangan pernah mengubah status reaktif di dalamnya (perulangan tak berujung); gunakan watch sebagai gantinya.
onBeforeUpdate berjalan sebelum pembaruan dengan DOM lama — sangat cocok untuk mengambil cuplikan.
Keduanya berjalan pada setiap perenderan, jadi buatlah tetap ringan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “onUpdated dan onBeforeUpdate” gratis?

Ya — teks lengkap “onUpdated dan onBeforeUpdate” 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 “onUpdated dan onBeforeUpdate”?

Merespons perubahan data reaktif, menghindari loop pembaruan tanpa akhir dalam onUpdated. 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 3 dari 4.

Berapa lama pelajaran “onUpdated dan onBeforeUpdate” 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