Vue.js: Introdução ao Vue.js

Última atualização: 2026-08-26

O Vue.js é um framework JavaScript progressivo para a criação de interfaces de usuário — ele permite desenvolver com eficiência aplicativos web usando uma abordagem declarativa e baseada em componentes, desde formulários simples até SPAs complexas de nível empresarial.

Este tutorial foi elaborado para iniciantes com conhecimentos básicos de HTML, CSS e JavaScript. Ele começa com os conceitos fundamentais do Vue 3 e avança até que você consiga desenvolver, de forma independente, um sistema de back-end de comércio eletrônico completo e de médio porte. A curva de aprendizado difere daquela do W3Schools e do Newbie Tutorial — adotamos uma abordagem Vue 3 + Composition API em primeiro lugar, utilizando um projeto real de comércio eletrônico (um backend SaaS com 5.000 lojistas e 30.000 SKUs) como exercício prático.

1. O que você vai aprender

• O que é o Vue.js e o que realmente significa “framework progressivo”?
• Principais diferenças entre o Vue 3 e o Vue 2 (por que você deve aprender o Vue 3)
• Comparação e escolha entre a API de composição e a API de opções
• O ecossistema do Vue 3: os papéis do Vite, do Vue Router, do Pinia e do Element Plus
• Quem deve aprender Vue e o que você pode fazer depois de aprender?

2. A história da escolha da tecnologia front-end por uma equipe de SaaS

(1) Desafio: Cinco estruturas — qual você deve escolher?

Em uma empresa de SaaS em rápido crescimento, com 200.000 linhas de código de front-end, a líder técnica Alice se depara com uma decisão difícil no primeiro trimestre de 2026:

• React 18+: Familiar à equipe, mas tamanho do pacote de 850 KB, carregamento inicial de 3,2 s
• Vue 3: Equipe sem nenhuma experiência, mas com um pacote de 280 KB e um tempo de carregamento inicial de 0,9 s
• Angular 17: Compatível com TypeScript, mas apresenta uma curva de aprendizado íngreme; os iniciantes levam cerca de dois meses para se familiarizar com a ferramenta
• Svelte 4: Otimizações em tempo de compilação, mas um ecossistema pequeno e um mercado de trabalho difícil
• Solid.js: Oferece o melhor desempenho, mas, com uma comunidade de 50 mil pessoas, você não encontrará respostas para suas dúvidas no Stack Overflow

O gerente de produto Charlie aumenta a pressão:

“Temos 30.000 SKUs em nosso painel de administração. A filtragem leva 8 segundos no aplicativo React atual. Os novos desenvolvedores levam 3 semanas para lançar seu primeiro recurso. Precisamos melhorar esses dois aspectos em 5 vezes — até o terceiro trimestre de 2026.”

(2) A solução no Vue 3

Após 4 semanas de avaliação, Alice escolheu o Vue 3. Eis o motivo:

Bundle size:     850KB → 280KB    (-67%)
Initial load:    3.2s  → 0.9s    (-72%)
Onboarding time: 3 weeks → 1 week (-67%)
Job market:      growing 35% YoY

A natureza “progressiva” do Vue significa que Alice pode adotá-lo de forma gradual:

1. Semana 1: Substituir 1 página pelo Vue 3 (tag de script do CDN, sem etapa de compilação)
2. Semana 4: Migrar 10 páginas para componentes de arquivo único
3. Semana 12: SPA completo com Router + Pinia
4. Semana 24: 200.000 linhas migradas, sem tempo de inatividade

(3) Receita

Após 6 meses trabalhando com o Vue 3, a equipe avaliou:

• Desempenho: Tempo de filtragem do painel: 8 s → 0,8 s (10 vezes mais rápido)
• Produtividade: Lançamento de novos recursos: de 3 semanas para 1 semana
• Qualidade da contratação: dos 5 candidatos entrevistados, 4 tinham experiência com Vue (contra 2 com React)
• Pacote: Economia de 570 KB = carregamento das páginas 30% mais rápido = aumento de 8% na taxa de conversão

3. O que é o Vue?

O Vue (pronuncia-se /vjuː/, semelhante a “view”) é um framework JavaScript progressivo para a criação de interfaces de usuário. Foi criado por Evan You em 2014 e atualmente é mantido pela equipe principal do Vue.js e pela comunidade global.

(1) Definições básicas + Diagrama da arquitetura do Vue 3

graph TB
    subgraph Vue3Ecology
        V[Vue 3 Core<br/>@vue/runtime-core]
        R[Vue Router 4<br/>Route Management]
        P[Pinia<br/>State Management]
        S[SSR/SSG<br/>Nuxt 3]
        T[Vite<br/>Build Tools]
        U[UI Component Library<br/>Element Plus/Naive UI]
    end
    
    V --> R
    V --> P
    V --> S
    T --> V
    U --> V
    
    style V fill:#42b883,color:#fff
    style R fill:#35495e,color:#fff
    style P fill:#ffd02f
    style S fill:#00dc82
    style T fill:#646cff,color:#fff

graph TB
    subgraph Vue3Ecology
        V[Vue 3 Core<br/>@vue/runtime-core]
        R[Vue Router 4<br/>Route Management]
        P[Pinia<br/>State Management]
        S[SSR/SSG<br/>Nuxt 3]
        T[Vite<br/>Build Tools]
        U[UI Component Library<br/>Element Plus/Naive UI]
    end
    
    V --> R
    V --> P
    V --> S
    T --> V
    U --> V
    
    style V fill:#42b883,color:#fff
    style R fill:#35495e,color:#fff
    style P fill:#ffd02f
    style S fill:#00dc82
    style T fill:#646cff,color:#fff

(2) Cinco características principais

(3) Casos de uso do Vue

4. Vue 3 x Vue 2: Principais diferenças

(1) Visão geral das principais melhorias

(2) Por que o Vue 3 é recomendado?

✅ Vue 3 is the current major version (2020-09 Published, 2026 Stable 5+ years)
✅ Vue 2 As of 2023-12 EOL(End of Life),No longer maintained
✅ 90% New Project、100% The new ecosystem tools are all based on Vue 3
✅ Composition API is the Modern Writing Style Recommended by the Vue Team
✅ TypeScript Significant Improvement in Support,Team Code Quality ↑

❌ Vue 2 This is only necessary when maintaining legacy projects.
❌ Not studying Vue 3 = Missed Vue Ecology 95% Modern tools

5. API de composição x API de opções

(1) Comparação entre dois estilos de API

(2) Exemplos da API de opções

// Options API - Group by option
export default {
  data() {
    return { count: 0, name: 'Alice' }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}

(3) Exemplo da API de composição

// Composition API - Logical Blocking
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const name = ref('Alice')
    
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    onMounted(() => {
      console.log('Component mounted')
    })
    
    return { count, name, doubleCount, increment }
  }
}

(4) Qual devo escolher?

6. O ecossistema do Vue 3

O Vue 3 não é apenas um framework, mas um ecossistema completo de desenvolvimento front-end.

(1) Diagrama dos componentes do ecossistema

graph LR
    subgraph Core
        V[Vue 3 Core]
    end
    
    subgraph Official Recommendation
        R[Vue Router 4]
        P[Pinia]
        T[Vite]
    end
    
    subgraph Community Ecosystem
        E[Element Plus]
        N[Naive UI]
        U[UnoCSS]
        I[Vue I18n]
    end
    
    V --> R
    V --> P
    V --> T
    V --> E
    V --> N
    V --> U
    V --> I
    
    style V fill:#42b883,color:#fff

graph LR
    subgraph Core
        V[Vue 3 Core]
    end
    
    subgraph Official Recommendation
        R[Vue Router 4]
        P[Pinia]
        T[Vite]
    end
    
    subgraph Community Ecosystem
        E[Element Plus]
        N[Naive UI]
        U[UnoCSS]
        I[Vue I18n]
    end
    
    V --> R
    V --> P
    V --> T
    V --> E
    V --> N
    V --> U
    V --> I
    
    style V fill:#42b883,color:#fff

(2) Tabela de referência rápida das principais ferramentas

(3) Percurso de aprendizagem abrangente

Stage 1(This Tutorial Phase 1-3):Vue 3 Core + Composition API
Stage 2 (This Tutorial Phase 4): Vue Router + Pinia + Advanced API
Stage 3(This Tutorial Phase 5):Vite + Real Projects + Deployment
Advanced (Recommended Next Steps): Nuxt 3 SSR / Vitest Test / Performance Optimization

7. Exemplo completo: Seu primeiro aplicativo Vue 3

▶ Exemplo: Olá, contador do Vue 3 (SFC — Componente de Arquivo Único)

<!-- App.vue - First Vue 3 Applications -->
<template>
  <div class="hello-vue">
    <h1>{{ greeting }}</h1>
    <p>You clicked the button <strong>{{ count }}</strong> times.</p>
    <button @click="increment">Click me</button>
    <p class="author">By {{ author }}, {{ currentYear }}</p>
  </div>
</template>

<script setup>
// Composition API + <script setup> Syntax sugar
import { ref, computed } from 'vue'

const count = ref(0)
const author = ref('Alice')

// Computed Properties:Automatic Dependency Tracking
const currentYear = computed(() => new Date().getFullYear())
const greeting = computed(() => `Hello Vue 3! Welcome, ${author.value}!`)

// Methods
function increment() {
  count.value++
}
</script>

<style scoped>
.hello-vue {
  text-align: center;
  padding: 2rem;
  font-family: system-ui, sans-serif;
}
button {
  background: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
button:hover {
  background: #35495e;
}
.author {
  color: #666;
  font-size: 0.9rem;
  margin-top: 2rem;
}
</style>

Saída (após clicar no botão):

Hello Vue 3! Welcome, Alice!

You clicked the button 5 times.

[Click me]

By Alice, 2026

▶ Exemplo: Como integrar uma CDN (pronto para uso em 5 linhas de HTML)

<!DOCTYPE html>
<html>
<head><title>Vue 3 Hello</title></head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="count++">Clicked {{ count }} times</button>
  </div>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        return {
          message: ref('Hello Vue 3!'),
          count: ref(0)
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

Resultado: Abra o arquivo HTML; a página exibe “Olá, Vue 3!” e um botão. Ao clicar no botão, o número aumenta em 1.

▶ Exemplo: “Hello World” é executado com sucesso em 5 minutos

# 1. Create a Project(Use create-vue Official Scaffolding)
npm create vue@latest my-vue-app
# Select: TypeScript? No, JSX? No, Router? No, Pinia? No, Vitest? No, E2E? No
cd my-vue-app
npm install

# 2. Start the development server
npm run dev
# → Local: http://localhost:5173/

# 3. Open in a browser,See Vue Default Welcome Page

▶ Exemplo: Gráfico de acompanhamento do progresso (5 minutos/30 minutos/1 hora)

▶ Exemplo: 5 erros comuns (evite-os em 5 minutos)

❓ Perguntas Frequentes

P: O que devo escolher, Vue 3 ou React? R: Escolha aquele com o qual você consiga se dedicar até dominá-lo. Ambos são capazes de lidar com 95% das tarefas. O Vue tem uma curva de aprendizado mais suave e uma sintaxe de modelos mais próxima do HTML; iniciantes podem se familiarizar com ele em duas semanas. O React possui um ecossistema maior, mas você precisará se acostumar com o modelo mental do JSX. Em termos de perspectivas de emprego, há alta demanda por ambos.

P: Preciso aprender TypeScript para usar o Vue 3? R: Não, não é necessário. O Vue 3 oferece suporte total ao JavaScript puro. No entanto, se você planeja trabalhar em projetos de nível empresarial, recomendamos fortemente que aprenda TypeScript — o uso do TypeScript com a API de Composição do Vue 3 é considerado uma prática recomendada, e a inferência de tipos pode reduzir os bugs em 50%.

P: A API de Composição do Vue 3 é difícil de aprender? R: É um pouco mais difícil do que a API de Opções (já que é preciso entender conceitos como refs e reatividade), mas é mais poderosa depois que você a domina. Recomendo começar com a API de Opções para aprender o básico e, em seguida, passar para a API de Composição para levar suas habilidades a um novo patamar.

P: O Vue 3 é adequado para o desenvolvimento de aplicativos móveis? R: Ele pode ser usado para H5 (com a estrutura uni-app), mas, para aplicativos nativos, ainda recomendamos o Flutter ou o React Native. O ponto forte do Vue 3 está na web (desktop e H5); os dispositivos móveis são uma opção secundária.

P: Conseguirei encontrar um emprego na área de Vue depois de concluir este tutorial? R: Sim. Este tutorial aborda o Vue 3 + Router + Pinia + Element Plus + Vite + TypeScript, que atendem aos requisitos de 90% das vagas de emprego relacionadas ao Vue. Você poderá adquirir a experiência em projetos e aprender a resolver problemas de algoritmos no próprio trabalho.

P: Os projetos do Vue 2 ainda podem ser mantidos? R: Eles podem ser mantidos, mas não receberão mais atualizações. O Vue 2 chegou ao fim de sua vida útil (EOL) em dezembro de 2023; todos os novos projetos devem usar o Vue 3. Se você estiver mantendo um projeto existente, recomendamos planejar uma migração para o Vue 3.

P: Quais empresas conhecidas utilizam o Vue 3? R: GitLab, Nintendo, Adobe Behance, Alibaba (em parte), Xiaomi (em parte), BMW, NASA e outras. A participação de mercado do Vue continua a crescer na China, no Sudeste Asiático e na Europa.

📖 Resumo

• O Vue.js é um framework progressivo de JavaScript criado por Evan You em 2014
• O Vue 3 é a versão principal atual, lançada em setembro de 2020; até 2026, já estará em versão estável há mais de 5 anos.
• O Vue 2 chegou ao fim do ciclo de vida (EOL) em dezembro de 2023; novos projetos devem usar o Vue 3
• Principais melhorias no Vue 3: proxies reativos, API de composição, suporte de primeira classe ao TypeScript, tree-shaking
• A API de Composição é a abordagem moderna recomendada pela equipe do Vue, oferecendo maior flexibilidade na reutilização de lógica.
• Ecossistema do Vue 3: Vite (compilação) + Vue Router 4 (roteamento) + Pinia (estado) + Element Plus (interface do usuário)
• Adoção progressiva: da integração com a CDN até uma SPA completa, evoluindo conforme necessário
• Adequado para: SPA de pequeno e médio porte (comércio eletrônico/CRM/administração), aplicativos para empresas de médio porte

📝 Exercícios

1. Questões básicas (Dificuldade: ⭐)

   Acesse a documentação oficial em vuejs.org, liste os três principais recursos do Vue 3 e explique cada um deles em uma frase.

2. Problemas avançados (Dificuldade: ⭐⭐)

   Compare o Vue 3 e o React 18 nos seguintes aspectos (usando uma tabela):

   Dimensão	Visualização 3	React 18
   Tamanho do pacote	?	?
   Curva de Aprendizagem	?	?
   Biblioteca de Gerenciamento de Estados	?	?
   Biblioteca de roteamento	?	?
   Participação no mercado interno	?	?

3. Problema desafiador (Dificuldade: ⭐⭐⭐)

   Pesquise três projetos reais ao seu redor (sua própria empresa, a empresa de um amigo ou um projeto de código aberto) e faça anotações:

   1. Qual framework de front-end você usou?
   2. Por que escolher essa estrutura?
   3. Qual seria o custo de migrar para o Vue 3?

   Escreva um relatório de pesquisa com 300 caracteres e publique-o na seção de comentários.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós