Vue Academy · Pelajaran

Reaktivitas Lanjutan: shallowRef dan triggerRef

shallowRef untuk performa, markRaw untuk mengecualikan dari reaktivitas, serta triggerRef untuk pemicu manual.

Reaktivitas Lanjutan: shallowRef dan triggerRef 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.

Melampaui ref dan Reaktif

Reaktivitas mendalam Vue memang praktis, tetapi tidak selalu sesuai kebutuhan Anda. Untuk objek besar atau instans eksternal, pelacakan mendalam menghabiskan sumber daya secara sia-sia. Vue menyediakan shallowRef, triggerRef, dan markRaw untuk pengendalian yang lebih terperinci.

Cara ref Melacak Secara Mendalam

ref biasa yang menyimpan objek membuat seluruh objek menjadi reaktif secara mendalam—perubahan pada properti bertingkat mana pun akan memicu pembaruan. Ini sangat baik untuk state kecil, tetapi mahal untuk struktur besar.

import { ref } from "vue"

const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)

shallowRef: Hanya .value yang Reaktif

shallowRef melacak penetapan ulang .value, tetapi tidak melacak perubahan di dalam nilai yang disimpan. Perubahan di dalamnya tidak memicu perenderan.

import { shallowRef } from "vue"

const state = shallowRef({ count: 0 })
state.value.count++        // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)

Kapan Menggunakan shallowRef

Gunakan untuk data besar yang cenderung tidak berubah dan diganti secara keseluruhan, atau untuk membungkus objek eksternal (instans chart, kumpulan data besar) ketika pelacakan mendalam menambah beban tanpa manfaat.

const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesale

Masalah Mutasi Mendalam

Terkadang Anda memang DO melakukan mutasi di dalam shallowRef (demi performa), tetapi tetap memerlukan perenderan ulang pada saat yang Anda kendalikan. Vue tidak dapat melihat perubahan tersebut, sehingga antarmuka menjadi kedaluwarsa.

const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires

triggerRef: Paksa Pembaruan

triggerRef secara manual memaksa efek yang bergantung pada shallow ref untuk dijalankan kembali setelah Anda mengubah isinya. Anda mengumpulkan banyak perubahan, lalu memicunya sekali.

import { shallowRef, triggerRef } from "vue"

const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updates

Pola Performa

Pola ini: simpan struktur besar dalam shallowRef, ubah isinya dengan bebas tanpa biaya reaktivitas pada setiap perubahan, lalu panggil triggerRef sekali ketika Anda ingin tampilan mencerminkan kumpulan perubahan tersebut.

function bulkUpdate(rows) {
  for (const r of rows) data.value.push(r) // cheap
  triggerRef(data)                         // one update
}

markRaw: Keluar Sepenuhnya

markRaw menandai objek agar Vue tidak pernah membuatnya reaktif, bahkan saat berada di dalam reactive atau ref biasa. Gunakan ini untuk instans kelas pihak ketiga yang tidak boleh diproksikan.

import { markRaw, reactive } from "vue"

const state = reactive({
  map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy

Mengapa markRaw Penting

Membungkus instans kelas yang kompleks (peta, penyunting, soket web) dalam proksi reaktif dapat merusak referensi internalnya atau menimbulkan bug yang sulit dideteksi. markRaw membiarkannya tetap utuh, sementara objek tersebut tetap berada di dalam state reaktif.

Menggabungkan Alat-Alat Ini

Alat-alat ini dapat dikomposisikan: shallowRef yang menyimpan instans markRaw memberi Anda tempat yang dapat diganti secara reaktif, dengan objek bagian dalam yang tidak pernah diproksikan oleh Vue — ideal untuk integrasi eksternal.

const editor = shallowRef(null)
function init(el) {
  editor.value = markRaw(new CodeEditor(el))
}

Biaya Reaktivitas vs Kontrol

Komprominya: reaktivitas mendalam memang mudah, tetapi lebih berat; API dangkal memberi Anda kontrol dan performa, dengan konsekuensi harus memicu pembaruan sendiri. Gunakan API tersebut hanya jika analisis kinerja menunjukkan bahwa Anda membutuhkannya.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang reaktivitas tingkat lanjut.

Ringkasan

Anda telah mempelajari kontrol reaktivitas tingkat lanjut:

shallowRef hanya bereaksi terhadap penggantian .value, bukan mutasi bagian dalam — cocok untuk data besar atau eksternal.
triggerRef memaksa pembaruan secara manual setelah isi shallow ref diubah (kumpulkan perubahan, lalu picu sekali).
markRaw secara permanen mengeluarkan objek dari reaktivitas, sehingga ideal untuk instans kelas pihak ketiga.
Alat-alat ini memberikan performa dan kontrol, dengan konsekuensi harus memicu pembaruan sendiri.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Reaktivitas Lanjutan: shallowRef dan triggerRef” gratis?

Ya — teks lengkap “Reaktivitas Lanjutan: shallowRef dan triggerRef” 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 “Reaktivitas Lanjutan: shallowRef dan triggerRef”?

shallowRef untuk performa, markRaw untuk mengecualikan dari reaktivitas, serta triggerRef untuk pemicu manual. 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 “Reaktivitas Lanjutan: shallowRef dan triggerRef” 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

Reaktivitas Lanjutan: shallowRef dan triggerRef
Factory Composable dan Composable Berparameter
State Machine dengan XState di Vue
effectScope untuk Effect yang Dikelompokkan

← Kembali ke Vue Academy