Что такое watch / watchEffect и когда их имеет смысл использовать?

1️⃣ Как кратко ответить

watch и watchEffect — это реактивные функции во Vue.js, которые позволяют отслеживать изменения в реактивных данных и выполнять побочные эффекты. watch используется для наблюдения за конкретными реактивными свойствами, а watchEffect автоматически отслеживает все реактивные зависимости внутри своей функции. Используются для выполнения действий при изменении данных, например, для синхронизации с сервером или обновления пользовательского интерфейса.

2️⃣ Подробное объяснение темы

Во Vue.js, когда мы работаем с реактивными данными, часто возникает необходимость выполнять определенные действия в ответ на изменения этих данных. Для этого используются функции watch и watchEffect.

watch

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

Пример использования watch:

import { ref, watch } from 'vue';
​
const count = ref(0);
​
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

• import { ref, watch } from 'vue';: Импортируем необходимые функции из Vue.
• const count = ref(0);: Создаем реактивное свойство count с начальным значением 0.
• watch(count, (newValue, oldValue) => {...});: Устанавливаем наблюдатель за count. Функция-обработчик принимает два аргумента: новое и старое значения свойства.

watchEffect

watchEffect — это более автоматизированная версия watch. Она отслеживает все реактивные зависимости, которые используются внутри переданной функции, и автоматически запускает ее при изменении любой из этих зависимостей.

Пример использования watchEffect:

import { ref, watchEffect } from 'vue';
​
const count = ref(0);
const doubleCount = ref(0);
​
watchEffect(() => {
  doubleCount.value = count.value * 2;
  console.log(`Double count is now ${doubleCount.value}`);
});

• import { ref, watchEffect } from 'vue';: Импортируем необходимые функции из Vue.
• const count = ref(0);: Создаем реактивное свойство count.
• const doubleCount = ref(0);: Создаем еще одно реактивное свойство doubleCount.
• watchEffect(() => {...});: Устанавливаем эффект, который автоматически отслеживает все реактивные зависимости внутри функции. В данном случае, если count изменится, функция будет выполнена заново, обновляя doubleCount.

Когда использовать

• watch: Используйте, когда нужно отслеживать конкретные свойства и выполнять действия на основе их изменений. Это полезно, когда необходимо сравнивать старое и новое значения или когда нужно выполнять асинхронные операции.

• watchEffect: Используйте, когда нужно автоматически отслеживать все зависимости внутри функции. Это удобно для простых реактивных вычислений и синхронизации данных.

Обе функции помогают управлять побочными эффектами в реактивных приложениях, обеспечивая более гибкое и мощное управление состоянием.