Реактивность по-новому: как работают watch и watchEffect в Vue 3
Vue 3 принес в мир фронтенда немало изменений, и одним из ключевых нововведений стал Composition API. Вместе с ним появились новые инструменты управления реактивностью, такие как watch и watchEffect. Хотя оба они служат для слежения за изменениями данных, их поведение и подход к отслеживанию существенно различаются. В этой статье мы разберем, как использовать watch в Vue 3, когда лучше применить watchEffect, и какие нестандартные техники помогут избежать ловушек начинающих разработчиков.
Что делает watch: управление реактивностью под контролем
watch в Composition API — это прямой аналог старого доброго $watch из Options API. Он позволяет отслеживать изменение конкретной реактивной переменной и выполнять побочные действия. Это особенно полезно, когда нужно реагировать на переменные асинхронно или выполнять специфическую логику только при изменении определённого значения.
Например, если вы загружаете данные с сервера при изменении идентификатора пользователя:
```js
import { ref, watch } from 'vue'
const userId = ref(1)
const userData = ref(null)
watch(userId, async (newId, oldId) => {
userData.value = await fetchUserById(newId)
})
```
В этом примере watch реагирует только на изменения userId. Это делает его идеальным для случаев, когда нужно контролировать источник данных и не запускать эффекты без необходимости.
watchEffect: реактивность по принципу «сначала действие»
В отличие от watch, watchEffect сразу выполняет переданную в него функцию, следит за всеми реактивными переменными, к которым происходит обращение внутри, и автоматически повторяет выполнение при их изменении. Это делает его мощным инструментом, особенно на ранних этапах разработки, когда структура компонентов только формируется.
Вот базовый пример:
```js
import { ref, watchEffect } from 'vue'
const x = ref(10)
const y = ref(20)
watchEffect(() => {
console.log(`Сумма: ${x.value + y.value}`)
})
```
Любое изменение x или y приведёт к повторному запуску эффекта. Это удобно, но потенциально опасно, если вы не контролируете, какие переменные участвуют в вычислениях. Поэтому, если нужна высокая точность — используйте watch.
Различия watch и watchEffect Vue: контроль против автоматизации
Если говорить о различиях watch и watchEffect в Vue 3, то ключевое — это уровень контроля. watch требует явного указания переменной, за которой нужно следить. Это позволяет избежать лишних вычислений и писать более предсказуемый код. watchEffect, напротив, автоматически «собирает» зависимости, что удобно, но может привести к непредвиденным перезапускам.
Вот несколько ситуаций, где стоит использовать каждый из них:
- Используйте watch, когда:
- Нужно реагировать только на конкретные переменные
- Есть необходимость сравнивать старое и новое значение
- Требуется отложенное выполнение (например, flush: 'post')
- Выбирайте watchEffect, если:
- Нужно быстро отреагировать на любое изменение
- В коде много зависимостей, и определять их вручную сложно
- Нужна автоматическая связь между реактивными данными и вычислениями
Vue 3 watch и watchEffect руководство: нестандартные подходы
Часто разработчики используют watch и watchEffect в лоб. Но есть интересные паттерны, которые делают код чище и эффективнее.
1. Использование watchEffect для автоочистки ресурсов
Если вы работаете с внешними API или слушателями событий, watchEffect может возвращать функцию очистки:
```js
watchEffect((onInvalidate) => {
const socket = new WebSocket('wss://example.com')
socket.onmessage = handleMessage
onInvalidate(() => {
socket.close()
})
})
```
Как только реактивные зависимости изменятся, WebSocket будет закрыт, предотвращая утечки памяти.
2. Объединение watch с debounce
Когда нужно отслеживать ввод в поле и отправлять запросы с задержкой — watch идеально сочетается с lodash.debounce:
```js
import { ref, watch } from 'vue'
import debounce from 'lodash.debounce'
const search = ref('')
const results = ref([])
const fetchResults = debounce(async (query) => {
results.value = await searchApi(query)
}, 300)
watch(search, (newQuery) => {
fetchResults(newQuery)
})
```
Такая комбинация позволяет избежать лишних запросов на сервер и повысить отзывчивость интерфейса.
Частые ошибки и как их избежать
Работая с watch и watchEffect, легко попасть в ловушки:
- Избыточные перерендеры: watchEffect может запускаться чаще, чем нужно, если внутрь попадают лишние зависимости.
- Неверный порядок выполнения: по умолчанию watch исполняется после изменения данных, но это можно изменить с помощью параметра flush.
- Неправильная очистка эффектов: особенно в асинхронной логике важно использовать onInvalidate для отмены предыдущих операций.
Итоги: что выбрать — watch или watchEffect?
Оба инструмента — это не конкуренты, а дополнения друг к другу. Выбор между ними зависит от конкретной задачи. Если вам нужно тонко управлять реакцией на изменения данных — используйте watch. Если требуется быстро связать реактивные переменные с логикой — watchEffect ваш выбор.
Надеемся, это руководство по Vue 3 watch и watchEffect поможет вам уверенно использовать их в продакшн-коде. Не бойтесь экспериментировать — даже нестандартные решения, вроде автоматической отписки от сокетов или дебаунса через watch, уже стали частью практики опытных Vue-разработчиков.
Теперь, когда вы знаете различия watch и watchEffect Vue, пришло время опробовать их в своих компонентах и увидеть, как они могут упростить ваш код.
