Vue Academy · Lekcja

Zaawansowana reaktywność: shallowRef i triggerRef

shallowRef dla wydajności, markRaw do wyłączenia z reaktywności oraz triggerRef do ręcznego wyzwalania.

Zaawansowana reaktywność: shallowRef i triggerRef to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Poza ref i reactive

Głęboka reaktywność Vue jest wygodna, ale nie zawsze jest tym, czego Państwo potrzebują. W przypadku dużych obiektów lub zewnętrznych instancji głębokie śledzenie zmian jest nieefektywne. Vue udostępnia shallowRef, triggerRef i markRaw, które zapewniają szczegółową kontrolę.

Jak ref śledzi zmiany w głąb

Zwykły ref przechowujący obiekt sprawia, że cały obiekt staje się głęboko reaktywny — modyfikacja dowolnej zagnieżdżonej właściwości wywołuje aktualizacje. To świetne rozwiązanie dla małego stanu, ale kosztowne w przypadku dużych struktur.

import { ref } from "vue"

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

shallowRef: reaktywne jest tylko .value

shallowRef śledzi ponowne przypisanie .value, ale nie śledzi modyfikacji wewnątrz przechowywanej wartości. Zmiany wewnętrzne nie powodują ponownego renderowania.

import { shallowRef } from "vue"

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

Kiedy używać shallowRef

Należy używać go w przypadku dużych, w większości niezmiennych danych zastępowanych w całości albo do opakowywania zewnętrznych obiektów (instancji wykresu czy dużego zbioru danych), gdy głębokie śledzenie zmian powodowałoby dodatkowy narzut bez żadnych korzyści.

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

Problem głębokich mutacji

Czasami jednak modyfikuje się zawartość shallowRef (ze względów wydajnościowych), a mimo to potrzebne jest ponowne renderowanie w kontrolowanym momencie. Vue nie widzi tej zmiany, więc interfejs użytkownika przestaje się aktualizować.

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

triggerRef: wymuszanie aktualizacji

triggerRef ręcznie wymusza ponowne uruchomienie efektów zależnych od płytkiego refa po zmodyfikowaniu jego zawartości. Można wykonać wiele modyfikacji, a następnie wywołać tę funkcję tylko raz.

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

Wzorzec zwiększający wydajność

Wzorzec polega na przechowywaniu dużej struktury w shallowRef, swobodnym modyfikowaniu jej bez kosztu reaktywności przy każdej zmianie, a następnie wywołaniu triggerRef raz, gdy widok ma odzwierciedlić całą serię zmian.

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

markRaw: całkowite wyłączenie reaktywności

markRaw oznacza obiekt tak, aby Vue nigdy nie uczyniło go reaktywnym, nawet wewnątrz reactive lub zwykłego ref. Należy używać go w przypadku instancji klas pochodzących z bibliotek zewnętrznych, które nie powinny być opakowywane w proxy.

import { markRaw, reactive } from "vue"

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

Dlaczego markRaw ma znaczenie

Opakowanie złożonych instancji klas (map, edytorów, websocketów) w reaktywne proxy może uszkodzić ich wewnętrzne odwołania lub powodować trudne do wykrycia błędy. markRaw pozostawia je nietknięte, a jednocześnie pozwala przechowywać je w stanie reaktywnym.

Łączenie narzędzi

Te narzędzia można łączyć: shallowRef przechowujący instancję oznaczoną przez markRaw daje reaktywnie wymienialne miejsce, którego wewnętrznego obiektu Vue nigdy nie opakuje w proxy — idealne rozwiązanie w przypadku integracji z zewnętrznymi systemami.

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

Koszt reaktywności a kontrola

Kompromis wygląda następująco: głęboka reaktywność jest wygodna, ale bardziej obciążająca; płytkie API zapewnia kontrolę i wydajność kosztem konieczności ręcznego wyzwalania aktualizacji. Warto sięgać po nie tylko wtedy, gdy profilowanie wykaże taką potrzebę.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat zaawansowanej reaktywności.

Podsumowanie

Poznałeś zaawansowane mechanizmy sterowania reaktywnością:

shallowRef reaguje tylko na ponowne przypisanie .value, a nie na modyfikacje wewnętrzne — sprawdza się w przypadku dużych lub zewnętrznych danych.
triggerRef ręcznie wymusza aktualizacje po zmodyfikowaniu zawartości płytkiego refa (najpierw wykonuje się serię zmian, a następnie wywołuje funkcję tylko raz).
markRaw trwale wyłącza obiekt z reaktywności — idealnie sprawdza się w przypadku instancji klas pochodzących z bibliotek zewnętrznych.
Mechanizmy te zapewniają wydajność i kontrolę kosztem konieczności ręcznego wyzwalania aktualizacji.

Często zadawane pytania

Czy lekcja „Zaawansowana reaktywność: shallowRef i triggerRef” jest bezpłatna?

Tak — pełny tekst „Zaawansowana reaktywność: shallowRef i triggerRef” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zaawansowana reaktywność: shallowRef i triggerRef”?

shallowRef dla wydajności, markRaw do wyłączenia z reaktywności oraz triggerRef do ręcznego wyzwalania. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Zaawansowana reaktywność: shallowRef i triggerRef”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Zaawansowana reaktywność: shallowRef i triggerRef
Fabryki composable i composable z parametrami
Maszyny stanów z XState w Vue
effectScope do grupowania efektów

← Powrót do Vue Academy