0Pricing
Vue Academy · Lektion

Fortgeschrittene Reaktivität: shallowRef und triggerRef

shallowRef für bessere Performance, markRaw zum Ausschluss aus der Reaktivität und triggerRef zum manuellen Auslösen

Fortgeschrittene Reaktivität: shallowRef und triggerRef ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Mehr als ref und reactive

Vues tiefe Reaktivität ist praktisch, aber nicht immer erwünscht. Bei großen Objekten oder externen Instanzen ist tiefes Tracking ineffizient. Vue bietet shallowRef, triggerRef und markRaw für eine feinere Kontrolle.

Wie ref tiefgehend trackt

Ein normales ref, das ein Objekt enthält, macht das gesamte Objekt tief reaktiv – jede Änderung an einer verschachtelten Eigenschaft löst Aktualisierungen aus. Das ist für kleine Zustände ideal, bei großen Strukturen jedoch kostspielig.

import { ref } from "vue"

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

shallowRef: Nur .value ist reaktiv

shallowRef verfolgt die Neuzuweisung von .value, aber nicht die Mutationen innerhalb des enthaltenen Werts. Änderungen im Inneren lösen kein erneutes Rendern aus.

import { shallowRef } from "vue"

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

Wann shallowRef verwendet wird

Verwenden Sie es für große, weitgehend unveränderliche Daten, die Sie vollständig ersetzen, oder um externe Objekte zu kapseln (eine Chart-Instanz oder einen großen Datensatz), bei denen tiefes Tracking ohne Nutzen zusätzlichen Aufwand verursacht.

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

Das Problem tiefer Mutationen

Manchmal mutieren Sie innerhalb eines shallowRef tatsächlich den Inhalt, etwa aus Performancegründen, benötigen aber trotzdem zu einem kontrollierten Zeitpunkt ein erneutes Rendern. Vue erkennt die Änderung nicht, sodass die UI veraltet.

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

triggerRef: Aktualisierung erzwingen

triggerRef führt Effekte, die von einem shallow ref abhängen, manuell erneut aus, nachdem Sie dessen Inhalt mutiert haben. Sie bündeln mehrere Mutationen und lösen die Aktualisierung anschließend einmal aus.

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

Ein Performance-Muster

Das Muster sieht so aus: Sie speichern eine große Struktur in einem shallowRef, mutieren sie ohne Reaktivitätskosten für jede einzelne Änderung und rufen anschließend einmal triggerRef auf, wenn die Ansicht das gesamte Änderungenpaket widerspiegeln soll.

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

markRaw: Vollständig auf Reaktivität verzichten

markRaw kennzeichnet ein Objekt so, dass Vue es niemals reaktiv macht, auch nicht innerhalb eines reactive oder eines normalen ref. Verwenden Sie es für Instanzen von Klassen aus Drittanbieterbibliotheken, die nicht mit einem Proxy umhüllt werden sollen.

import { markRaw, reactive } from "vue"

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

Warum markRaw wichtig ist

Wenn Sie komplexe Klasseninstanzen wie Maps, Editoren oder WebSockets in einen reaktiven Proxy einschließen, können deren interne Referenzen beschädigt werden oder subtile Fehler entstehen. markRaw lässt diese Objekte unverändert, während sie weiterhin Teil des reaktiven Zustands sind.

Die Werkzeuge kombinieren

Diese Werkzeuge lassen sich kombinieren: Ein shallowRef, das eine markRaw-Instanz enthält, bietet Ihnen einen Slot, den Sie reaktiv ersetzen können, während Vue das innere Objekt niemals mit einem Proxy versieht – ideal für externe Integrationen.

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

Kosten der Reaktivität vs. Kontrolle

Der Kompromiss: Tiefe Reaktivität ist mühelos, aber aufwendiger; flache APIs bieten Ihnen Kontrolle und Performance, erfordern dafür jedoch, dass Sie Aktualisierungen selbst auslösen. Verwenden Sie sie nur, wenn das Profiling einen entsprechenden Bedarf zeigt.

Kurze Überprüfung

Prüfen Sie Ihr Verständnis der erweiterten Reaktivität.

Zusammenfassung

Sie haben erweiterte Steuerelemente für die Reaktivität kennengelernt:

  • shallowRef reagiert nur auf eine Neuzuweisung von .value, nicht auf Mutationen im Inneren – geeignet für große oder externe Daten.
  • triggerRef erzwingt manuell Aktualisierungen, nachdem Sie den Inhalt eines shallow ref mutiert haben (bündeln und anschließend einmal auslösen).
  • markRaw nimmt ein Objekt dauerhaft von der Reaktivität aus – ideal für Klasseninstanzen aus Drittanbieterbibliotheken.
  • Diese Werkzeuge bieten Performance und Kontrolle, erfordern dafür aber, dass Sie Aktualisierungen selbst auslösen.

Häufig gestellte Fragen

Ist die Lektion „Fortgeschrittene Reaktivität: shallowRef und triggerRef“ kostenlos?

Ja — der vollständige Text von „Fortgeschrittene Reaktivität: shallowRef und triggerRef“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Fortgeschrittene Reaktivität: shallowRef und triggerRef“?

shallowRef für bessere Performance, markRaw zum Ausschluss aus der Reaktivität und triggerRef zum manuellen Auslösen Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Fortgeschrittene Reaktivität: shallowRef und triggerRef“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Fortgeschrittene Reaktivität: shallowRef und triggerRef
  2. Composable-Factories und parametrisierte Composables
  3. Zustandsautomaten mit XState in Vue
  4. effectScope für gruppierte Effekte
← Zurück zu Vue Academy