Наблюдатели ​

С помощью Composition API мы можем использовать функцию watch для запуска обратного вызова при каждом изменении части реактивного состояния:

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

const question = ref('')
const answer = ref('Вопросы обычно содержат вопросительный знак. ;-)')
const loading = ref(false)

// watch работает напрямую с ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    loading.value = true
    answer.value = 'Думаю...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Ошибка! Не удалось связаться с API. ' + error
    } finally {
      loading.value = false
    }
  }
})
</script>

<template>
  <p>
    Задайте вопрос «да/нет»:
    <input v-model="question" :disabled="loading" />
  </p>
  <p>{{ answer }}</p>
</template>

Попробовать в Песочнице

Типы источников Watch ​

Первым аргументом watch могут быть различные типы реактивных «источников»: Это может быть ссылка (включая вычисляемые ссылки), реактивный объект, геттер-функция или массив из нескольких источников:

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

// одиночная ссылка
watch(x, (newX) => {
  console.log(`x — ${newX}`)
})

// геттер
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`сумма x + y: ${sum}`)
  }
)

// массив из нескольких источников
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x — ${newX}, y — ${newY}`)
})

Обратите внимание, что вы не можете наблюдать за свойством реактивного объекта таким образом:

const obj = reactive({ count: 0 })

// Это не сработает, потому что мы передаем в watch() число
watch(obj.count, (count) => {
  console.log(`Счётчик: ${count}`)
})

Вместо этого используйте геттер:

// используем геттер:
watch(
  () => obj.count,
  (count) => {
    console.log(`Счётчик: ${count}`)
  }
)

Когда вы вызываете watch() непосредственно на реактивном объекте, он неявно создаст глубокий наблюдатель — обратный вызов будет срабатывать на все вложенные мутации:

const obj = reactive({ count: 0 })

watch(obj, (newValue, oldValue) => {
  // срабатывает при мутациях вложенных свойств
  // Примечание: Здесь `newValue` будет равно `oldValue`,
  // потому что они оба указывают на один и тот же объект!
})

obj.count++

Это следует отличать от геттера, возвращающего реактивный объект — в последнем случае обратный вызов сработает только в том случае, если геттер вернет другой объект:

watch(
  () => state.someObject,
  () => {
    // срабатывает только при замене state.someObject
  }
)

Однако вы можете заставить второй вариант превратиться в глубокий наблюдатель, явно используя опцию deep:

watch(
  () => state.someObject,
  (newValue, oldValue) => {
    // Примечание: Здесь `newValue` будет равно `oldValue`,
    // *если* state.someObject не был заменен
  },
  { deep: true }
)

Мы можем заставить обратный вызов наблюдателя выполняться немедленно, передав ему параметр immediate: true:

watch(
  source,
  (newValue, oldValue) => {
    // выполняется сразу, затем снова, когда изменяется `source`.
  },
  { immediate: true }
)

watchEffect() ​

Обычно обратный вызов наблюдателя использует точно такое же реактивное состояние, как и источник. Например, рассмотрим следующий код, который использует наблюдатель для загрузки удаленного ресурса при каждом изменении ссылки 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 }
)

В частности, обратите внимание, что наблюдатель использует todoId дважды: один раз в качестве источника, а затем ещё раз внутри обратного вызова.

Это можно упростить с помощью watchEffect(). watchEffect() позволяет нам автоматически отслеживать реактивные зависимости обратного вызова. Приведённый выше наблюдатель можно переписать в виде:

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

Здесь обратный вызов будет выполнен немедленно, нет необходимости указывать immediate: true. Во время выполнения он будет автоматически отслеживать todoId.value как зависимость (аналогично вычисляемым свойствам). Когда todoId.value изменится, обратный вызов будет запущен снова. С watchEffect() нам больше не нужно явно передавать todoId в качестве исходного значения.

Вы можете посмотреть этот пример watchEffect() и реактивной выборки данных в действии.

Для таких примеров, как этот, с одной зависимостью, польза от watchEffect() относительно невелика. Но для наблюдателей, у которых есть несколько зависимостей, использование watchEffect() снимает бремя необходимости вести список зависимостей вручную. Кроме того, если вам нужно следить за несколькими свойствами во вложенной структуре данных, watchEffect() может оказаться более эффективным, чем глубокий наблюдатель, поскольку он будет отслеживать только те свойства, которые используются в обратном вызове, а не рекурсивно отслеживать их все.

watch в сравнении с watchEffect ​

watch и watchEffect позволяют нам реактивно выполнять побочные эффекты. Их основное отличие заключается в способе отслеживания реактивных зависимостей:

• watch отслеживает только явно наблюдаемый источник. Он не будет отслеживать ничего, к чему обращаются внутри обратного вызова. Кроме того, обратный вызов срабатывает только тогда, когда источник действительно изменился. watch отделяет отслеживание зависимостей от побочного эффекта, предоставляя нам более точный контроль над тем, когда должен сработать обратный вызов.

• С другой стороны, watchEffect объединяет отслеживание зависимостей и побочных эффектов в одну фазу. Он автоматически отслеживает каждое реактивное свойство, к которому обращаются во время его синхронного выполнения. Это удобнее и обычно приводит к более короткому коду, но делает реактивные зависимости менее явными.

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

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

watchEffect() с опцией flush: 'post' также имеет удобный псевдоним — watchPostEffect():

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* выполняется после обновлений Vue */
})

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

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

watchEffect() с опцией flush: 'sync' также имеет удобный псевдоним — watchSyncEffect():

import { watchSyncEffect } from 'vue'

watchSyncEffect(() => {
  /* выполняется синхронно при реактивном изменении данных */
})

Наблюдатели, объявленные синхронно внутри setup() или <script setup>, привязываются к экземпляру компонента-владельца и будут автоматически остановлены, когда компонент-владелец будет размонтирован. В большинстве случаев вам не нужно беспокоиться о том, чтобы самостоятельно остановить наблюдателя.

Ключевым моментом здесь является то, что наблюдатель должен быть создан синхронно: Если наблюдатель создается в асинхронном обратном вызове, он не будет привязан к компоненту-владельцу и должен быть остановлен вручную, чтобы избежать утечки памяти. Вот пример:

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

// этот будет автоматически остановлен
watchEffect(() => {})

// ...этот - нет!
setTimeout(() => {
  watchEffect(() => {})
}, 100)
</script>

Чтобы вручную остановить наблюдателя, воспользуйтесь возвращаемым обработчиком. Это работает как для watch, так и для watchEffect:

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

// ...позже, когда необходимость в них отпадет
unwatch()

Обратите внимание, что случаев, когда вам нужно создавать наблюдатели асинхронно, должно быть очень мало, и по возможности следует предпочесть синхронное создание. Если вам нужно дождаться каких-то асинхронных данных, вы можете сделать логику watch условной:

// данные для асинхронной загрузки
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // делать что-то при загрузке данных
  }
})