В чём разница между вычисляемыми свойствами (computed properties) и watch'ерами? Когда использовать каждый?

Ключевое различие

computed отвечает на вопрос «какое значение я хочу видеть» — возвращает реактивный ref, кэшируется по зависимостям, пересчитывается только при их изменении. watch отвечает на вопрос «что нужно сделать, когда X изменился» — это эффект: fetch, навигация, логирование, синхронизация с внешним хранилищем.

Когда computed

• Значение зависит от других реактивных источников и нужно в шаблоне: :disabled="isInvalid".
• Нужна кэшированность — тяжёлая фильтрация, форматирование, агрегация списка.
• Нужна двусторонняя проекция: computed с get/set (например, Date ↔ ISO-строка в форме).

Когда watch

• Надо запустить побочный эффект: fetch при смене параметра, push в router, отправить аналитику.
• Нужен доступ к старому значению ((newVal, oldVal) => ...).
• Нужна отложенная реакция после DOM-обновления: flush: 'post'.
• Нужна однократная реакция: once: true (Vue 3.4+).

Пример

import { ref, computed, watch } from 'vue'

const query = ref('')
const items = ref<string[]>([])

// computed: чистое производное значение, кэшируется
const filtered = computed(() =>
  items.value.filter(i => i.toLowerCase().includes(query.value.toLowerCase()))
)

// watch: побочный эффект при смене query
watch(query, async (newVal, oldVal) => {
  if (newVal === oldVal) return
  items.value = await searchApi(newVal)
}, { debounce: 300 })

watchEffect vs watch

import { watchEffect } from 'vue'

// watchEffect: автоматически отслеживает все зависимости внутри
watchEffect(async () => {
  const result = await fetch(`/api/search?q=${query.value}`)
  items.value = await result.json()
})
// Минус: нет oldVal, нет explicit source — зависимости неявные

Подводные камни

• Запросы к API в computed — антипаттерн: каждый читатель триггерит эффект, кэширование ломается.
• computed ленив: если его никто не читает, он не вычисляется. Не рассчитывайте, что он «сам сработает» как watchEffect.
• В watch часто нужен immediate: true, если эффект должен выполниться при инициализации, а не только при первом изменении.
• flush: 'post' нужен, когда в callback хотите прочитать обновлённый DOM — без него DOM ещё не применён.
• Мутировать реактивный объект изнутри get computed — антипаттерн и источник бесконечных пересчётов.
• computed с get/set удобен для проекций (Date ↔ ISO-строка), но не превращайте его в стейт-машину с побочными эффектами.
• При использовании watch с объектом и deep: true — производительность падает на больших деревьях; используйте точечный геттер вместо deep-наблюдения.
• Не забывайте останавливать watcher'ы, созданные вне setup: сохраните возвращаемый unwatch и вызовите его вручную.

• Делать сетевой запрос внутри computed.
• Использовать watch там, где хватит computed, и перегружать его логикой представления.
• Забывать immediate: true, когда эффект должен сработать при загрузке.
• Менять источник внутри watch без guard и получать бесконечный цикл.

• Различает «получить значение» и «выполнить эффект».
• Понимает кэширование computed по зависимостям.
• Знает опции immediate, deep, flush, once.
• Упоминает computed с getter/setter как корректную двустороннюю проекцию.