Mudanças de Rutura #

Esta página lista todas as mudanças de rutura da Vue 3 a partir da Vue 2.

Embora pareça que muito tem mudado, muito do que conhecemos e amamos sobre a Vue ainda é o mesmo; mas queríamos ser o mais exaustivos possível e fornecer explicações e exemplos detalhados para cada mudança documentada.

Detalhes #

API Global #

• A API Global da Vue está alterada para usar uma instância de aplicação
• As APIs internas e globais foram reestruturadas para ser passíveis a agitação da árvore

Diretivos do Modelo de Marcação #

• O uso de v-model sobre os componentes foi re-trabalhado, substituindo o v-bind.sync
• O uso de key sobre <template v-for> e nós que não são v-for mudou
• a precedência de v-if e v-for quando usada sobre o mesmo elemento mudou
• v-bind="object" agora é sensível a ordem
• O modificador v-on:event.native foi removido

Componentes #

• Os componentes funcionais apenas podem ser criados usando uma função simples
• O atributo functional sobre o <template> do componente de ficheiro único e a opção de componente functional foram depreciados
• Os componentes assíncronos agora exigem que o método defineAsyncComponent para serem criados
• Os eventos do componente agora devem ser declarados com a opção emits

Função de Interpretação #

• A API da função de interpretação mudou
• A propriedade $scopedSlots foi removida e todas as ranhuras são expostas através de $slots como funções
• $listeners foi removido / combinado ao $attrs
• $attrs agora inclui os atributos class e style

Elementos Personalizados #

• As verificações de elemento personalizado agora são realizadas durante a compilação do modelo de marcação
• O uso do atributo is especial está restrito apenas ao marcador <component> reservado

Outras Pequenas Mudanças #

• A opção do ciclo de vida destroyed foi renomeada para unmounted
• A opção do ciclo de vida beforeDestroy foi renomeada para beforeUnmount
• A função de fábrica default das propriedades não mais tem acesso ao contexto de this
• A API de diretiva personalizada mudou para alinhar com o ciclo de vida do componente e binding.expression foi removida
• A opção data deve ser sempre declarada como uma função
• A opção data das misturas agora é combinada superficialmente
• A estratégia de coerção de atributos mudou
• Algumas classes de transição foram renomeadas
• <TransitionGroup> agora não desenha nenhum elemento envolvente por padrão
• Quando observamos um vetor, a função de resposta apenas acionará quando o vetor for substituído. Se precisarmos acionar sobre a mutação, a opção deep deve ser especificada
• Os marcadores <template> sem diretivas especiais (v-if/else-if/else, v-for, ou v-slot) agora são tratados como elementos simples e resultarão num elemento <template> nativo ao invés de desenhar o seu conteúdo interno.
• A aplicação montada não substitui o elemento em que está montado
• O prefixo de eventos hook: do ciclo de vida mudou para vnode-

APIs Removidas #

• Suporte de keyCode como modificadores de v-on
• Os métodos de instância $on, $off and $once
• Filtros
• Os atributos dos modelos de marcação embutidos
• A propriedade de instância $children
• A opção propsData
• Método de instância $destroy. Os utilizadores não mais gerem manualmente o ciclo de vida dos componentes da Vue individuais.
• As funções globais set e delete, e os métodos de instância $set e $delete. Já não são exigidos com a deteção de mudança baseada em delegação.