watchEffect - Automatyczne Śledzenie

watchEffect automatycznie śledzi wszystkie reaktywne zależności użyte wewnątrz.

Podstawy watchEffect

1<script setup>
2import { ref, watchEffect } from 'vue'
3
4const count = ref(0)
5const message = ref('Hello')
6
7// Automatycznie śledzi count i message
8watchEffect(() => {
9  console.log(`Count: ${count.value}, Message: ${message.value}`)
10})
11
12// Wywoła się:
13// 1. Natychmiast przy inicjalizacji
14// 2. Gdy count się zmieni
15// 3. Gdy message się zmieni
16</script>

watch vs watchEffect

1import { ref, watch, watchEffect } from 'vue'
2
3const count = ref(0)
4
5// watch - jawne źródło, dostęp do oldValue
6watch(count, (newVal, oldVal) => {
7  console.log(`${oldVal} → ${newVal}`)
8})
9
10// watchEffect - automatyczne śledzenie, brak oldValue
11watchEffect(() => {
12  console.log(`Count: ${count.value}`)
13})

| Cecha | watch | watchEffect | |-------|-------|-------------| | Źródło | Jawne | Automatyczne | | oldValue | Tak | Nie | | immediate | Opcjonalne | Zawsze | | Lazy | Tak | Nie |

Cleanup w watchEffect

1<script setup>
2import { ref, watchEffect } from 'vue'
3
4const id = ref(1)
5
6watchEffect((onCleanup) => {
7  const controller = new AbortController()
8
9  fetch(`/api/artwork/${id.value}`, {
10    signal: controller.signal
11  })
12    .then(res => res.json())
13    .then(data => console.log(data))
14
15  // Cleanup - wywoływane przed każdym ponownym uruchomieniem
16  onCleanup(() => {
17    controller.abort()
18  })
19})
20</script>

watchPostEffect i watchSyncEffect

1import { watchEffect, watchPostEffect, watchSyncEffect } from 'vue'
2
3// Domyślnie - przed aktualizacją DOM
4watchEffect(() => { /* ... */ })
5
6// Po aktualizacji DOM
7watchPostEffect(() => {
8  // Tutaj DOM jest już zaktualizowany
9})
10
11// Synchronicznie - natychmiast przy zmianie
12watchSyncEffect(() => {
13  // Uwaga: może wpływać na wydajność
14})