PricingLoginStart free
Vue Academy · Pelajaran

Kereaktifan Lanjutan: shallowRef dan triggerRef

shallowRef untuk prestasi, markRaw untuk mengecualikan daripada kereaktifan, triggerRef untuk pencetus manual.

Pelajaran 1 daripada 413 langkah

Kereaktifan Lanjutan: shallowRef dan triggerRef ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 1 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.

Melampaui ref dan reaktif

Kereaktifan mendalam Vue memang mudah digunakan, tetapi tidak semestinya perkara yang anda perlukan. Untuk objek besar atau instans luaran, penjejakan mendalam adalah membazir. Vue menyediakan shallowRef, triggerRef dan markRaw untuk kawalan terperinci.

Cara ref Menjejak Secara Mendalam

ref biasa yang menyimpan objek menjadikan keseluruhan objek itu reaktif secara mendalam — mengubah mana-mana sifat bersarang akan mencetuskan kemas kini. Ini bagus untuk state kecil, tetapi mahal bagi 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 Bersifat Reaktif

shallowRef menjejaki penetapan semula .value tetapi tidak menjejaki perubahan dalam nilai yang disimpan. Perubahan dalaman tidak mencetuskan pemaparan semula.

import { shallowRef } from "vue"

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

Bila Menggunakan shallowRef

Gunakannya untuk data besar yang hampir tidak berubah dan anda gantikan sepenuhnya, atau untuk membalut objek luaran (instans chart, set data besar) apabila penjejakan mendalam menambah overhed tanpa manfaat.

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

Masalah Pengubahan Mendalam

Kadangkala anda mengubah kandungan dalam shallowRef (demi prestasi), tetapi masih memerlukan pemaparan semula pada saat yang dikawal. Vue tidak dapat melihat perubahan itu, lalu antara muka pengguna menjadi lapuk.

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

triggerRef: Paksa Kemas Kini

triggerRef memaksa kesan yang bergantung pada ref cetek untuk dijalankan semula secara manual selepas anda mengubah kandungannya. Anda mengumpulkan banyak perubahan, kemudian picu 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

Corak Prestasi

Coraknya: simpan struktur besar dalam shallowRef, ubahnya secara bebas tanpa kos kereaktifan bagi setiap perubahan, kemudian panggil triggerRef sekali apabila anda mahu paparan mencerminkan kumpulan perubahan itu.

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

markRaw: Tarik Diri Sepenuhnya

markRaw menandakan objek supaya Vue tidak sekali-kali menjadikannya reaktif, walaupun objek itu berada dalam reactive atau ref biasa. Gunakannya untuk instans kelas pihak ketiga yang tidak sepatutnya diproksikan.

import { markRaw, reactive } from "vue"

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

Kepentingan markRaw

Membalut instans kelas kompleks (peta, penyunting, soket web) dalam proksi reaktif boleh merosakkan rujukan dalaman atau menyebabkan pepijat yang sukar dikesan. markRaw membiarkannya tidak disentuh sambil mengekalkannya dalam state reaktif.

Menggabungkan Alat

Alat-alat ini boleh digabungkan: shallowRef yang menyimpan instans markRaw memberikan anda ruang yang boleh digantikan secara reaktif, dengan objek dalaman yang tidak pernah diproksikan oleh Vue — sesuai untuk integrasi luaran.

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

Kos Kereaktifan berbanding Kawalan

Pertukarannya: kereaktifan mendalam mudah digunakan tetapi lebih berat; API cetek memberikan kawalan dan prestasi dengan mengorbankan keperluan untuk mencetuskan kemas kini sendiri. Gunakannya hanya apabila pemprofilan menunjukkan bahawa ia diperlukan.

Semakan Pantas

Uji pemahaman anda tentang kereaktifan lanjutan.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari kawalan kereaktifan lanjutan:

  • shallowRef hanya bertindak balas terhadap penetapan semula .value, bukan perubahan dalaman — sesuai untuk data besar atau luaran.
  • triggerRef memaksa kemas kini secara manual selepas kandungan ref cetek diubah (kumpulkan perubahan, kemudian picu sekali).
  • markRaw menarik sesuatu objek daripada kereaktifan secara kekal, sesuai untuk instans kelas pihak ketiga.
  • Alat-alat ini memberikan prestasi dan kawalan dengan mengorbankan keperluan untuk mencetuskan kemas kini sendiri.
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 percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Kereaktifan Lanjutan: shallowRef dan triggerRef” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Kereaktifan Lanjutan: shallowRef dan triggerRef”, 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 “Kereaktifan Lanjutan: shallowRef dan triggerRef”?

shallowRef untuk prestasi, markRaw untuk mengecualikan daripada kereaktifan, triggerRef untuk pencetus manual. 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 1 daripada 4.

Berapa lamakah pelajaran “Kereaktifan Lanjutan: shallowRef dan triggerRef” 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

  1. Kereaktifan Lanjutan: shallowRef dan triggerRef
  2. Kilang Komposabel dan Komposabel Berparameter
  3. Mesin Keadaan dengan XState dalam Vue
  4. effectScope untuk Kesan Berkumpulan
← Kembali ke Vue Academy