🧩 Exercícios Práticos: Propriedades Computadas e Observadores

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

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 04.1 — Propriedade Computada com computed() e Cache Automático

Contexto: Propriedade Computada com computed() e Cache Automático no contexto de Propriedades Computadas e Observadores.

Requisitos de Execução:

  1. Criar computed(() => preco * (1 - desconto)) que recalcule apenas quando as dependências mudarem.

Resultado Esperado

Preço final com desconto calculado e cacheado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_04_1_SeuNome
  2. Envie na tarefa: Atividade Cap 04 - Propriedades Computadas e Observadores
🔑 Gabarito de Código & Solução Comentada 
<!-- PrecoCalculado.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';

const preco = ref<number>(1000);
const desconto = ref<number>(0.1); // 10%

const precoFinal = computed(() => {
  return preco.value * (1 - desconto.value);
});
</script>

<template>
  <div>Preço com Desconto: R$ {{ precoFinal.toFixed(2) }}</div>
</template>

🔍 Nível 2: Prática

Problema 04.2 — Computed com Getter e Setter Customizados

Contexto: Computed com Getter e Setter Customizados no contexto de Propriedades Computadas e Observadores.

Requisitos de Execução:

  1. Implementar computed nomeCompleto com get() retornando nome formatado e set(novo) separando primeiro e último nome.

Resultado Esperado

Setter de computed atualizando as refs de primeiroNome e sobrenome.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_04_2_SeuNome
  2. Envie na tarefa: Atividade Cap 04 - Propriedades Computadas e Observadores
🔑 Gabarito de Código & Solução Comentada 
<!-- NomeCompleto.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';

const primeiroNome = ref('Carlos');
const sobrenome = ref('Silva');

const nomeCompleto = computed({
  get: () => `${primeiroNome.value} ${sobrenome.value}`,
  set: (valor: string) => {
    const partes = valor.split(' ');
    primeiroNome.value = partes[0] || '';
    sobrenome.value = partes[1] || '';
  }
});
</script>

⚡ Nível 3: Integração

Problema 04.3 — Observador com watch() e Opções { deep: true, immediate: true }

Contexto: Observador com watch() e Opções { deep: true, immediate: true } no contexto de Propriedades Computadas e Observadores.

Requisitos de Execução:

  1. Observar alterações em objeto complexo de filtros de busca e disparar requisição à API com debounce.

Resultado Esperado

Watcher disparado na inicialização e em mutações profundas.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_04_3_SeuNome
  2. Envie na tarefa: Atividade Cap 04 - Propriedades Computadas e Observadores
🔑 Gabarito de Código & Solução Comentada 
<!-- FiltroWatcher.vue -->
<script setup lang="ts">
import { reactive, watch } from 'vue';

const filtros = reactive({ busca: '', categoriaId: 1 });

watch(filtros, (novosFiltros) => {
  console.log('Filtros alterados! Buscando API:', novosFiltros);
}, { deep: true, immediate: true });
</script>

🏆 Nível 4: Desafio Corporativo

Problema 04.4 — Rastreamento Automático de Dependências com watchEffect() e Cleanup

Contexto: Rastreamento Automático de Dependências com watchEffect() e Cleanup no contexto de Propriedades Computadas e Observadores.

Requisitos de Execução:

  1. Utilizar watchEffect((onCleanup) => ...) cancelando timeouts anteriores ao digitar rapidamente.

Resultado Esperado

Efeito colateral limpo no cleanup do watchEffect prevenindo race conditions.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_04_4_SeuNome
  2. Envie na tarefa: Atividade Cap 04 - Propriedades Computadas e Observadores
🔑 Gabarito de Código & Solução Comentada 
<!-- WatchEffectCleanup.vue -->
<script setup lang="ts">
import { ref, watchEffect } from 'vue';

const query = ref('');

watchEffect((onCleanup) => {
  const timer = setTimeout(() => {
    console.log('Buscando:', query.value);
  }, 300);

  onCleanup(() => clearTimeout(timer));
});
</script>
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos