Introdução ao Vue.js no Desenvolvimento Full-Stack

O Vue.js é um framework JavaScript progressivo amplamente utliizado no desenvolvimento de aplicações web, oferecendo flexibilidade para projetos de pequeno a grande porte. Esta análise abrange a arquitetura central, ecossistema, desenvolvimento prático e otimização de desempenho, fornecendo uma visão técnica detalhada.

Evolução do Vue.js e Posicionamento de Mercado

Lançado em 2014, o Vue.js passou por iterações significativas, desde sua versão 1.x com foco em data binding até a versão 3.x com suporte a TypeScript e melhorias na reatividade. Seu posicionamento como framework progressivo permite integração gradual em diversos contextos, como SPAs, SSR com Nuxt.js e aplicações híbridas.

Arquitetura Central e Sintaxe Básica

A arquitetura do Vue baseia-se em reatividade e componentização. No Vue 3, a reatividade é implementada via Proxy, substituindo Object.defineProperty do Vue 2, o que simplifica o rastreamento de alterações em arrays e objetos. A sintaxe Composition API, com suporte a TypeScript, facilita a reutilização de lógica.

Exemplo de Componente Vue 3 com Script Setup

<template>
  <div class="exemplo-vue">
    <h2>{{ titulo }}</h2>
    <p>Valor atual: {{ valor }}</p>
    <button>Adicionar</button>
    <componentefilho :mensagem="msgParaFilho"></componentefilho>
  </div>
</template>
<script lang="ts" setup="">
import { ref } from 'vue';
import ComponenteFilho from './ComponenteFilho.vue';

const valor = ref(0);
const titulo = ref('Demonstração Vue 3');
const msgParaFilho = ref('Dados do componente pai');

const incrementar = () => {
  valor.value++;
};

const tratarResposta = (dados: string) => {
  console.log('Resposta recebida:', dados);
};
</script>
<style scoped="">
.exemplo-vue {
  margin: 16px;
  padding: 16px;
}
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
}
</style>

Ecossistema Vue: Ferramentas Essenciais

O ecossistema Vue inclui ferramentas como Vue Router para roteamento, Pinia para gerenciamento de estado (substituindo Vuex no Vue 3), e Vite como bundler de próxima geração. Bibliotecas de UI como Element Plus e frameworks full-stack como Nuxt.js complementam a stack.

Configuração do Pinia para Gerenciamento de Estado

// store/usuarioStore.ts
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useUsuarioStore = defineStore('usuario', () => {
  const tokenAutenticacao = ref('');
  const dadosUsuario = ref({ nome: '', papel: '' });

  const definirToken = (token: string) => {
    tokenAutenticacao.value = token;
    localStorage.setItem('auth_token', token);
  };

  const obterDadosUsuario = async () => {
    const resposta = await fetch('/api/usuario');
    const dados = await resposta.json();
    dadosUsuario.value = dados;
  };

  const limparSessao = () => {
    tokenAutenticacao.value = '';
    dadosUsuario.value = { nome: '', papel: '' };
    localStorage.removeItem('auth_token');
  };

  return { tokenAutenticacao, dadosUsuario, definirToken, obterDadosUsuario, limparSessao };
});

Roteamento com Vue Router e Guardas de Navegação

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import { useUsuarioStore } from '@/store/usuarioStore';

const rotas: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('@/layouts/LayoutPrincipal.vue'),
    children: [
      { path: '', name: 'Painel', component: () => import('@/views/Painel.vue'), meta: { titulo: 'Painel de Controle' } },
      { path: 'perfil', name: 'Perfil', component: () => import('@/views/Perfil.vue'), meta: { titulo: 'Perfil', requerAutenticacao: true } }
    ]
  },
  { path: '/acesso', name: 'Acesso', component: () => import('@/views/Acesso.vue'), meta: { titulo: 'Login' } }
];

const router = createRouter({
  history: createWebHistory(),
  rotas
});

router.beforeEach((para, de, proximo) => {
  const lojaUsuario = useUsuarioStore();
  document.title = (para.meta.titulo as string) || 'Aplicação Vue';

  if (para.meta.requerAutenticacao && !lojaUsuario.tokenAutenticacao) {
    proximo('/acesso');
  } else {
    proximo();
  }
});

export default router;

Desenvolvimento Prático: Projeto Vue com Vite e TypeScript

Para iniciar um projeto Vue 3 com Vite, utilize o comando para scaffolding, seguido da instalação de dependências como Vue Router, Pinia e uma biblioteca de UI. Configure aliases de caminho e proxy para desenvolvimento local.

Exemplo de Configuração do Vite

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 5173,
    proxy: {
      '/servico': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (caminho) => caminho.replace(/^\/servico/, '')
      }
    }
  },
  build: {
    outDir: 'saida',
    assetsDir: 'recursos',
    minify: 'esbuild'
  }
});

Otimização de Desempenho em Aplicações Vue

A otimização envolve práticas como carregamento preguiçoso de componentes, uso eficiente de v-memo para renderização condicional, e redução do tamanho do bundle via Tree Shaking. Em produção, configure compressão Gzip e CDN para recursos estáticos.

Componente com Carregamento Dinâmico e Otimização de Renderização

<template>
  <div>
    <dialog-modal v-model="visivel">
      <component-carregado v-if="visivel"></component-carregado>
    </dialog-modal>
    <div v-memo="[contador, itens.length]">
      <p :key="item.id" v-for="item in itens">{{ item.descricao }}</p>
      <span>Contagem: {{ contador }}</span>
    </div>
  </div>
</template>
<script lang="ts" setup="">
import { ref, defineAsyncComponent } from 'vue';
import { DialogModal } from 'biblioteca-ui';

const ComponentCarregado = defineAsyncComponent(() => import('@/components/ComponentePesado.vue'));
const visivel = ref(false);
const contador = ref(0);
const itens = ref([{ id: 101, descricao: 'Item Otimizado' }, { id: 102, descricao: 'Outro Item' }]);
</script>

Comparação entre Vue 2 e Vue 3: Aspectos Técnicos

O Vue 3 traz melhorias substanciais, como reatividade baseada em Proxy, suporte nativo a TypeScript, e Syntax Sugar como Script Setup. A migração do Vue 2 para o Vue 3 envolve atualizar APIs de reatividade, adaptar componentes para Composition API, e substituir Vuex por Pinia para gerenciamento de estado.