watchPostEffect() Efeito colateral executado após a atualização do componente
Última atualização: 2026-10-22
watchPostEffect() Efeito colateral executado após a atualização do componente
watchPostEffect() equivale a watchEffect com flush: 'post': executa depois que o DOM do componente é atualizado, ideal para ler dimensões do DOM recém-atualizado.
| Grupo | Reatividade: Essencial |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
watchPostEffect(() => {
console.log(el.value.offsetHeight) // o DOM já foi atualizado
})⚙️ Argumentos
| effect | Função de efeito colateral; as opções são as mesmas do watchEffect (sem flush) |
|---|
Retorno：Uma função stop para interromper a observação
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows the paragraph height; it follows font-size changes.💡 Pontos-chave
💡 Dica O watchEffect padrão executa antes da atualização do DOM, então ler offsetHeight e outras informações de layout devolve valores antigos — é exatamente isso que este API resolve.
ℹ️ Nota watchEffect com { flush: 'post' } é totalmente equivalente a esta função.
⚠️ Aviso Ao depender de referências de DOM, garanta que o ref já foi montado (pode ser null na primeira vez) e faça a verificação de nulo no código.
🏷️ Essencial relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença para o watchEffect, em uma frase?
R Momento de execução: o watchEffect roda antes da atualização do DOM; o watchPostEffect, depois.
P Quando é obrigatório usá-lo?
R Operações que dependem do DOM mais recente, como ler tamanho do elemento, posição de rolagem ou foco.
P Dá para usar nextTick no lugar?
R Para uma leitura pontual, await nextTick() resolve; para acompanhar as mudanças continuamente, use watchPostEffect.
