🧩 Exercícios: Reatividade Básica: ref(), reactive() e toRefs()

🧩 Exercícios Práticos: Reatividade Básica: ref(), reactive() e toRefs()

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

---

🧭 Navegação Pedagógica

• 📖 Teoria do Capítulo

  💻 Exemplos

  📊 Slides

  🧠 Quiz

---

🎯 Nível 1: Fundamentos

Problema 02.1 — Diferenças Práticas entre ref() e reactive()

Contexto: Diferenças Práticas entre ref() e reactive() no contexto de Reatividade Básica: ref(), reactive() e toRefs().

Requisitos de Execução:

1. Declarar valor primitivo com ref<number>(0) e objeto complexo com reactive({ nome: '', email: '' }).

Resultado Esperado

Valores reativos mutados e refletidos no DOM automaticamente.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_02_1_SeuNome
2. Envie na tarefa: Atividade Cap 02 - Reatividade Básica: ref(), reactive() e toRefs()

🔑 Gabarito de Código & Solução Comentada

<!-- ReatividadeDemo.vue -->
<script setup lang="ts">
import { ref, reactive } from 'vue';

const total = ref<number>(100);
const usuario = reactive({ nome: 'Alice', ativo: true });

const toggleStatus = () => {
  usuario.ativo = !usuario.ativo;
  total.value += 10;
};
</script>

<template>
  <div>
    <h3>{{ usuario.nome }} - {{ usuario.ativo ? 'ATIVO' : 'INATIVO' }}</h3>
    <button @click="toggleStatus">Atualizar</button>
  </div>
</template>

---

🔍 Nível 2: Prática

Problema 02.2 — Desestruturação Segura de Objetos com toRefs()

Contexto: Desestruturação Segura de Objetos com toRefs() no contexto de Reatividade Básica: ref(), reactive() e toRefs().

Requisitos de Execução:

1. Desestruturar objeto reativo usando const { nome, idade } = toRefs(estado) mantendo a reatividade intacta.

Resultado Esperado

Propriedades desestruturadas continuam reativas.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_02_2_SeuNome
2. Envie na tarefa: Atividade Cap 02 - Reatividade Básica: ref(), reactive() e toRefs()

🔑 Gabarito de Código & Solução Comentada

<!-- DestructuringSafe.vue -->
<script setup lang="ts">
import { reactive, toRefs } from 'vue';

const estado = reactive({ nome: 'Carlos', idade: 28 });
const { nome, idade } = toRefs(estado);

const fazerAniversario = () => { idade.value += 1; };
</script>

<template>
  <p>{{ nome }} tem {{ idade }} anos. <button @click="fazerAniversario">+1 Ano</button></p>
</template>

---

⚡ Nível 3: Integração

Problema 02.3 — Extração de Valores Únicos com toRef()

Contexto: Extração de Valores Únicos com toRef() no contexto de Reatividade Básica: ref(), reactive() e toRefs().

Requisitos de Execução:

1. Criar ref individual vinculado a propriedade de objeto com const preco = toRef(produto, 'preco').

Resultado Esperado

Ref pontual sincronizado bidirecionalmente com o objeto pai.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_02_3_SeuNome
2. Envie na tarefa: Atividade Cap 02 - Reatividade Básica: ref(), reactive() e toRefs()

🔑 Gabarito de Código & Solução Comentada

<!-- ToRefDemo.vue -->
<script setup lang="ts">
import { reactive, toRef } from 'vue';

const produto = reactive({ id: 1, preco: 150.0 });
const precoRef = toRef(produto, 'preco');
precoRef.value = 199.90; // Atualiza produto.preco
</script>

---

🏆 Nível 4: Desafio Corporativo

Problema 02.4 — Imutabilidade e Objetos Somente Leitura com readonly() e shallowRef()

Contexto: Imutabilidade e Objetos Somente Leitura com readonly() e shallowRef() no contexto de Reatividade Básica: ref(), reactive() e toRefs().

Requisitos de Execução:

1. Proteger estado global de mutações acidentais utilizando const safeState = readonly(state).

Resultado Esperado

Tentativa de alteração direta no objeto readonly bloqueada com aviso do Vue.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo como: Atividade_02_4_SeuNome
2. Envie na tarefa: Atividade Cap 02 - Reatividade Básica: ref(), reactive() e toRefs()

🔑 Gabarito de Código & Solução Comentada

<!-- ReadonlyGuard.vue -->
<script setup lang="ts">
import { reactive, readonly } from 'vue';

const original = reactive({ contador: 0 });
const somenteLeitura = readonly(original);
// somenteLeitura.contador++ // Erro capturado em runtime
</script>

---

⬅️ Voltar ao Índice de Exercícios

📚 Sumário de Tópicos