effectScope() Gerenciar em lote escopos de efeitos colaterais
Última atualização: 2026-10-22
effectScope() Gerenciar em lote escopos de efeitos colaterais
effectScope() cria um escopo que reúne vários observadores/propriedades computadas para iniciar e parar em conjunto, evitando gerenciar funções stop uma a uma.
| Grupo | Reatividade: Avançado |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
const scope = effectScope()
scope.run(() => {
watch(a, fn)
watchEffect(fn2)
})
scope.stop() // para todos os efeitos do escopo de uma vez⚙️ Argumentos
| detached | true se desconecta do escopo pai (padrão false, para junto com o pai) |
|---|
Retorno：Objeto de escopo: run(cb) / stop() / on() / off() / pause() / resume()
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Both logs follow changes until stopAll() is clicked, then neither updates.💡 Pontos-chave
💡 Dica Use-o ao escrever composables: quem chama recebe apenas um handle stop/escopo para destruir tudo de uma vez.
ℹ️ Nota Dentro de componentes, o padrão é pendurar no escopo do componente; detached: true permite sobreviver de forma independente aos componentes.
⚠️ Aviso O computed/watch dentro do escopo só é incorporado se criado enquanto o scope está em execução.
🏷️ Avançado relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Sem ele não dá?
R Para um único observador, o stop retornado basta; ao gerenciar muitos efeitos colaterais em grupo, ele reduz significativamente o código repetitivo.
P Onde usar detached?
R Gestão de estado que precisa atravessar o ciclo de vida dos componentes (como o interno do Pinia) usa esse recurso.
P Dá para pausar?
R 3.4+ oferece pause()/resume(), que suspendem temporariamente todos os efeitos colaterais do escopo.
