Vue - Usando watchEffect e reactive para maior controle

🎯 O que é o watchEffect()?

O watchEffect() é um hook poderoso da Composition API que executa reatividade de forma automática e pode ser usado quando você deseja observar efeitos colaterais (side effects) baseados em mudanças reativas.

• Diferente do watch(), que é usado para observar valores específicos, o watchEffect() observa todos os valores reativos usados dentro da sua função de forma automática.
• Ele executa sempre que qualquer uma das dependências internas mudar, o que o torna muito útil para acompanhar mudanças em valores dinâmicos sem a necessidade de especificar as dependências explicitamente.

Como funciona o watchEffect()?

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const contador = ref(0)
    const nome = ref('Vue')

    watchEffect(() => {
      console.log(`O contador é: ${contador.value}, o nome é: ${nome.value}`)
    })

    const incrementar = () => {
      contador.value++
    }

    return { contador, nome, incrementar }
  }
}

O que está acontecendo aqui?

• watchEffect() observa automaticamente todas as dependências reativas dentro da função de callback (no caso, contador e nome).
• Sempre que contador ou nome mudarem, o watchEffect executará a função de callback novamente, exibindo no console o valor atualizado de ambos.

📌 Diferença entre watch() e watchEffect()

• watch(): Reage a valores específicos (você escolhe o que quer observar).
• watchEffect(): Reage a todas as dependências reativas dentro da função (não é necessário especificar as dependências).

🧩 Utilizando reactive() com objetos complexos

O reactive() é útil para criar objetos reativos. Quando você usa o reactive(), o Vue automaticamente faz com que todas as propriedades do objeto sejam reativas.

Exemplo com reactive():

import { reactive } from 'vue'

export default {
  setup() {
    const pessoa = reactive({
      nome: 'Lucas',
      idade: 23
    })

    const mudarNome = () => {
      pessoa.nome = 'João'
    }

    return { pessoa, mudarNome }
  }
}

O que está acontecendo aqui?

• pessoa é um objeto reativo, e suas propriedades (nome e idade) serão automaticamente reativas.
• mudarNome() altera o nome de pessoa e, por ser reativo, a interface do usuário será atualizada automaticamente.

📌 Como funciona a reatividade com objetos no reactive()?

• Quando você usa reactive(), todas as propriedades do objeto se tornam reativas.
• O Vue não precisa de .value para acessar as propriedades de um objeto reativo — basta acessar diretamente a propriedade, como se fosse um objeto normal.

⚡ Exemplo prático: Contador com reactive() e watchEffect()

import { reactive, watchEffect } from 'vue'

export default {
  setup() {
    const estado = reactive({
      contador: 0,
      nome: 'Vue'
    })

    watchEffect(() => {
      console.log(`Contador: ${estado.contador}, Nome: ${estado.nome}`)
    })

    const incrementar = () => {
      estado.contador++
    }

    return { estado, incrementar }
  }
}

Aqui, o estado é reativo, e o watchEffect() monitora todas as mudanças feitas em estado e executa a função toda vez que qualquer propriedade muda.

✅ Conclusão

• O watchEffect() é útil quando você deseja reagir a todas as dependências reativas automaticamente dentro de uma função.
• O reactive() transforma objetos em reativos, o que significa que suas propriedades também são automaticamente observadas.
• Ambos são extremamente úteis para criar componentes e lógica de reatividade complexos de maneira simples e poderosa.

📌 Resumo rápido: watchEffect() e reactive()