> Вызывается ли watchEffect сразу или только при изменении данных во Vue (Vue.js)

Короткий ответ

watchEffect вызывается сразу при инициализации, а затем повторно при изменении отслеживаемых реактивных зависимостей. В отличие от watch, он не требует явного указания источника данных - зависимости собираются автоматически во время первого выполнения. Это поведение аналогично computed, но без возврата значения.

Подробное объяснение

watchEffect запускает переданную функцию немедленно при создании watcher. Во время первого выполнения Vue отслеживает все реактивные свойства, к которым происходит обращение, и регистрирует их как зависимости. При последующем изменении любой из этих зависимостей функция выполняется снова.

Ключевое отличие от watch:

• watch требует явного указания источника и выполняется лениво (по умолчанию не запускается при создании)
• watchEffect автоматически собирает зависимости и выполняется синхронно сразу

Важно: зависимости собираются только во время синхронного выполнения. Асинхронные обращения к реактивным данным внутри watchEffect не будут отслеживаться.

На практике

watchEffect удобен для:

• Логирования или отправки аналитики при изменении данных
• Синхронизации состояния с внешними системами (localStorage, API)
• Выполнения побочных эффектов, зависящих от нескольких реактивных источников

Когда использовать watch вместо watchEffect:

• Нужен доступ к старому и новому значению
• Требуется явно указать зависимости
• Нужно отложить выполнение (lazy: true)
• Важен контроль над глубиной отслеживания (deep, flush)

Пример кода

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

const count = ref(0)
const name = ref('Vue')

// Выполнится сразу, затем при изменении count или name
watchEffect(() => {
  console.log(`Count: ${count.value}, Name: ${name.value}`)
})

// Аналог с watch - требует явного указания
watch([count, name], ([newCount, newName]) => {
  console.log(`Count: ${newCount}, Name: ${newName}`)
})
</script>

Как отвечать на собеседовании

Начни с ключевого факта: watchEffect выполняется сразу и автоматически собирает зависимости. Подчеркни отличие от watch - явное указание источника и ленивое выполнение. Приведи пример использования для побочных эффектов. Упомяни, что зависимости собираются только синхронно. Если спросят про flush, добавь, что по умолчанию эффект выполняется перед рендерингом ('pre'), но можно изменить на 'post' или 'sync'.

Что проверяет интервьюер

• Понимание реактивной системы Vue и механизма отслеживания зависимостей
• Умение различать watch и watchEffect по поведению и сценариям использования
• Знание особенностей: синхронный сбор зависимостей, немедленный запуск
• Практическое понимание, когда какой инструмент применить

Типичные ошибки

• Утверждение, что watchEffect не выполняется сразу - это неверно
• Попытка использовать watchEffect для получения старых и новых значений - это невозможно
• Использование асинхронных операций внутри watchEffect без понимания, что зависимости не будут отслеживаться
• Путаница с watch - думать, что watch тоже выполняется сразу по умолчанию
• Игнорирование параметра flush и предположение, что эффект всегда выполняется после рендеринга