Что такое watchEffect в Vue 3?

В Vue 3 была введена Composition API, которая предоставляет новый способ организации логики компонентов. Одним из полезных инструментов в этой новой системе является watchEffect. Это функция для отслеживания реактивных данных и запуска побочных эффектов, когда эти данные изменяются.

Основы watchEffect

watchEffect позволяет автоматически отслеживать зависимые реактивные значения. Когда одно из этих значений изменяется, watchEffect перезапускается, что полезно для выполнения различных операций, таких как обновление DOM или выполнение асинхронных запросов.

Как использовать watchEffect

Вот простой пример использования watchEffect в Vue 3:

<template>
  <div>
    <input v-model="count" type="number" />
    <p>Квадрат числа: {{ square }}</p>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);
    const square = ref(0);

    // Используем watchEffect для отслеживания изменения переменной count
    watchEffect(() => {
      square.value = count.value * count.value;
    });

    return {
      count,
      square
    };
  }
}
</script>

Как работает пример

1. Создание реактивных переменных: Внутри setup мы создаем реактивную переменную count с помощью ref. Результат (square) также создается как реактивная переменная.
2. Отслеживание изменений: watchEffect принимает функцию, в которой мы обращаемся к count.value для вычисления square.value. Каждый раз, когда значение count изменится, watchEffect автоматически вызовет переданную функцию и обновит square.
3. Обновление DOM: Благодаря использованию v-model в <input>, Vue автоматически обновляет значение count при изменении ввода, что в свою очередь вызывает watchEffect, и square обновляется.

Примечания

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

Заключение

watchEffect - это мощный инструмент в Vue 3, который упрощает управление побочными эффектами в ваших компонентах. Рекомендуется ознакомиться с этим API и его возможностями для создания более реактивных и отзывчивых приложений.