Reatividade e Data Binding ⚛️

Aula 03 - O Coração do Vue.js

🧠 O Problema da Manipulação Manual

• JavaScript Puro (Vanilla):

  document.getElementById('total').innerText = valor
  

• Difícil de manter em apps grandes
• Fácil de esquecer de atualizar algum ponto

⚛️ A Solução: Reatividade

• Você muda o dado -> O Vue muda o DOM
• Sistema de Observadores automático
• Foco na Lógica, não na manipulação de tags

📦 Sistema de Referências: ref()

• Usado para valores primitivos (String, Number, Boolean)
• Cria um objeto "wrapper" reativo

  import { ref } from 'vue'
  const contador = ref(0)
  

🔍 Acessando valores com .value

• No <script>: contador.value++
• No <template>: {{ contador }} (desembrulhado automático)

🧱 Objetos Reativos: reactive()

• Ideal para objetos complexos
• Não precisa de .value no script

  const usuario = reactive({ nome: 'Ana', idade: 25 })
  usuario.nome = 'Maria'
  

⚖️ ref vs reactive

🔗 One-Way Data Binding

• Fluxo única direção: JavaScript -> HTML
• Sincroniza valores de variáveis com o conteúdo das tags
• Diretivas: {{ }} e v-bind

👨‍🏫 Interpolação (Mustache)

• Usa chaves duplas {{ }}
• Renderiza texto simples
• Aceita expressões JS simples: {{ preco * 2 }}

🏷️ v-bind (:)

• Sincroniza atributos HTML dinamicamente

  <img v-bind:src="urlFoto">
  <!-- Atalho -->
  <img :src="urlFoto">
  

• Usado em src, href, class, style, etc.

🔄 Two-Way Data Binding

• Fluxo bidirecional: JavaScript <-> HTML
• Comum em formulários (Inputs)
• O usuário digita -> A variável JS muda instantaneamente

🎹 v-model

• A "mágica" do sincronismo

  <input v-model="nomeUsuario">
  <p>Olá, {{ nomeUsuario }}!</p>
  

• Combina v-bind com escuta de eventos nativa

🛠️ Modificadores do v-model

• .trim: Remove espaços extras
• .number: Converte automaticamente para número
• .lazy: Atualiza apenas após o change (perda de foco)

📊 Fluxo de Dados Visual

graph TD
    Data[JavaScript State] -- 1-way: v-bind --> UI[Interface HTML]
    UI -- 2-way: v-model --> Data

⚠️ Cuidados com a Reatividade

• Não esqueça o .value no script (erro comum!)
• Evite substituir o objeto inteiro do reactive
• Use ref para arrays se precisar trocar a referência

🛠️ Computed Properties (intro)

• Dados reativos baseados em outros dados
• Otimizados e cacheados

  const total = computed(() => preco.value * qtd.value)
  

🏗️ Prática Sugerida

• Criar um contador de cliques
• Criar um input que muda o título da página
• Manipular atributos de estilo dinamicamente

🏁 Resumo da Aula

• Reatividade automatiza atualizações no DOM
• ref para simples, reactive para objetos
• v-bind leva o dado, v-model traz de volta

🏁 Dúvidas?

Obrigado pela atenção! Próxima aula: Diretivas e Renderização.