0Pricing
Frontend Academy · Aula

computed() e watch()

Derive valores de forma preguiçosa com computed(), reaja a alterações de estado com watch() e watchEffect() e controle o momento de atualização.

computed() e watch() é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

computed() na API de composição

computed(fn) cria uma ref reativa somente leitura que deriva seu valor de outras fontes reativas. Ela fica armazenada em cache — o getter só é executado quando as dependências mudam.

<script setup>
import { ref, computed } from 'vue';

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);

const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>

computed() gravável

Passe um objeto com get e set para criar uma propriedade computed gravável. O setter trata das atualizações, normalmente refletindo a alteração de volta na ref de origem.

const firstName = ref('Alice');
const lastName  = ref('Smith');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val: string) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

fullName.value = 'Bob Jones'; // sets both refs

Fundamentos de watch()

watch(source, callback) executa a função de retorno quando a origem muda. Essa função 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}'`);
  searchAPI(newVal);
});

Observando uma ref versus reactive

Observe uma ref diretamente. Para observar uma propriedade reativa, utilize uma função getter () => state.prop.

const count = ref(0);
watch(count, val => console.log('count:', val));

const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));

Observação profunda

Passe { deep: true } para observar alterações aninhadas em uma ref de objeto.

const user = ref({ name: 'Alice', address: { city: 'NY' } });

watch(user, (newUser) => {
  console.log('user changed:', newUser);
}, { deep: true });

Observação imediata

Passe { immediate: true } para executar a função de retorno imediatamente na configuração inicial, antes de qualquer alteração. Isso é útil quando você quer executar um efeito colateral com o valor inicial.

watch(userId, async (id) => {
  user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on change

watchEffect()

watchEffect(fn) executa a função de retorno imediatamente e a executa novamente sempre que qualquer dependência reativa utilizada nela mudar. Não é necessário especificar as origens explicitamente.

import { watchEffect } from 'vue';

watchEffect(() => {
  // runs immediately and whenever query or page changes:
  fetchResults(query.value, page.value);
});

watchEffect versus watch

watchEffect: imediato, acompanha dependências automaticamente e não permite acessar o valor antigo. watch: origens explícitas, preguiçoso por padrão e permite acessar os valores antigo e novo. Utilize watchEffect para efeitos colaterais declarativos; utilize watch quando precisar controlar quando e com que frequência ele será executado.

Interrompendo observadores

Tanto watch quanto watchEffect retornam uma função stop. Chame-a para interromper a observação. Em