Vue.js

Vue.js
Vue.js
Desenvolvedor	Evan You
Plataforma	Web
Lançamento	fevereiro de 2014
Versão estável	3.4.27 (6 de maio de 2024)
Escrito em	TypeScript
Gênero(s)	Framework para aplicações web
Licença	MIT
Página oficial	vuejs.org
Repositório	vuejs/core no GitHub

Vue.js (informalmente chamado de Vue; pronunciado /vjuː/) é um framework JavaScript de código-aberto, focado no desenvolvimento de interfaces de usuário e aplicativos de página única.

Visão geral

O Vue.js conta com uma arquitetura que pode ser adotada de forma incremental, e que foca na renderização declarativa e na composição de componentes. Funcionalidades avançadas necessárias para aplicações complexas (como encaminhamento, gestão de estados e automação de compilação) são oferecidas por meio de bibliotecas e pacotes de suporte mantidos oficialmente, sendo o Nuxt.js como uma das soluções mais populares.

História

O Vue foi criado pelo desenvolvedor independente chinês Evan You, após trabalhar para o Google usando o AngularJS em vários projetos. Posteriormente, ele resumiu o pensamento por trás do processo de criação do Vue: "Pensei, e se eu pudesse retirar somente a parte que realmente gostava do Angular e criar algo muito leve?". O primeiro commit ao código-fonte do projeto data de julho de 2013, e o framework foi lançado oficialmente em fevereiro do ano seguinte, em 2014.

Versões

Version	Release date	Title
3.0	18 de setembro de 2020	One Piece
2.6	4 de fevereiro de 2019	Macross
2.5	13 de outubro de 2017	Level E
2.4	13 de julho de 2017	Kill la Kill
2.3	27 de abril de 2017	JoJo's Bizarre Adventure
2.2	26 de fevereiro de 2017	Initial D
2.1	22 de novembro de 2016	Hunter X Hunter
2.0	30 de setembro de 2016	Ghost in the Shell
1.0	27 de outubro de 2015	Evangelion
0.12	12 de junho de 2015	Dragon Ball
0.11	7 de novembro de 2014	Cowboy Bebop
0.10	23 de março de 2014	Blade Runner
0.9	25 de fevereiro de 2014	Animatrix
0.8	27 de janeiro de 2014	-
0.7	24 de dezembro de 2013	-
0.6	8 de dezembro de 2013	VueJS

Funcionalidades

Componentes

Os componentes Vue extendem elementos HTML básicos para encapsular código reutilizável. A um alto nível, os componentes são elementos personalizados aos quais o compilador do Vue associa determinados comportamentos. No Vue, um componente é essencialmente uma instância do Vue com opções predefinidas. O trecho de código abaixo contém um exemplo de um componente Vue:

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  start: { type: Number, default: 5 },
})
const count = ref(props.start)
const isDisabled = computed(() => count.value === 0)

function decrement() {
  if (count.value > 0) {
    count.value--
  }
}
</script>

<template>
  <div class="host">
    <p v-if="count === 0">Fim.</p>
    <p v-else-if="count === 1">Encerra no próximo clique!</p>
    <p v-else>Encerra em {{ count }} cliques.</p>
    <button :disabled="isDisabled" @click="decrement">Contar</button>
  </div>
</template>

<style scoped>
.host {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

p {
  font: 1.125rem Noto, sans-serif;
}
</style>

E o uso:

<script setup>
  import Counter from './Counter.vue'
</script>

<template>
  <Counter :start="5" />
</template>

Modelos

O Vue usa uma sintaxe de modelo baseada em HTML que permite vincular o DOM renderizado aos dados contidos na instância subjacente do Vue. Todos os modelos do Vue são HTML válido, e podem ser interpretados por navegadores compatíveis e analisadores HTML. Compilando os modelos, o Vue transforma-os em funções de renderização do DOM virtual. O Modelo de Objeto de Documento (ou "DOM") virtual permite ao Vue renderizar componentes internamente antes de atualizar o navegador. Combinado com o sistema de reatividade, consegue calcular o número mínimo de componentes a serem re-renderizados, e manipular minimamente o DOM quando o estado do aplicativo é alterado.

Usuários do Vue podem usar a sintaxe de modelo ou optar por escrever diretamente funções de renderização usando JSX. As funções de renderização permitem que o aplicativo seja construído a partir de componentes de software.

Reatividade

O sistema de reatividade do Vue utiliza objetos JavaScript simples e re-renderização otimizada. Cada componente controla suas próprias dependências reativas durante sua renderização, com o objetivo de que o sistema saiba exatamente quando e quais componentes renderizar novamente.

Transições

O Vue permite diversas maneiras de aplicar efeitos de transição quando itens são inseridos, atualizados ou removidos do DOM. Isso inclui ferramentas para:

• Aplicar automaticamente classes para transições e animações CSS
• Integrar bibliotecas de animação CSS de terceiros, como a Animate.css
• Utilizar JavaScript para manipular diretamente o DOM durante ganchos de transição
• Integrar bibliotecas de animação JavaScript de terceiros, como Velocity.js

Quando um elemento envolto em um componente de transição é inserido ou removido, o que acontece é:

1. O Vue detecta automaticamente se o elemento-alvo tem transições ou animações CSS aplicadas; caso em que as classes de transição CSS serão adicionadas ou removidas nos momentos apropriados.
2. Se o componente de transição fornecer ganchos JavaScript, esses ganchos serão chamados nos momentos apropriados.
3. Se nenhuma transição/animação CSS for detectada e nenhum gancho JavaScript for fornecido, as operações do DOM para inserção e/ou remoção serão executadas imediatamente no próximo frame.

Roteamento

Uma desvantagem tradicional dos aplicativos de página única (SPAs) é a incapacidade de compartilhar links para a "sub-página" exata em uma página da web específica. Como os SPAs atendem a seus usuários apenas uma resposta baseada em URL do servidor (normalmente retornando index.html ou index.vue), marcar determinadas telas ou compartilhar links para seções específicas é normalmente difícil, se não impossível. Para resolver esse problema, muitos roteadores do lado do cliente delimitam suas URLs dinâmicas com um hashbang (#!), por exemplo, page.com/#! /. Com o HTML5, no entanto, a maior parte dos navegadores modernos oferece suporte ao encaminhamento sem hashbangs.

O Vue oferece uma interface para alterar o que é exibido na página com base no caminho atual da URL—independentemente de como ela foi alterada (seja por link enviado por email, atualização da página ou links na própria página). Além disso, o uso de encaminhamento front-end permite a transição intencional do caminho do navegador quando certos eventos (por exemplo, cliques) ocorrem em botões ou links. O próprio Vue não vem com roteamento de hash front-end. Mas o pacote de código-aberto "vue-router" fornece uma API para atualizar a URL do aplicativo, suporta o botão voltar (histórico de navegação) e e-mail de redefinição de senha ou verificação de email com parâmetros de URL de autenticação. Suporta ainda o mapeamento de rotas aninhadas para componentes aninhados e oferece controle de transição preciso. Com o Vue, desenvolvedores já estão compondo aplicativos com pequenos blocos construindo componentes maiores. Com o vue-router adicionado à mistura, os componentes devem simplesmente ser mapeados para as rotas às quais pertencem, e as rotas parent/raiz devem indicar onde os "filhos" devem renderizar.

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
...
</script>

O código acima:

1. Define uma rota de front-end em websitename.com/user/<id> .
2. Que será renderizada no componente User definido em (const User. . . )
3. Permite que o componente User passe o ID específico do usuário digitado na URL usando a chave de parâmetros do objeto $route: $route.params.id.
4. Este modelo (variando de acordo com os parâmetros passados para o roteador) será renderizado em dentro da div#app do DOM.
5. O HTML final gerado para alguém que digite websitename.com/user/1 será:

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

Ecossistema

A biblioteca principal vem com ferramentas e bibliotecas desenvolvidas pela equipe principal e por colaboradores.

Ferramentas Oficiais

• Devtools - extensão devtools do navegador para depuração de aplicativos Vue.js
• Vue CLI - Ferramentas padrão para desenvolvimento rápido com Vue.js
• Vue Loader - um loader webpack que permite a escrita de componentes Vue em um formato chamado SFC (Single-File Components)

Bibliotecas oficiais

• Vue Router - O router oficial para o Vue.js
• Vuex - Gerenciamento centralizado de estado inspirado em fluxo para Vue.js
• Vue Server Renderer - Renderização server-side para Vue.js
• Pinia - Gerenciamento de estado inspirado no Vuex, oficial do Vue 3.

Ver também

• Angular (framework)
• Lit
• React (JavaScript)
• Svelte

Ligações externas

• Sítio oficial (em chinês, em inglês e em português)
• vuejs/core no GitHub
• «Vue SFC Playground» (em inglês). Experimente Vue.js online