devterview_$ iniciar simulação

`computed` x `watch`

MédioPlenoReatividade

Pergunta

Quando você usa `computed` e quando `watch` no Vue? Dê um exemplo de uso errado de cada.

Resposta esperada

`computed` é pra derivar um valor de outros valores reativos, de forma pura e com cache — recalcula só quando uma dependência muda, e você usa o resultado no template ou em outra lógica (ex: `nomeCompleto` a partir de `nome` e `sobrenome`; lista filtrada). `watch` é pra reagir a uma mudança executando um efeito colateral — chamar uma API quando o id da rota muda, salvar no localStorage, disparar uma animação. Uso errado de `computed`: colocar efeito colateral (fazer fetch dentro do getter) — quebra o cache e a previsibilidade. Uso errado de `watch`: observar A pra setar B que é pura função de A — isso é um `computed`, e o `watch` fica mais verboso, sem cache e propenso a laço.

Por que perguntam isso

Pergunta pleno. O antipadrão a ouvir reconhecer: usar `watch` pra manter um valor derivado que deveria ser `computed`.

#computed#watch#reatividade
publicidade

Relacionadas