Obserwatorzy ​

Korzystając z Composition API, możemy użyć funkcji watch, aby uruchomić funkcję zwrotną, gdy zmieni się stan reaktywny:

<script setup>
import { ref, watch } from 'vue'

const question = ref('')
const answer = ref('Pytania zazwyczaj zawierają znak zapytania. ;-)')
const loading = ref(false)

// watch działa bezpośrednio na ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    loading.value = true
    answer.value = 'Myślę...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Błąd! Nie udało się połączyć z API. ' + error
    } finally {
      loading.value = false
    }
  }
})
</script>

<template>
  <p>
    Zadaj pytanie tak/nie:
    <input v-model="question" :disabled="loading" />
  </p>
  <p>{{ answer }}</p>
</template>

Wypróbuj w playground

Obserwowanie typów źródłowych ​

Pierwszy argument watch może być różnymi typami reaktywnych „źródeł”: może to być ref (w tym i computed ref), obiekt reaktywny, funkcja getter lub tablica wielu źródeł:

const x = ref(0)
const y = ref(0)

// pojedynczy ref
watch(x, (newX) => {
  console.log(`x to ${newX}`)
})

// getter
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sumą x + y jest: ${sum}`)
  }
)

// tablica wielu źródeł
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x to ${newX}, a y to ${newY}`)
})

Należy pamiętać, że nie można obserwować właściwości obiektu reaktywnego w ten sposób:

const obj = reactive({ count: 0 })

// to nie zadziała, ponieważ przekazujemy liczbę do watch()
watch(obj.count, (count) => {
  console.log(`Liczba wynosi: ${count}`)
})

Zamiast tego użyj gettera:

// zamiast tego użyj gettera:
watch(
  () => obj.count,
  (count) => {
    console.log(`Liczba wynosi: ${count}`)
  }
)

Gdy wywołasz watch() bezpośrednio na reaktywnym obiekcie, zostanie automatycznie stworzony "głęboki" obserwator – funkcja zwrotna zostanie wywołana przy każdej zmianie w zagnieżdżonych właściwościach:

const obj = reactive({ count: 0 })

watch(obj, (newValue, oldValue) => {
  // wywołuje się przy mutacjach zagnieżdżonych właściwości
  // Uwaga: `newValue` będzie równe `oldValue`, ponieważ obydwa
  // wskazują na ten sam obiekt!
})

obj.count++

Należy to rozróżnić od getterów, które zwracają reaktywny obiekt – w takim przypadku funkcja zwrotna zostanie wywołana tylko wtedy, gdy getter zwróci inny obiekt:

watch(
  () => state.someObject,
  () => {
    // wywołuje się tylko wtedy, gdy state.someObject zostanie zastąpione
  }
)

Możesz jednak wymusić, aby drugi przypadek działał jako "głęboki" obserwator, używając opcji deep:

watch(
  () => state.someObject,
  (newValue, oldValue) => {
    // Uwaga: `newValue` będzie równe `oldValue`, chyba że
    // state.someObject zostało zastąpione
  },
  { deep: true }
)

Możemy wymusić natychmiastowe wykonanie funkcji zwrotnej watchera, przekazując opcję immediate: true:

watch(
  source,
  (newValue, oldValue) => {
    // wykona się natychmiast, a potem ponownie, gdy `source` się zmieni
  },
  { immediate: true }
)

watchEffect() ​

Często funkcja zwrotna obserwatora używa dokładnie tego samego reaktywnego stanu co źródło. Na przykład, rozważmy poniższy kod, który używa obserwatora do załadowania zasobów zdalnych, gdy zmienia się wartość todoId:

const todoId = ref(1)
const data = ref(null)

watch(
  todoId,
  async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )
    data.value = await response.json()
  },
  { immediate: true }
)

W szczególności zauważ, jak watcher używa todoId dwukrotnie: raz jako źródło, a następnie ponownie wewnątrz funkcji zwrotnej.

Można to uprościć za pomocą watchEffect(). watchEffect() pozwala automatycznie śledzić zależności reaktywne funkcji zwrotnej. Powyższy watcher można zapisać w następujący sposób:

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

Tutaj funkcja zwrotna wykona się natychmiast, nie trzeba używać immediate: true. Podczas jej wykonywania automatycznie zostanie śledzona todoId.value jako zależność (podobnie jak w przypadku właściwości obliczanych). Za każdym razem, gdy todoId.value się zmieni, funkcja zwrotna zostanie ponownie wywołana. Dzięki watchEffect() nie musimy jawnie przekazywać todoId jako źródła wartości.

Możesz zapoznać się z tym przykładem użycia watchEffect() i reaktywnego pobierania danych w akcji.

Dla przykładów takich jak ten, z jedną zależnością, korzyści z użycia watchEffect() są stosunkowo niewielkie. Jednak w przypadku obserwatorów, które mają wiele zależności, użycie watchEffect() eliminuje konieczność ręcznego utrzymywania listy zależności. Ponadto, jeśli musisz śledzić wiele właściwości w zagnieżdżonej strukturze danych, watchEffect() może okazać się bardziej wydajny niż "głęboki" obserwator, ponieważ będzie śledził tylko te właściwości, które są używane w funkcji zwrotnej, zamiast rekurencyjnie śledzić wszystkie z nich.

watch vs. watchEffect ​

watch i watchEffect pozwalają na reaktywne wykonywanie efektów ubocznych. Ich główna różnica polega na sposobie śledzenia zależności reaktywnych:

• watch śledzi tylko jawnie obserwowane źródło. Nie śledzi niczego, co jest używane wewnątrz funkcji zwrotnej. Ponadto funkcja zwrotna wywołuje się tylko wtedy, gdy źródło faktycznie się zmieni. watch oddziela śledzenie zależności od efektów ubocznych, dając większą kontrolę nad tym, kiedy funkcja zwrotna powinna być wywołana.

• z kolei watchEffect łączy śledzenie zależności i efekt uboczny w jednej fazie. Automatycznie śledzi każdą reaktywną właściwość dostępną podczas swojego synchronicznego wykonania. Jest to wygodniejsze i zazwyczaj skutkuje zwięzłym kodem, ale sprawia, że jego reaktywne zależności są mniej jednoznaczne.

watch(source, callback, {
  flush: 'post'
})

watchEffect(callback, {
  flush: 'post'
})

Post-flush watchEffect() ma również wygodny alias, watchPostEffect():

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* wykonywane po aktualizacjach Vue */
})

watch(source, callback, {
  flush: 'sync'
})

watchEffect(callback, {
  flush: 'sync'
})

Synchroniczny watchEffect() ma również wygodny alias, watchSyncEffect():

import { watchSyncEffect } from 'vue'

watchSyncEffect(() => {
  /* wykonywane synchronicznie po reaktywnej zmianie danych */
})

Obserwatorzy zadeklarowani synchronicznie w setup() lub <script setup> są związani z instancją komponentu właściciela i będą automatycznie zatrzymywane, gdy komponent właściciela zostanie usunięty. W większości przypadków nie musisz martwić się o zatrzymywanie obserwatora samodzielnie.

Kluczowe jest to, że obserwator musi być tworzony synchronicznie: jeśli obserwator zostanie stworzony w asynchronicznej funkcji zwrotnej, nie będzie związany z komponentem właściciela i będzie musiał zostać zatrzymany ręcznie, aby uniknąć wycieków pamięci. Oto przykład:

<script setup>
import { watchEffect } from 'vue'

// ten będzie automatycznie zatrzymany
watchEffect(() => {})

// ...ten nie będzie!
setTimeout(() => {
  watchEffect(() => {})
}, 100)
</script>

Aby ręcznie zatrzymać obserwator, użyj zwróconej funkcji obsługi. Działa to zarówno dla watch, jak i watchEffect:

const unwatch = watchEffect(() => {})

// ...później, gdy nie jest już potrzebny
unwatch()

Należy zauważyć, że przypadków, w których trzeba tworzyć obserwatorów asynchronicznych, powinno być bardzo mało, a tworzenie synchroniczne powinno być preferowane, gdy tylko to możliwe. Jeśli musisz poczekać na jakieś dane asynchroniczne, możesz zamiast tego sprawić, by logika obserwatora była warunkowa:

// dane do załadowania asynchronicznie
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // wykonaj coś, gdy dane zostaną załadowane
  }
})