0Pricing
Vue Academy · Урок

effectScope для группировки эффектов

effectScope(), запуск наблюдателей и вычисляемых значений в области и scope.stop() для очистки

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

Проблема очистки

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

Что делает effectScope

effectScope() создаёт область действия, которая захватывает все реактивные эффекты (наблюдатели и вычисляемые значения), созданные во время её работы. Позже Вы останавливаете область действия и удаляете их все одновременно.

import { effectScope } from "vue"

const scope = effectScope()

Сбор эффектов с помощью run

Вызовите scope.run(fn) и создайте наблюдатели и вычисляемые значения внутри fn. Каждый эффект, созданный во время этого вызова, регистрируется в области действия.

import { effectScope, ref, watch, computed } from "vue"

const scope = effectScope()
scope.run(() => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)
  watch(count, (v) => console.log(v))
})

Остановка области действия

scope.stop() останавливает все наблюдатели и вычисляемые значения, созданные внутри области действия, одним вызовом — нет необходимости отдельно отслеживать каждый дескриптор stop.

scope.stop() // disposes all watchers and computed at once

Почему это важно

Без области действия Вам пришлось бы сохранить дескриптор остановки каждого наблюдателя и вызывать их по одному. При большом количестве эффектов это чревато ошибками. Область действия превращает N операций очистки в одну.

// without scope: must track each
const stop1 = watch(a, fn)
const stop2 = watch(b, fn)
// stop1(); stop2(); ... easy to forget one

Вложенные области действия

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

const parent = effectScope()
parent.run(() => {
  const child = effectScope() // stopped when parent stops
  child.run(() => watch(/* ... */))
})
parent.stop() // stops child too

Отсоединённые области действия

Передайте true, чтобы создать отсоединённую область действия, которая НЕ собирается окружающей родительской областью действия. Используйте её, когда хотите независимо управлять временем существования.

const scope = effectScope(true) // detached
// must be stopped manually; parent stop will not reach it

Пример: подписки на уровне плагина

Распространённый вариант использования — реактивные подписки на уровне плагина или приложения, существующие вне отдельного компонента, например синхронизация хранилища с localStorage. Объедините их в области действия, которую остановите при завершении работы приложения.

const appScope = effectScope()
appScope.run(() => {
  watch(store.state, persistToLocalStorage, { deep: true })
})
// on app shutdown: appScope.stop()

Создание повторно используемого объекта с очисткой

Композабл может создать собственную область действия, объединить в ней внутренние эффекты и предоставить единый метод dispose. Вызывающий код сможет очистить всё одним вызовом.

export function useTracker() {
  const scope = effectScope()
  scope.run(() => {
    watch(/* ... */)
  })
  return { dispose: () => scope.stop() }
}

Области действия и компоненты

Внутри setup компонента Vue уже запускает неявную область действия, связанную с жизненным циклом компонента, — поэтому наблюдатели компонента автоматически очищаются при размонтировании. effectScope даёт такую же возможность за пределами компонентов.

getCurrentScope и onScopeDispose

Внутри области действия можно зарегистрировать очистку с помощью onScopeDispose(fn). Она выполняется при остановке области действия — это аналог onUnmounted, но для любой области действия.

import { onScopeDispose } from "vue"

scope.run(() => {
  const id = setInterval(tick, 1000)
  onScopeDispose(() => clearInterval(id))
})

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

Проверьте, насколько хорошо Вы понимаете effectScope.

Повторение

Вы изучили effectScope для объединения эффектов:

  • effectScope() создаёт область действия, которая захватывает созданные внутри неё эффекты.
  • scope.run(fn) собирает наблюдатели и вычисляемые значения, созданные в fn.
  • scope.stop() удаляет их все одновременно; вложенные области действия останавливаются вместе с родительскими (для отсоединения используйте true).
  • onScopeDispose(fn) регистрирует очистку, выполняемую при остановке.
  • Это идеально подходит для компосаблов и реактивных подписок на уровне плагина, существующих за пределами компонентов.

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

Урок «effectScope для группировки эффектов» бесплатный?

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

Чему я научусь в уроке «effectScope для группировки эффектов»?

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

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

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

Сколько времени занимает урок «effectScope для группировки эффектов»?

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

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

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

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

  1. Продвинутая реактивность: shallowRef и triggerRef
  2. Фабрики композируемых модулей и параметризованные композируемые модули
  3. Конечные автоматы с XState во Vue
  4. effectScope для группировки эффектов
← Назад к Vue Academy