0Pricing
Vue Academy · Урок

Наблюдатели и глубокая реактивность

Реагируйте на изменения данных с помощью наблюдателей и глубокого отслеживания

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

Что такое наблюдатель

Наблюдатель запускает функцию в ответ на изменение данных.

  • В отличие от вычисляемого свойства, он предназначен для побочных эффектов
  • Получение данных, ведение журнала, сохранение в хранилище
  • Вы реагируете, когда изменяется что-то конкретное

Функция watch

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

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

Практический пример

Наблюдение за полем поиска для запуска вызова программного интерфейса при его изменении.

const search = ref("")

watch(search, async (newQuery) => {
  const results = await fetchResults(newQuery)
  items.value = results
})

Параметр немедленного запуска

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

watch(userId, (id) => {
  loadUser(id)
}, { immediate: true })

// Runs immediately with the current value,
// then again on every change

Параметр глубокого отслеживания

По умолчанию наблюдение за объектом срабатывает только при изменении ссылки на него. Параметр deep также отслеживает вложенные свойства.

const profile = reactive({ name: "Ada", address: { city: "London" } })

watch(profile, (val) => {
  console.log("profile changed")
}, { deep: true })

// Fires even when profile.address.city changes

Наблюдение за вложенными объектами

Без параметра deep изменение вложенного свойства наблюдаемого реактивного объекта может не запустить функцию обратного вызова ожидаемым образом. Параметр deep гарантирует это ценой дополнительных вычислений.

  • Используйте глубокое отслеживание только тогда, когда оно действительно необходимо для вложенных данных
  • Глубокое отслеживание больших объектов может требовать значительных ресурсов

Наблюдение за результатом функции

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

watch(
  () => profile.address.city,
  (newCity) => {
    console.log("city is now", newCity)
  }
)

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

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

watch([width, height], ([newW, newH], [oldW, oldH]) => {
  console.log("size:", newW, "x", newH)
})

watchEffect

watchEffect запускается сразу и выполняется повторно, когда изменяется любое реактивное значение, которое он считывает. Явно перечислять источники не нужно.

import { watchEffect } from "vue"

watchEffect(() => {
  console.log("count is", count.value)
})

// Runs now, and again whenever count changes

watch и watchEffect

Как выбрать между ними:

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

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

Наблюдатели в API параметров

API параметров объявляет наблюдатели в блоке watch, используя имя данных в качестве ключа.

export default {
  data() {
    return { question: "" }
  },
  watch: {
    question(newVal, oldVal) {
      this.getAnswer(newVal)
    }
  }
}

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

Проверьте, насколько хорошо Вы поняли работу наблюдателей.

Итоги: наблюдатели и глубокая реактивность

Вы научились реагировать на изменения с помощью побочных эффектов:

  • watch наблюдает за источником и предоставляет новые и старые значения
  • immediate запускает его один раз в начале
  • deep отслеживает изменения вложенных объектов
  • watchEffect автоматически отслеживает зависимости и запускается сразу
  • Наблюдайте за несколькими источниками с помощью массива

Далее: маршрутизация с помощью Vue Router.

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

Урок «Наблюдатели и глубокая реактивность» бесплатный?

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

Чему я научусь в уроке «Наблюдатели и глубокая реактивность»?

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

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

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

Сколько времени занимает урок «Наблюдатели и глубокая реактивность»?

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

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

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

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

  1. Основы реактивности
  2. Вычисляемые свойства
  3. Наблюдатели и глубокая реактивность
← Назад к Vue Academy