Vue.js 3: Composition API e o Framework Progressivo no Desenvolvimento Web Moderno

O que é o Vue.js e Por Que Ele se Destaca?

O Vue.js é um framework progressivo para construção de interfaces de usuário. Criado por Evan You em 2014, ele se diferencia por sua curva de aprendizado suave e por ser adotável incrementalmente — você pode usá-lo em um simples widget em uma página existente ou construir uma SPA completa do zero. Essa flexibilidade fez do Vue uma escolha popular tanto em startups quanto em grandes empresas como GitLab, Nintendo e Alibaba.

Com o lançamento do Vue 3 em setembro de 2020, o framework passou por uma reescrita completa, trazendo melhorias drásticas de performance, um novo sistema de reatividade baseado em Proxy do JavaScript e, principalmente, a Composition API — uma nova forma de organizar a lógica dos componentes que resolve limitações importantes da Options API do Vue 2.

Instalação e Primeiro Projeto com Vite

Esqueça o vue-cli do passado. O ecossistema Vue hoje recomenda o Vite, um bundler ultrarrápido criado pelo próprio Evan You que usa ES modules nativos no desenvolvimento:

npm create vue@latest

O comando acima inicia um assistente interativo que configura um projeto Vue 3 com suporte a TypeScript, Vue Router, Pinia e outras ferramentas. Em segundos você tem um projeto pronto para rodar:

cd meu-projeto-vue
npm install
npm run dev

Pronto! Seu servidor de desenvolvimento estará rodando em http://localhost:5173 com Hot Module Replacement (HMR) instantâneo.

Composition API vs Options API

A maior novidade do Vue 3 é a Composition API. Enquanto a Options API (Vue 2) organizava o código por opções — data, methods, computed, watch — a Composition API permite agrupar a lógica por funcionalidade usando funções. Compare os dois estilos:

Options API (Vue 2 / Vue 3)

export default {
  data() {
    return {
      contador: 0,
      mensagem: ''
    }
  },
  methods: {
    incrementar() {
      this.contador++
    }
  },
  computed: {
    contadorDobrado() {
      return this.contador * 2
    }
  }
}

Composition API (Vue 3)

import { ref, computed } from 'vue'

export default {
  setup() {
    const contador = ref(0)
    const mensagem = ref('')
    
    function incrementar() {
      contador.value++
    }
    
    const contadorDobrado = computed(() => contador.value * 2)
    
    return { contador, mensagem, incrementar, contadorDobrado }
  }
}

Com a Composition API, você pode extrair lógica reutilizável em composables — funções que encapsulam estado e comportamento, promovendo reuso sem depender de Mixins (que eram problemáticos no Vue 2).

Reatividade com ref e reactive

O Vue 3 usa o sistema Proxy para rastrear mudanças nos dados, eliminando as limitações do sistema baseado em getter/setter do Vue 2. Você tem duas primitivas principais:

ref(): para valores primitivos (string, number, boolean) ou objetos, acessados via .value no script
reactive(): para objetos inteiros, com acesso direto sem .value

import { ref, reactive } from 'vue'

const nome = ref('Maria')
const usuario = reactive({
  nome: 'João',
  idade: 28,
  skills: ['Vue', 'TypeScript', 'Node']
})

// No template não precisa de .value
// <template>
//   <p>{{ nome }}</p>
//   <p>{{ usuario.nome }}</p>
// </template>

Ecossistema Moderno do Vue 3

O Vue 3 vem acompanhado de um ecossistema maduro e oficialmente mantido:

Vue Router — Roteamento oficial com navegação declarativa, lazy loading e guards de navegação
Pinia — O sucessor do Vuex para gerenciamento de estado, com tipagem TypeScript nativa e suporte a DevTools
Vite — Build tool oficial com HMR instantâneo e otimizações de produção nativas
VueUse — Coleção de composables utilitários (useDebounce, useLocalStorage, useMediaQuery e dezenas mais)
Vitest — Framework de testes unitário nativo do ecossistema, compatível com Jest API

Single-File Components com <script setup>

Desde o Vue 3.2, a sintaxe <script setup> simplificou ainda mais a Composition API, eliminando a necessidade do setup() explícito e do return:

<script setup lang="ts">
import { ref, computed } from 'vue'

const contador = ref(0)
const incrementar = () => contador.value++
const dobrado = computed(() => contador.value * 2)
</script>

<template>
  <button @click="incrementar">
    Contador: {{ contador }} (dobrado: {{ dobrado }})
  </button>
</template>

Essa sintaxe é hoje o padrão recomendado para novos projetos: menos boilerplate, melhor inferência de tipos TypeScript e mais legibilidade.

Performance e Comparações

O Vue 3 trouxe ganhos significativos de performance em relação ao Vue 2:

55-70% mais rápido em operações comuns
Bundle menor — ~18KB (gzip) para o runtime básico contra ~23KB do Vue 2
Tree-shaking nativo — funcionalidades não utilizadas são removidas no build final
Fragmentos — componentes podem ter múltiplos elementos raiz sem um wrapper desnecessário
Suspense — suporte nativo a estados de carregamento assíncrono (experimental)

Comparado a React, o Vue 3 oferece performance similar ou superior em muitos cenários, com a vantagem de um framework mais opinativo que reduz decisões de arquitetura. Comparado a Angular, o Vue é significativamente mais leve e rápido para começar, mantendo capacidade para aplicações corporativas.

Quando Usar Vue.js 3?

O Vue 3 é uma escolha excelente para:

Projetos que precisam sair do chão rápido — a curva de aprendizado é a menor entre os grandes frameworks
Equipes pequenas ou médias — menos boilerplate que Angular, mais estrutura que React vanilla
Migração de sistemas legados — a natureza progressiva permite adotar Vue gradualmente
Aplicações que exigem boa performance de runtime — o sistema de reatividade é extremamente eficiente
Projetos que valorizam DX (Developer Experience) — Vite + Hot Reload + TypeScript = produtividade máxima

Se você está começando no desenvolvimento web moderno ou quer expandir seu arsenal de frameworks, o Vue.js 3 é um investimento seguro com comunidade ativa, documentação excelente e adoção crescente no mercado.

Entrar em contato

Entre em contato