Что такое 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>
Как работает пример
setup мы создаем реактивную переменную count с помощью ref. Результат (square) также создается как реактивная переменная.watchEffect принимает функцию, в которой мы обращаемся к count.value для вычисления square.value. Каждый раз, когда значение count изменится, watchEffect автоматически вызовет переданную функцию и обновит square.v-model в <input>, Vue автоматически обновляет значение count при изменении ввода, что в свою очередь вызывает watchEffect, и square обновляется.Примечания
watchEffectочень удобен, когда вам нужно выполнить какой-то код при изменении реактивных переменных, но вам не нужно сохранять эти зависимости явно, как это делается сwatch.- Используйте
watchEffectдля простых сценариев. Если вам нужно более сложное отслеживание или вы хотите контролировать, какие конкретно изменения инициируют срабатывание, лучше воспользоваться более мощным подходом с помощьюwatch.
Заключение
watchEffect - это мощный инструмент в Vue 3, который упрощает управление побочными эффектами в ваших компонентах. Рекомендуется ознакомиться с этим API и его возможностями для создания более реактивных и отзывчивых приложений.