Vue Academy · Pelajaran

onMounted dan onBeforeMount

Mengakses DOM dalam onMounted, alasan onBeforeMount jarang perlu digunakan secara langsung.

onMounted dan onBeforeMount adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Pemasangan

Fase pemasangan memiliki dua pengait: onBeforeMount dipanggil tepat sebelum DOM dibuat, sedangkan onMounted dipanggil segera setelah DOM disisipkan. Keduanya tampak serupa, tetapi memiliki kegunaan yang sangat berbeda.

onMounted: DOM Siap

Saat onMounted berjalan, templat komponen telah dirender dan berada di halaman. Referensi templat menunjuk ke elemen nyata, jadi inilah tempat untuk melakukan pekerjaan terkait DOM.

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

Kasus Penggunaan: Menginisialisasi Bagan

Pustaka yang menggambar pada elemen DOM memerlukan elemen tersebut tersedia terlebih dahulu. Inisialisasikan pustaka itu di dalam onMounted dengan meneruskan elemen referensinya.

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

Kasus Penggunaan: Pengukuran DOM

Untuk membaca ukuran, posisi, atau offset gulir, Anda memerlukan DOM nyata. onMounted adalah titik aman paling awal untuk mengukur sebuah elemen.

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

Kasus Penggunaan: Pengambilan Data Awal

Mengambil data saat komponen muncul adalah tugas klasik onMounted. Simpan hasilnya dalam referensi agar templat diperbarui saat data tersebut tiba.

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

onMounted Berjalan Sekali

onMounted dipanggil satu kali untuk setiap instans komponen. Jika komponen dilepas lalu dibuat kembali, instans baru akan menjalankan onMounted-nya sendiri.

onBeforeMount: Tepat Sebelum Penyisipan

onBeforeMount berjalan setelah penyiapan, tetapi sebelum DOM dibuat. Status reaktif sudah tersedia, tetapi referensi templat masih berupa null karena belum ada yang dirender.

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

Mengapa onBeforeMount Jarang Diperlukan

Sebagian besar pekerjaan penyiapan dapat dilakukan langsung di <script setup> (yang sudah berjalan sebelum pemasangan), sedangkan segala sesuatu yang berkaitan dengan DOM harus menunggu onMounted. Karena itu, onBeforeMount hanya memiliki sedikit kegunaan praktis.

Kesalahan Umum

Mencoba mengakses referensi templat di dalam penyiapan atau onBeforeMount akan menghasilkan null. Elemen tersebut belum ada sampai pemasangan selesai. Selalu pindahkan akses DOM ke onMounted.

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

Mendaftarkan Beberapa Pengait

Anda dapat memanggil onMounted lebih dari satu kali; semua fungsi panggilan balik akan dijalankan secara berurutan. Inilah alasan komposabel dapat mendaftarkan onMounted masing-masing secara terpisah.

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

Memilih di Antara Keduanya

onMounted: DOM tersedia — untuk bagan, pengukuran, fokus, dan pengambilan data.
onBeforeMount: pengait sebelum perenderan, tanpa DOM, dan jarang diperlukan.

Pemeriksaan Singkat

Uji pengetahuan Anda tentang pengait pemasangan.

Ringkasan

Ringkasan pengait pemasangan:

onMounted berjalan setelah DOM disisipkan — gunakan untuk inisialisasi bagan, pengukuran, fokus, dan pengambilan data awal.
Pengait ini berjalan sekali untuk setiap instans dan dapat didaftarkan beberapa kali.
onBeforeMount berjalan sebelum perenderan tanpa akses DOM dan jarang diperlukan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “onMounted dan onBeforeMount” gratis?

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

Mengakses DOM dalam onMounted, alasan onBeforeMount jarang perlu digunakan secara langsung. 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 4.

Berapa lama pelajaran “onMounted dan onBeforeMount” 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