computed() i watch()
Proszę leniwie wyprowadzać wartości za pomocą computed(), reagować na zmiany stanu przez watch() i watchEffect() oraz kontrolować moment opróżniania kolejki.
computed() i watch() to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
computed() w Composition API
computed(fn) tworzy tylko do odczytu reaktywny ref, który wyprowadza swoją wartość z innych źródeł reaktywnych. Jest buforowany — funkcja getter jest wykonywana ponownie tylko wtedy, gdy zmienią się zależności.
<script setup>
import { ref, computed } from 'vue';
const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);
const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>computed() z możliwością zapisu
Proszę przekazać obiekt z get i set, aby utworzyć computed z możliwością zapisu. Setter obsługuje aktualizacje, zazwyczaj odzwierciedlając zmianę w źródłowym refie.
const firstName = ref('Alice');
const lastName = ref('Smith');
const fullName = computed({
get: () => `${firstName.value} ${lastName.value}`,
set: (val: string) => {
[firstName.value, lastName.value] = val.split(' ');
}
});
fullName.value = 'Bob Jones'; // sets both refsPodstawy watch()
watch(source, callback) uruchamia funkcję callback po zmianie źródła. Funkcja callback otrzymuje nowe i stare wartości.
import { ref, watch } from 'vue';
const query = ref('');
watch(query, (newVal, oldVal) => {
console.log(`Changed from '${oldVal}' to '${newVal}'`);
searchAPI(newVal);
});Obserwowanie ref a reactive
Ref można obserwować bezpośrednio. Aby obserwować właściwość reaktywną, proszę użyć funkcji getter () => state.prop.
const count = ref(0);
watch(count, val => console.log('count:', val));
const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));Głębokie obserwowanie
Proszę przekazać { deep: true }, aby obserwować zagnieżdżone zmiany w refie zawierającym obiekt.
const user = ref({ name: 'Alice', address: { city: 'NY' } });
watch(user, (newUser) => {
console.log('user changed:', newUser);
}, { deep: true });Natychmiastowe obserwowanie
Proszę przekazać { immediate: true }, aby uruchomić funkcję callback natychmiast podczas konfiguracji, przed wystąpieniem jakiejkolwiek zmiany. Jest to przydatne, gdy efekt uboczny ma zostać wykonany dla wartości początkowej.
watch(userId, async (id) => {
user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on changewatchEffect()
watchEffect(fn) natychmiast uruchamia funkcję callback i wykonuje ją ponownie za każdym razem, gdy zmieni się dowolna reaktywna zależność użyta wewnątrz niej. Nie trzeba jawnie określać źródeł.
import { watchEffect } from 'vue';
watchEffect(() => {
// runs immediately and whenever query or page changes:
fetchResults(query.value, page.value);
});watchEffect a watch
watchEffect: natychmiastowe wykonanie, automatyczne śledzenie zależności, brak dostępu do starej wartości. watch: jawnie określone źródła, domyślnie wykonanie opóźnione, dostęp do starych i nowych wartości. Proszę używać watchEffect do deklaratywnych efektów ubocznych, a watch, gdy potrzebna jest kontrola nad tym, kiedy i jak często funkcja jest wykonywana.
Zatrzymywanie obserwatorów
Zarówno watch, jak i watchEffect zwracają funkcję zatrzymującą obserwowanie. Proszę ją wywołać, aby zatrzymać obserwowanie. W