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

С 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>
    Ask a yes/no question:
    <input v-model="question" :disabled="loading" />
  </p>
  <p>{{ answer }}</p>
</template>

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

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

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

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

// одиночный ref
watch(x, (newX) => {
  console.log(`x is ${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 равен: ${count}`)
})

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

// вместо этого используйте геттер:
watch(
  () => obj.count,
  (count) => {
    console.log(`count равен: ${count}`)
  }
)

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

const obj = reactive({ count: 0 })

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

obj.count++

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

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

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

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

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

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

watchEffect() ​

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

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 }
)

В частности, обратите внимание, что watcher использует 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 и реактивной загрузкой данных в action.

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

watch vs. watchEffect ​

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

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

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

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

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

Post-flush watchEffect() также имеет удобный псевдоним, watchPostEffect():

import { watchPostEffect } from 'vue'

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

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

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

У синхронных watchEffect() также есть удобный псевдоним, watchSyncEffect():

import { watchSyncEffect } from 'vue'

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

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

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

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

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

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

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

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

// ...позже, когда уже не нужно
unwatch()

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

// данные, загружаемые асинхронно
const data = ref(null)

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