0Pricing
Vue Academy · Aula

Computed e Watch na Composition API

computed() para estado derivado e watch() e watchEffect() para efeitos colaterais.

Computed e Watch na Composition API é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. 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 4 aulas no total.

Derivando e reagindo ao estado

O estado reativo é apenas metade da história. Você também precisa derivar novos valores a partir dele e reagir às mudanças. A API de Composição oferece computed, watch e watchEffect para isso.

computed para valores derivados

computed() recebe uma função de obtenção e retorna um ref cujo valor é derivado de outro estado reativo. Acesse-o com .value em JS; no template, ele é desempacotado.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed é preguiçoso e armazenado em cache

Um computed só é recalculado quando uma de suas dependências reativas muda. Se você o ler dez vezes sem alterações, a função de obtenção será executada uma vez e o resultado armazenado em cache será reutilizado.

Isso torna computed ideal para derivações custosas.

computed é atualizado automaticamente

Altere uma dependência, e o computed será atualizado na próxima vez que for lido. Você nunca precisa chamá-lo manualmente.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

watch para efeitos colaterais

watch() observa uma fonte reativa e executa uma função quando ela muda. A função recebe o novo valor e o valor antigo.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch é preguiçoso por padrão

Ao contrário de um computed, watch não executa sua função imediatamente. Ele espera a primeira alteração. Use-o para efeitos colaterais: registrar informações, buscar dados e salvar no armazenamento.

Observando várias fontes

Passe uma matriz de fontes para observar vários valores ao mesmo tempo. A função recebe matrizes de valores novos e antigos.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

Observando uma função de obtenção

Para observar uma propriedade de um objeto reativo, passe uma função de obtenção. Observar o objeto diretamente só é acionado em alterações profundas, o que pode ser surpreendente.

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: imediato e com rastreamento automático

watchEffect() executa sua função imediatamente e a executa novamente sempre que qualquer valor reativo usado nela mudar. Você não lista as dependências — elas são rastreadas automaticamente.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch em comparação com watchEffect

  • watch: fonte explícita, execução preguiçosa, fornece os valores antigo e novo.
  • watchEffect: rastreia dependências automaticamente, é executado imediatamente e não dá acesso ao valor antigo.

Use watch quando precisar do valor anterior ou quiser um controle preciso. Use watchEffect para efeitos colaterais reativos rápidos.

computed versus watch

Use computed quando quiser um novo valor derivado. Use watch ou watchEffect quando quiser executar uma ação em resposta a uma alteração. Não use watch para recalcular um valor — essa é a finalidade de computed.

Verificação rápida

Escolha o auxiliar reativo correto.

Recapitulação

Agora você sabe como derivar valores e reagir a alterações:

  • computed cria valores derivados avaliados sob demanda e armazenados em cache.
  • watch reage a uma fonte específica e fornece os valores novo e antigo; sua execução é sob demanda.
  • watchEffect é executado imediatamente e rastreia as dependências automaticamente.
  • Use computed para valores e watch/watchEffect para efeitos colaterais.

Perguntas Frequentes

A aula “Computed e Watch na Composition API” é grátis?

Sim — o texto completo de “Computed e Watch na Composition API” é 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 4 aulas no total.

O que vou aprender em “Computed e Watch na Composition API”?

computed() para estado derivado e watch() e watchEffect() para efeitos colaterais. 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 4 de 4.

Quanto tempo leva a aula “Computed e Watch na Composition API”?

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

  1. Por que usar a Composition API?
  2. Função setup() e variáveis reativas
  3. ref versus reactive: quando usar cada um
  4. Computed e Watch na Composition API
← Voltar para Vue Academy