effectScope para agrupar efectos
effectScope(), ejecución de watchers y computed en un ámbito y scope.stop() para la limpieza
effectScope para agrupar efectos es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
El problema de la limpieza
Los watchers y valores computed creados fuera de setup de un componente no se eliminan automáticamente. En composables utilizados de forma independiente o en código a nivel de plugin, se pueden producir fugas de efectos. effectScope resuelve este problema agrupando los efectos para limpiarlos conjuntamente.
Qué hace effectScope
effectScope() crea un scope que captura cualquier efecto reactivo (watchers, computed) creado mientras se ejecuta. Después, puede detener el scope para eliminarlos todos a la vez.
import { effectScope } from "vue"
const scope = effectScope()Recopilar efectos con run
Llame a scope.run(fn) y cree sus watchers y computed dentro de fn. Cada efecto creado durante esa llamada se registra en el scope.
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))
})Detener el scope
scope.stop() detiene todos los watchers y computed creados dentro del scope mediante una sola llamada; no es necesario realizar un seguimiento individual de cada control de stop.
scope.stop() // disposes all watchers and computed at oncePor qué es importante
Sin un scope, debe guardar el control de detención de cada watcher y llamarlos uno por uno. Con muchos efectos, esto puede provocar errores. Un scope convierte N limpiezas en una sola.
// without scope: must track each
const stop1 = watch(a, fn)
const stop2 = watch(b, fn)
// stop1(); stop2(); ... easy to forget oneScopes anidados
Los scopes se pueden anidar. Un scope hijo creado dentro de un padre se detiene automáticamente cuando se detiene el padre, lo que proporciona una limpieza jerárquica sin esfuerzo adicional.
const parent = effectScope()
parent.run(() => {
const child = effectScope() // stopped when parent stops
child.run(() => watch(/* ... */))
})
parent.stop() // stops child tooScopes independientes
Pase true para crear un scope independiente que NO sea recopilado por un scope padre que lo envuelva. Úselo cuando quiera controlar su ciclo de vida de forma independiente.
const scope = effectScope(true) // detached
// must be stopped manually; parent stop will not reach itCaso de uso: suscripciones a nivel de plugin
Un uso habitual son las suscripciones reactivas a nivel de plugin o de aplicación que viven fuera de un único componente; por ejemplo, sincronizar un store con localStorage. Agrúpelas en un scope que detenga al cerrar la aplicación.
const appScope = effectScope()
appScope.run(() => {
watch(store.state, persistToLocalStorage, { deep: true })
})
// on app shutdown: appScope.stop()Crear un desechable reutilizable
Un composable puede crear su propio scope para agrupar los efectos internos y exponer un único dispose. Quienes lo llamen podrán limpiarlo todo con una sola llamada.
export function useTracker() {
const scope = effectScope()
scope.run(() => {
watch(/* ... */)
})
return { dispose: () => scope.stop() }
}Scopes y componentes
Dentro de setup de un componente, Vue ya ejecuta un scope implícito vinculado al ciclo de vida del componente; por eso los watchers del componente se limpian automáticamente al desmontarlo. effectScope le proporciona ese mismo control fuera de los componentes.
getCurrentScope y onScopeDispose
Dentro de un scope puede registrar la limpieza con onScopeDispose(fn), que se ejecuta cuando el scope se detiene; es análogo a onUnmounted, pero para cualquier scope.
import { onScopeDispose } from "vue"
scope.run(() => {
const id = setInterval(tick, 1000)
onScopeDispose(() => clearInterval(id))
})Comprobación rápida
Compruebe su comprensión de effectScope.
Resumen
Ha aprendido a usar effectScope para agrupar efectos:
effectScope()crea un scope que captura los efectos creados dentro de él.scope.run(fn)recopila los watchers y computed creados enfn.scope.stop()los elimina todos a la vez; los scopes anidados se detienen con su padre (usetruepara crear uno independiente).onScopeDispose(fn)registra una limpieza que se ejecuta al detenerse el scope.- Es ideal para composables y suscripciones reactivas a nivel de plugin fuera de los componentes.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «effectScope para agrupar efectos» es gratis?
Sí — el texto completo de «effectScope para agrupar efectos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «effectScope para agrupar efectos»?
effectScope(), ejecución de watchers y computed en un ámbito y scope.stop() para la limpieza Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «effectScope para agrupar efectos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Reactividad avanzada: shallowRef y triggerRef
- Factorías de composables y composables parametrizados
- Máquinas de estados con XState en Vue
- effectScope para agrupar efectos