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
• Migration Build
• Principais recursos novos
• Incompatibilidades
• Bibliotecas suportadas

Visão Geral

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

Início Rápido

Se você quiser testar rapidamente o Vue 3 em um novo projeto:

• 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 hello-vue3 -- --template vue # OU yarn create vite hello-vue3 --template vue
  

• 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
  

Compilação de Migração

Se você tem um projeto ou biblioteca do Vue 2 existente que pretende atualizar para o Vue 3, fornecemos uma versão do Vue 3 que oferece APIs compatíveis com o Vue 2. Verifique a página Compilação de Migração para obter mais detalhes.

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>)
• Variáveis CSS baseadas em estado de SFC (v-bind no <style>)
• <style scoped> de SFC agora pode incluir regras globais ou regras que visam apenas conteúdo de slot (opens new window)
• Suspense experimental

Incompatibilidades

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

API Global

• API Global do Vue agora utiliza uma instância da aplicação
• API Global e internas foram reestruturadas para serem tree-shakable

Diretivas de Template

• O uso de v-model em componentes foi retrabalhado, substituindo o v-bind.sync
• O atributo key em <template v-for> e nós que não sejam v-for foi alterado
• A precedência de v-if e v-for quando usados no mesmo elemento foi modificada
• v-bind="object" agora é sensível à ordem de disposição
• modificador v-on:event.native foi removido
• ref em v-for não resulta mais em um array de refs

Componentes

• Componentes funcionais só podem ser criados usando uma função simples
• O atributo functional no <template> de Componentes Single File (CSF) e a opção de componente functional estão obsoletas
• Componentes assíncronos necessitam de um método defineAsyncComponent para serem criados
• Os eventos de componente agora devem ser declarados com a opção emits

Funções de Renderização

• A API da função de renderização foi modificada
• A propriedade $scopedSlots foi removida e todos os seus slots passam a ser obtidos como funções através de $slots
• $listeners foi removida/mesclada em $attrs
• $attrs agora inclui os atributos class e style

Elementos Personalizados

• A lista de permissões para elementos personalizados agora é realizada durante a compilação do template
• O atributo especial is está restrito apenas à tag <component>

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 e binding.expression foi removido
• 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.
• O aplicativo montado não substitui o elemento no qual está montado
• Prefixo hook: de eventos de ciclo de vida alterado para vnode-

APIs Removidas

• Suporte a keyCode como modificadores v-on
• Métodos de instância $on, $off e $once
• Filtros
• Atributos inline em templates
• Propriedade de instância $children
• Opção propsData
• Método de instância $destroy. Os usuários não devem mais acessar manualmente o ciclo de vida de componentes Vue individuais.
• Funções globais set e delete, e os métodos de instância $set e $delete. Eles não são mais necessários com a detecção de alterações baseada em proxy.

Bibliotecas Suportadas

Todas as nossas bibliotecas e ferramentas oficiais agora oferecem suporte ao Vue 3, mas, algumas delas ainda estão em status beta ou de candidata a lançamento. Você encontrará detalhes para as bibliotecas individuais abaixo. A maioria atualmente é distribuída usando a tag next no npm. Pretendemos mudar para latest assim que todas as bibliotecas oficiais tiverem versões estáveis ​​e compatíveis.

Vue CLI

A partir da v4.5.0, vue-cli agora oferece a opção integrada para escolher 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.

• Documentação (opens new window)
• GitHub (opens new window)

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 guia de migração (opens new window) para verificar todos os detalhes.

• Documentation (opens new window)
• GitHub (opens new window)
• RFCs (opens new window)

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).

• Documentation (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 Volar (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)]

INFO

Para obter informações adicionais sobre a compatibilidade do Vue 3 com bibliotecas e plug-ins, certifique-se de verificar esta issue no awesome-vue (opens new window).