watch Watchers (estilo options)
Última atualização: 2026-10-22
watch Watchers (estilo options)
A opção watch organiza callbacks pelo nome da propriedade observada, suportando handler, deep, immediate e a forma abreviada com nome de método em string.
| Grupo | Opções: Estado |
|---|---|
| Tipo | Opção |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
export default {
data() { return { keyword: "" } },
watch: {
keyword(newVal, oldVal) { /* ... */ },
"user.name"(v) { /* quote nested paths */ }
}
}⚙️ Argumentos
| value | Um objeto cujas chaves são caminhos de dados (caminhos com pontos entre aspas) e os valores são funções ou { handler, deep, immediate } |
|---|
Retorno：Sem retorno; os callbacks recebem (newValue, oldValue)
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Typing logs 'old → new', for example 'a → ab'.💡 Pontos-chave
💡 Dica Preguiçoso por padrão — adicione immediate: true para executar já no setup.
⚠️ Aviso Coloque caminhos aninhados entre aspas ou use deep: true, atento ao custo.
ℹ️ Nota Um valor em string reutiliza um método como handler.
🏷️ Estado relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Relação com o watch da Composition API?
R Duas grafias de um mesmo mecanismo: chaveado por nome versus fonte explícita.
P Como observar um array?
R Substituição dispara; push no lugar precisa de deep: true ou de observar length.
P Observar vários de uma vez?
R Use várias chaves, ou watch([a, b]) na Composition API.
