Vue Academy · Урок

Computed и Watch в Composition API

computed() для производного состояния, watch() и watchEffect() для побочных эффектов

Урок 4 из 413 шагов

«Computed и Watch в Composition API» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Вывод производных значений и реакция на состояние

Реактивное состояние — только половина задачи. Вам также нужно выводить из него новые значения и реагировать на изменения. Для этого API композиции предлагает computed, watch и watchEffect.

computed для производных значений

computed() принимает функцию получения значения и возвращает реф, значение которого выводится из другого реактивного состояния. В JS обращайтесь к нему через .value, а в шаблоне оно извлекается автоматически.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed работает лениво и кэширует результат

Вычисляемое значение пересчитывается только при изменении одной из его реактивных зависимостей. Если прочитать его десять раз без изменений, функция получения значения выполнится один раз, а затем будет повторно использован сохраненный результат.

Поэтому computed идеально подходит для ресурсоемких вычислений.

computed обновляется автоматически

Измените зависимость — и computed обновится при следующем чтении. Вы никогда не вызываете его вручную.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

watch для побочных эффектов

watch() наблюдает за реактивным источником и запускает функцию обратного вызова при его изменении. Функция обратного вызова получает новое значение и старое значение.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch по умолчанию работает лениво

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

Наблюдение за несколькими источниками

Передайте массив источников, чтобы одновременно наблюдать за несколькими значениями. Функция обратного вызова получает массивы новых и старых значений.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

Наблюдение за функцией получения значения

Чтобы наблюдать за свойством реактивного объекта, передайте функцию получения значения. Наблюдение непосредственно за объектом срабатывает только при глубоких изменениях, что может удивить.

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: немедленный запуск и автоматическое отслеживание

watchEffect() немедленно запускает свою функцию и повторяет ее выполнение при изменении любого реактивного значения, используемого внутри. Вам не нужно перечислять зависимости — они отслеживаются автоматически.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch и watchEffect

watch: явный источник, отложенный запуск, доступны старое и новое значения.
watchEffect: автоматическое отслеживание зависимостей, немедленный запуск, старое значение недоступно.

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

Вычисляемые значения и наблюдение

Используйте computed, когда хотите получить новое производное значение. Используйте watch или watchEffect, когда хотите выполнить действие в ответ на изменение. Не используйте watch для пересчёта значения — для этого предназначен computed.

Быстрая проверка

Выберите подходящий реактивный помощник.

Ответь в интерактивном уроке

Итоги

Теперь Вы умеете вычислять значения и реагировать на изменения:

computed создаёт лениво вычисляемые производные значения с кэшированием.
watch реагирует на конкретный источник и предоставляет новое и старое значения; он работает лениво.
watchEffect запускается сразу и автоматически отслеживает зависимости.
Используйте computed для значений, а watch/watchEffect — для побочных эффектов.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 42
Уроки: 156

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Computed и Watch в Composition API» бесплатный?

Да — полный текст урока «Computed и Watch в Composition API» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Computed и Watch в Composition API»?

computed() для производного состояния, watch() и watchEffect() для побочных эффектов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Computed и Watch в Composition API»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Зачем нужен Composition API
Функция setup() и реактивные переменные
ref и reactive: когда использовать каждый
Computed и Watch в Composition API

← Назад к Vue Academy