effectScope para efeitos agrupados
effectScope(), execução de observadores e computados em um escopo e scope.stop() para limpeza.
effectScope para efeitos agrupados é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
O problema da limpeza
Observadores e valores computados criados fora da configuração de um componente não são descartados automaticamente. Em componíveis usados de forma independente ou em código no nível de um plug-in, é possível deixar efeitos vazando. effectScope resolve isso agrupando efeitos para uma limpeza coletiva.
O que effectScope faz
effectScope() cria um scope que captura quaisquer efeitos reativos (observadores, valores computados) criados enquanto ele é executado. Depois, você interrompe o scope para descartá-los todos de uma vez.
import { effectScope } from "vue"
const scope = effectScope()Coletando efeitos com run
Chame scope.run(fn) e crie seus observadores e valores computados dentro de fn. Todo efeito criado durante essa chamada é registrado no 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))
})Interrompendo o scope
scope.stop() interrompe, em uma única chamada, todos os observadores e valores computados criados dentro do scope — não é necessário acompanhar individualmente cada identificador de stop.
scope.stop() // disposes all watchers and computed at oncePor que isso é importante
Sem um scope, você precisa guardar o identificador de interrupção de cada observador e chamar todos um por um. Com muitos efeitos, isso propicia erros. Um scope transforma N limpezas em uma só.
// without scope: must track each
const stop1 = watch(a, fn)
const stop2 = watch(b, fn)
// stop1(); stop2(); ... easy to forget oneScopes aninhados
Scopes podem ser aninhados. Um scope child criado dentro de um scope parent é interrompido automaticamente quando o parent para, oferecendo uma limpeza hierárquica sem esforço.
const parent = effectScope()
parent.run(() => {
const child = effectScope() // stopped when parent stops
child.run(() => watch(/* ... */))
})
parent.stop() // stops child tooScopes independentes
Passe true para criar um scope independente que NÃO é coletado por um scope parent ao redor. Utilize-o quando quiser controle independente sobre o tempo de vida.
const scope = effectScope(true) // detached
// must be stopped manually; parent stop will not reach itCaso de uso: assinaturas no nível do plug-in
Um uso comum são assinaturas reativas no nível do plug-in ou da aplicação, que ficam fora de qualquer componente específico — por exemplo, sincronizar um armazenamento com o localStorage. Agrupe-as em um scope que você interromperá quando a aplicação for encerrada.
const appScope = effectScope()
appScope.run(() => {
watch(store.state, persistToLocalStorage, { deep: true })
})
// on app shutdown: appScope.stop()Construindo um recurso reutilizável e descartável
Um componível pode criar seu próprio scope para agrupar efeitos internos e expor um único dispose. Quem o chama limpa tudo com uma única chamada.
export function useTracker() {
const scope = effectScope()
scope.run(() => {
watch(/* ... */)
})
return { dispose: () => scope.stop() }
}Scopes e componentes
Dentro do setup de um componente, o Vue já executa um scope implícito vinculado ao ciclo de vida do componente — é por isso que os observadores do componente são limpos automaticamente quando ele é desmontado. effectScope oferece esse mesmo recurso fora dos componentes.
getCurrentScope e onScopeDispose
Dentro de um scope, você pode registrar uma limpeza com onScopeDispose(fn), que é executada quando o scope é interrompido — de forma análoga a onUnmounted, mas para qualquer scope.
import { onScopeDispose } from "vue"
scope.run(() => {
const id = setInterval(tick, 1000)
onScopeDispose(() => clearInterval(id))
})Verificação rápida
Verifique sua compreensão sobre effectScope.
Recapitulação
Você aprendeu sobre effectScope para agrupar efeitos:
effectScope()cria um scope que captura os efeitos criados dentro dele.scope.run(fn)coleta os observadores e valores computados criados emfn.scope.stop()descarta todos de uma vez; scopes aninhados são interrompidos com o parent (utilizetruepara um scope independente).onScopeDispose(fn)registra uma limpeza que é executada ao interromper o scope.- É ideal para componíveis e assinaturas reativas no nível de plug-ins fora dos componentes.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “effectScope para efeitos agrupados” é grátis?
Sim — o texto completo de “effectScope para efeitos agrupados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “effectScope para efeitos agrupados”?
effectScope(), execução de observadores e computados em um escopo e scope.stop() para limpeza. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “effectScope para efeitos agrupados”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Reatividade avançada: shallowRef e triggerRef
- Fábricas de composables e composables parametrizados
- Máquinas de estado com XState no Vue
- effectScope para efeitos agrupados