Otimização de Performance

Otimizar aplicações Vue.js pode melhorar significativamente a experiência do usuário.

v-show vs v-if

<!-- v-show: Melhor para toggle frequente -->
<div v-show="isVisible">Conteúdo</div>

<!-- v-if: Melhor para condição rara -->
<div v-if="shouldRender">Conteúdo</div>

Lazy Loading de Componentes

// Carregar apenas quando necessário
const HeavyComponent = defineAsyncComponent(() =>
    import('./HeavyComponent.vue')
);

Memoização com computed

<script setup>
import { computed } from 'vue';

// ✅ Computed é cached automaticamente
const expensiveValue = computed(() => {
    return heavyCalculation(props.data);
});

// ❌ Evite recálculos desnecessários em métodos
function getExpensiveValue() {
    return heavyCalculation(props.data); // Executa toda vez!
}
</script>