Vue com composition API - Computed e Watch

🎯 Por que usar computed()?

O computed() serve para criar valores derivados com base em dados reativos. Ele é recalculado automaticamente sempre que os dados que ele depende mudam.

💡 Exemplo com computed()

import { ref, computed } from 'vue' export default { setup() { const nome = ref('Maria') const saudacao = computed(() => { return `Olá, ${nome.value}!` }) return { nome, saudacao } } } 

O que está acontecendo aqui?

• nome é um valor reativo.
• saudacao é um valor computado que depende de nome.
• Quando nome.value muda, saudacao é atualizado automaticamente.

🔍 Computed vs Função

Por que não usar uma função comum?

function saudacao() { return `Olá, ${nome.value}` } 

Essa função também funciona, mas ela será executada toda vez que o componente for renderizado, enquanto computed() guarda em cache o valor até que as dependências mudem.

🕵️‍♂️ Observando mudanças com watch()

O watch() permite reagir a mudanças em valores reativos, executando um código sempre que uma mudança ocorrer.

💡 Exemplo com watch()

import { ref, watch } from 'vue' export default { setup() { const contador = ref(0) watch(contador, (novoValor, valorAntigo) => { console.log(`Contador mudou de ${valorAntigo} para ${novoValor}`) }) const incrementar = () => contador.value++ return { contador, incrementar } } } 

O que está acontecendo aqui?

• watch() observa o valor de contador.
• Quando contador.value muda, ele executa a função fornecida.
• Essa função recebe dois parâmetros:
  • novoValor: o novo valor da variável reativa.
  • valorAntigo: o valor anterior antes da mudança.

🔁 Observando objetos reativos com watch

Quando você usa reactive(), é necessário usar { deep: true } para observar mudanças internas no objeto.

import { reactive, watch } from 'vue' export default { setup() { const usuario = reactive({ nome: 'João', idade: 30 }) watch( () => usuario, (novo, antigo) => { console.log('Usuário mudou!', novo) }, { deep: true } ) return { usuario } } } 

✅ Conclusão do Capítulo 3

📌 Adicional: Diferença entre computed() e watch()

🎯 Por que no computed() você coloca dentro de uma const e no watch() não precisa?

1. computed()

O computed() é um valor derivado que depende de outros dados reativos. Ele não é uma função comum, mas sim um objeto reativo que automaticamente calcula e atualiza seu valor conforme as dependências mudam.

• computed() retorna um objeto reativo, que precisa ser armazenado em uma variável (por isso, usamos const).
• O valor resultante de computed() é acessado com .value se for uma referência reativa, mas, internamente, o Vue trata isso como uma forma otimizada de recalcular o valor quando necessário.

Ou seja, ao usar const com computed(), você está criando um "valor reativo" que será atualizado conforme o estado que ele depende.

const saudacao = computed(() => { return `Olá, ${nome.value}!` }) 

Aqui, saudacao é um valor computado e reagirá automaticamente a qualquer mudança em nome (ou outras variáveis reativas que você use dentro de computed()).

2. watch()

O watch() não é um valor, mas sim um observador — ele não precisa ser armazenado em uma constante porque o seu objetivo é apenas "observar mudanças" e executar algum código quando essas mudanças ocorrem.

• O watch é executado automaticamente quando a variável observada muda.
• Ele não retorna um valor, apenas executa a função de callback que você forneceu.

Por isso, não é necessário armazenar o resultado de watch() em uma constante, já que você está mais interessado na execução de uma ação do que no valor em si.

watch(contador, (novoValor, valorAntigo) => { console.log(`Contador mudou de ${valorAntigo} para ${novoValor}`) }) 

Aqui, watch apenas observará contador e executará a função de callback sempre que o valor de contador mudar. Não há necessidade de armazenar esse observador.

Resumo

• computed(): cria um valor reativo derivado e precisa ser armazenado em uma variável (const).
• watch(): é um observador de mudanças, que não retorna um valor, por isso, não precisa ser armazenado.