Vue Academy · Pelajaran

onUpdated dan onBeforeUpdate

Memberi tindak balas terhadap perubahan data reaktif, mengelakkan gelung pengemaskinian tanpa penghujung dalam onUpdated.

Pelajaran 3 daripada 413 langkah

onUpdated dan onBeforeUpdate ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Cangkuk Sekitar Kemas Kini

Apabila data reaktif berubah, Vue memaparkan semula komponen. Dua cangkuk mengapit proses ini: onBeforeUpdate dicetuskan sebelum DOM ditampal dan onUpdated dicetuskan selepasnya.

onUpdated: Selepas Tampalan

onUpdated dijalankan selepas DOM dikemas kini untuk mencerminkan keadaan reaktif yang baharu. Pada ketika ini, DOM yang dipaparkan sepadan dengan data anda.

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

Membaca DOM yang Dikemas Kini

Oleh sebab tampalan telah selesai, onUpdated ialah tempat yang sesuai untuk membaca saiz atau kedudukan elemen baharu yang bergantung pada paparan terkini.

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

Perangkap Gelung Tidak Berkesudahan

Jangan ubah keadaan reaktif dalam onUpdated. Perbuatan itu mencetuskan paparan semula, yang mencetuskan onUpdated sekali lagi, lalu mengubah keadaan sekali lagi — gelung tidak berkesudahan yang membekukan aplikasi.

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

Gunakan watch Sebaliknya

Jika anda mahu bertindak balas terhadap perubahan nilai tertentu, gunakan watch, bukan onUpdated. Pemerhati menyasarkan satu sumber dan mengelakkan risiko gelung, manakala onUpdated dicetuskan pada setiap paparan.

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

onBeforeUpdate: Sebelum Tampalan

onBeforeUpdate dijalankan selepas perubahan reaktif tetapi sebelum Vue menampal DOM. DOM masih memaparkan nilai lama pada ketika ini.

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

Kes Penggunaan: Syot Kilat Pra-Kemas Kini

Oleh sebab onBeforeUpdate melihat DOM lama, ia amat sesuai untuk merakam syot sebelum perubahan — contohnya, merekodkan kedudukan tatal semasa untuk memulihkannya selepas kemas kini.

<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>

Dijalankan pada Setiap Paparan

Kedua-dua cangkuk dijalankan pada setiap kitaran kemas kini, yang boleh berlaku dengan kerap. Pastikan fungsi panggil baliknya ringan untuk mengelakkan masalah prestasi.

Bukan untuk Kesan Sampingan Data

Cangkuk ini berkaitan dengan DOM, bukan data anda. Untuk tindak balas dipacu data, utamakan computed (untuk nilai terbitan) atau watch (untuk kesan sampingan pada sumber tertentu).

Imbas Kembali Urutan

Apabila berlaku perubahan reaktif, urutannya ialah: keadaan berubah, onBeforeUpdate dijalankan (DOM lama), Vue menampal DOM, kemudian onUpdated dijalankan (DOM baharu).

Memilih Antaranya

onBeforeUpdate: merakam keadaan DOM lama, seperti tatal atau pilihan.
onUpdated: membaca DOM baharu selepas tampalan — tetapi jangan sekali-kali mengubah keadaan reaktif di sini.

Semakan Ringkas

Uji pengetahuan anda tentang cangkuk kemas kini.

Jawab dalam pelajaran interaktif

Imbas Kembali

Ringkasan cangkuk kemas kini:

onUpdated dijalankan selepas tampalan DOM — baca saiz baharu di sini.
Jangan sekali-kali mengubah keadaan reaktif di dalamnya (gelung tidak berkesudahan); gunakan watch sebagai ganti.
onBeforeUpdate dijalankan sebelum tampalan dengan DOM lama — sangat sesuai untuk syot kilat.
Kedua-duanya dicetuskan pada setiap paparan, jadi pastikan pelaksanaannya ringan.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “onUpdated dan onBeforeUpdate” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “onUpdated dan onBeforeUpdate”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “onUpdated dan onBeforeUpdate”?

Memberi tindak balas terhadap perubahan data reaktif, mengelakkan gelung pengemaskinian tanpa penghujung dalam onUpdated. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “onUpdated dan onBeforeUpdate” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy