Observadores e reatividade profunda
Reaja a alterações nos dados com observadores e observação profunda.
Observadores e reatividade profunda é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 3. 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 3 aulas no total.
O que é um observador?
Um observador executa uma função em resposta a uma alteração nos dados.
- Ao contrário de uma propriedade computada, ele serve para efeitos colaterais
- Buscar dados, registrar eventos e salvar no armazenamento
- Reagir quando algo específico é alterado
A função de observação
A função de observação recebe uma fonte para observar e uma função de retorno que recebe os valores novo e antigo.
import { ref, watch } from "vue"
const query = ref("")
watch(query, (newVal, oldVal) => {
console.log("changed from", oldVal, "to", newVal)
})Um exemplo prático
Observar um campo de pesquisa para disparar uma chamada à API quando ele for alterado.
const search = ref("")
watch(search, async (newQuery) => {
const results = await fetchResults(newQuery)
items.value = results
})A opção imediata
Por padrão, um observador é executado apenas quando há alterações. A opção imediata também o executa uma vez logo no início.
watch(userId, (id) => {
loadUser(id)
}, { immediate: true })
// Runs immediately with the current value,
// then again on every changeA opção profunda
Por padrão, observar um objeto só detecta alterações na referência. A opção profunda também observa as propriedades aninhadas.
const profile = reactive({ name: "Ada", address: { city: "London" } })
watch(profile, (val) => {
console.log("profile changed")
}, { deep: true })
// Fires even when profile.address.city changesObservando objetos aninhados
Sem a opção profunda, alterar uma propriedade aninhada de um objeto reativo observado pode não disparar a função de retorno como esperado. A observação profunda garante que isso aconteça, ao custo de mais processamento.
- Use a observação profunda somente quando realmente precisar acompanhar propriedades aninhadas
- Observar profundamente objetos grandes pode ser dispendioso
Observando um valor obtido
Para observar um valor aninhado específico, passe uma função de obtenção como fonte.
watch(
() => profile.address.city,
(newCity) => {
console.log("city is now", newCity)
}
)Observando várias fontes
Passe uma matriz de fontes para observar vários valores de uma só vez.
watch([width, height], ([newW, newH], [oldW, oldH]) => {
console.log("size:", newW, "x", newH)
})watchEffect
watchEffect é executado imediatamente e volta a ser executado sempre que qualquer valor reativo que ele lê é alterado. Não é necessário fornecer uma lista explícita de fontes.
import { watchEffect } from "vue"
watchEffect(() => {
console.log("count is", count.value)
})
// Runs now, and again whenever count changesObservação versus watchEffect
Como escolher entre eles:
- Observação: fonte explícita, fornece os valores antigo e novo e é adiada por padrão
- watchEffect: acompanha as dependências automaticamente, é executado imediatamente e não fornece o valor antigo
Use a observação quando precisar do valor anterior ou de um controle preciso; use watchEffect por praticidade.
Observadores na API de Opções
A API de Opções declara observadores em um bloco de observação identificado pelo nome dos dados.
export default {
data() {
return { question: "" }
},
watch: {
question(newVal, oldVal) {
this.getAnswer(newVal)
}
}
}Verificação rápida
Teste sua compreensão sobre observadores.
Recapitulação: observadores e reatividade profunda
Você aprendeu a reagir a alterações com efeitos colaterais:
- Observação acompanha uma fonte e fornece os valores novo e antigo
- Imediata executa a observação uma vez no início
- Profunda acompanha alterações em objetos aninhados
- watchEffect acompanha as dependências automaticamente e é executado imediatamente
- Observe várias fontes usando uma matriz
A seguir: roteamento com o Vue Router.
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 “Observadores e reatividade profunda” é grátis?
Sim — o texto completo de “Observadores e reatividade profunda” é 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 3 aulas no total.
O que vou aprender em “Observadores e reatividade profunda”?
Reaja a alterações nos dados com observadores e observação profunda. 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 3 de 3.
Quanto tempo leva a aula “Observadores e reatividade profunda”?
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
- Fundamentos da reatividade
- Propriedades computadas
- Observadores e reatividade profunda