# Introdução

INFO

Novo no Vue.js? Veja nosso Guia Essencial para começar.

Este guia é sobretudo para usuários com experiência prévia em Vue 2 que desejam aprender sobre os novos recursos e mudanças do Vue 3. Este não é um artigo que você precise ler do começo ao fim antes de experimentar o Vue 3. Embora pareça que muita coisa mudou, muito do que você conhece e ama no Vue ainda é o mesmo; mas queríamos ser tão minuciosos quanto possível fornecendo explicações detalhadas e exemplos para cada alteração documentada.

Início rápido
Principais recursos novos
Incompatibilidades
Bibliotecas suportadas

# Visão Geral

Comece aprendendo Vue 3 com Vue Mastery (opens new window).

# Início Rápido

Via CDN: <script src="https://unpkg.com/vue@next"></script>
Pelo navegador, via playground em Codepen (opens new window)
Pelo navegador, via Sandbox em CodeSandbox (opens new window)

Pré-estruturado, via Vite (opens new window):

npm init vite-app hello-vue3 # OU yarn create vite-app hello-vue3

Pré-estruturado, via vue-cli (opens new window):

npm install -g @vue/cli # OU yarn global add @vue/cli
vue create hello-vue3
# selecione a predefinição vue 3

1
2
3

# Principais Recursos Novos

Alguns dos recursos novos para ficar de olho no Vue 3 incluem:

API de Composição
Teleporte
Fragmentos
Opções para emitir eventos de componentes
API createRenderer de @vue/runtime-core (opens new window) para criar renderizações custumizadas
Açúcar sintático para SFC que utilizem API de Composição (<script setup>) (opens new window) experimental
Variáveis CSS baseadas em estado de SFC (<style vars>) (opens new window) experimental
<style scoped> de SFC agora pode incluir regras globais ou regras que visam apenas conteúdo de slot (opens new window)

# Incompatibilidades

INFO

Ainda estamos trabalhando em uma versão dedicada de migração do Vue 3 com comportamento compatível com o Vue 2 e avisos em tempo de execução de uso incompatível. Se você está planejando migrar um aplicativo Vue 2 mais complexo, é altamente recomendável aguardar a Distribuição de Migração para uma experiência mais tranquila.

A seguir, uma lista de mudanças incompatíveis com v2.x:

# API Global

# Diretivas de Template

# Componentes

# Funções de Renderização

# Elementos Personalizados

# Outras Mudanças Menores

A opção de ciclo de vida destroyed foi renomeada para unmounted
A opção de ciclo de vida beforeDestroy foi renomeada para beforeUnmount
A função fabricadora de props default não acessa mais o contexto this
A API de diretivas customizadas foi modificada para se alinhar ao ciclo de vida do componente
A opção data deverá sempre ser declarada como uma função
A opção data dos mixins agora é mesclada superficialmente
Estratégia de coerção de atributos foi alterada
Algumas classes de transição foram renomeadas
O callback de um array que está sendo observado só será acionado quando este for substituído. Caso você precise dispará-lo em mutação, a opção deep deve ser especificada.
As tags <template> sem diretivas especiais (v-if/else-if/else, v-for, ou v-slot) agora são tratadas como elementos simples resultando em um elemento <template> nativo ao invés de renderizar seu conteúdo interno.
No Vue 2.x, o contêiner raiz outerHTML da aplicação é substituído pelo template do componente raiz (ou eventualmente compilado em um template, se o componente raiz não dispuser da opção template/render). Vue 3.x agora usa o contêiner innerHTML da aplicação ao invés disso - isto é, o próprio contêiner não é mais considerado parte do template.

# APIs Removidas

Suporte a keyCode como modificadores v-on
Métodos de instância $on, $off e $once
Filtros
Atributos inline em templates
Método de instância $destroy. Os usuários não devem mais acessar manualmente o ciclo de vida de componentes indiviuais Vue.

# Bibliotecas Suportadas

Todas as nossas bibliotecas e ferramentas oficiais agora oferecem suporte ao Vue 3, mas, a maioria delas ainda está em status beta e distribuídas sob a tag next no NPM. Estamos planejando estabilizar e mudar todos os projetos para usar a tag latest até o final de 2020.

# Vue CLI

A partir da v4.5.0, vue-cli agora oferece opção integrada para escolher a pre-definição Vue 3 ao criar um novo projeto. Você pode atualizar o vue-cli e executar o vue create para criar um projeto Vue 3 hoje.

# Vue Router

Vue Router 4.0 provê suporte ao Vue 3 e possui uma série de modificações incompatíveis próprias. Leia o README (opens new window) para verificar todos os detalhes.

# Vuex

Vuex 4.0 provê suporte ao Vue 3 com basicamente a mesma API que o 3.x. A única modificação incompatível é em como o plugin é instalado (opens new window).

GitHub (opens new window)

# Extensão para Desenvolvedores

Estamos trabalhando em uma nova versão do Devtools com uma nova interface e refatoração interna para oferecer suporte a várias versões do Vue. A nova versão está atualmente em beta e suporta apenas Vue 3 (por enquanto). A integração do Vuex e do Router também está em andamento.

Para navegador Chrome: Instale da Chrome web store (opens new window)
- Nota: o canal beta pode entrar em conflito com a versão estável do devtools, então pode ser necessário desabilitar temporariamente a versão estável para que a versão beta funcione corretamente.
Para navegador Firefox: Baixe a extensão assinada (opens new window) (Arquivo .xpi em Assets)

# Suporte de IDE

É recomendado o uso do VSCode (opens new window) com a extensão oficial Vetur (opens new window), qual provê suporte à IDE para Vue 3.

# Outros Projetos

Projeto	NPM	Repositório
@vue/babel-plugin-jsx	(opens new window)	[GitHub (opens new window)]
eslint-plugin-vue	(opens new window)	[GitHub (opens new window)]
@vue/test-utils	(opens new window)	[GitHub (opens new window)]
vue-class-component	(opens new window)	[GitHub (opens new window)]
vue-loader	(opens new window)	[GitHub (opens new window)]
rollup-plugin-vue	(opens new window)	[GitHub (opens new window)]

← Recursos para Acessibilidade Array Refs no v-for →