🥁 🌄 🧑🏾‍🤝‍🧑🏻 Vue 3 ficará mais rápido 👩🏼‍💻 👏 🚴🏽

Um dos eventos mais marcantes do mundo no Frontend este ano foi a publicação do próximo repositório Vue - parte da funcionalidade da terceira versão do VueJS. Este artigo fornece uma visão geral dos novos recursos matadores do VueJS. No momento da publicação do artigo, o repositório estava no status Pré-Alfa . Os planos de liberação podem ser visualizados no Roadmap

Antecedentes

Em fevereiro de 2018, Evan You, o criador do Vue.js, compartilhou seus planos para a versão 3 da estrutura popular:

Divida a funcionalidade em pacotes para isolar o escopo
TypeScript aparece na base de código
O Vue 3 será compatível com a segunda versão (por exemplo, não quebrará o código antigo)
Os observadores na versão 3.0 são baseados no Proxy, o que aumentará a velocidade de renderização e removerá várias restrições impostas pelo Object.defineProperty
Você poderá estrear usando os novos ganchos renderTriggered e renderTriggered
Graças à introdução da trepidação de árvores (excluindo diretivas não utilizadas da compilação), o tamanho da estrutura será menor que 10kb na forma compactada
Otimização de Slot
O desempenho no vue 3 melhorará 100%

Recursos como componentes integrados e auxiliares de tempo de execução de diretiva (modelo-v) agora são importados sob demanda e abaláveis em árvore
Evan você

O compilador rastreará a existência de diretivas e as incluirá na compilação no estágio de compilação.

No processo de trabalho no Vue 3, Evan se recusou a reescrever componentes em classes e, em vez disso, implementou uma API funcional.

Como a nova versão usará proxies não suportados no IE, o Evan planeja criar uma compilação separada para o IE11. No total, 4 fases prometem:

Alpha Phase - estágio de finalização do compilador e renderização ssr
Fase Beta - estágio de finalização das principais bibliotecas (Vue Router, Vuex, Vue CLI, Vue DevTools)
Fase RC - Estágio de pré-lançamento, incluindo o Vue 2.0
Versão IE11
Versão final

Evan planejou um lançamento final para 2019, mas o projeto ainda está em fase pré-alfa.

Vue 3 será mais rápido

Graças a várias inovações, o Vue 3 se tornará 2 vezes mais rápido que a versão anterior.

Observação e reatividade baseadas em proxy

Uma das principais inovações foi a mudança no mecanismo de monitoramento de objetos de getters e setters de Object.defineProperty para Proxy. Agora o Vue pode rastrear a remoção e adição de propriedades de objetos reativos sem usar o Vue.set e o Vue.delete. A inovação aumentou a velocidade de renderização e script e reduziu o consumo de memória em 2 vezes! Você pode comparar o desempenho do Vue 2 e Vue 3 baixando o repositório do Ilya Klimov

Comparação de desempenho do Vue 2 (esquerda) e Vue 3 (estágio pré-alfa, direita)

Graças aos proxies, a reatividade não será perdida ao alterar manipulações de objetos que não são rastreadas no Vue 2. Agora o Vue não percorrerá recursivamente as propriedades de um objeto para calcular as alterações.

O que é feito das promessas:

Descendentes e pais são redesenhados independentemente
O tamanho do Vue 3 diminuiu de 20kb para 10kb na forma compactada
TypeScript Adicionado

Outras otimizações:

O Vue 3 se lembrará de conteúdo estático e corrigirá apenas dados dinâmicos
Adereços estáticos sobem o escopo
Para facilitar o desenvolvimento, o código do Vue 3 é dividido em pacotes modulares.
O pacote runtime-core é feito em várias plataformas
Em vez de classes, Evan adicionou uma função de configuração e ganchos que tornam o código limpo, organizado e reutilizável *
Fatia de tempo *. A execução do código JS é cortada em pedaços sem bloquear a interação do usuário com o aplicativo

Asteriscos indicam a API experimental .
Atualização: Mais tarde, Evan decidiu abandonar o tempo estagnado.

Inspirada no HOC, a Reacta Evan implementou funções de configuração com lógica reutilizável e ganchos personalizados. Diferentemente dos mixins, os ganchos do ciclo de vida não se substituem.

Patch VDom aprimorado

Joystick de conteúdo estático

O conteúdo estático é movido para fora do patch do VDom ao compilar o modelo. Vue foi inspirado por Svelte para fazer isso:

 <div>Hello, {{name}}</div>

Aqui, o objeto e o contexto alterados são passados. Se alterado contém uma variável reativa, é atualizado no contexto.

 p(changed, ctx) { if(changed.name) { set_data(t1, ctx.name); } }

Na implementação anterior, o compilador Vue passou por todos os nós, incluindo os estáticos:

 function render(){ const children = []; for(let i = 0; i < 5; i++) { children.push(h('p', { class: 'text' }, i === 2 ? this.message : 'Lorem upsum')) } return h('div', { id: 'content' }, children) }

Nova estratégia de compilação de modelos

Na nova versão, o modelo é dividido em blocos:

O modelo é dividido em blocos
A estrutura dos nós dentro de cada bloco é completamente estática.
Para rastrear valores dinâmicos em um bloco, apenas uma matriz plana é necessária, onde eles são colocados

Com a nova estratégia, o desempenho depende diretamente da quantidade de conteúdo dinâmico, em vez do tamanho do modelo.

O Vue 3 será melhor adaptado a grandes projetos

Projetos grandes enfrentam os seguintes problemas ao usar o Vue:

Suporte TypeScript não perfeito
Componentes maciços e difíceis de suportar
Falta de um padrão simples para reutilizar código

Inicialmente, planejava-se adicionar classes para dar suporte ao TS. Mas a equipe Vue teve problemas:

Misturar adereços e outros atributos com isso é problemático
Decoradores para aulas ES6 no TC39 são instáveis

A equipe de Evan solicitou a ajuda de especialistas do TC39 e descobriu que uma implementação semelhante poderia entrar em conflito com plugins que misturam vários adereços e atributos no contexto do Vue.

Potencialmente, esses problemas podem ser resolvidos pelos decoradores, mas eles ainda estão em desenvolvimento.

API de composição

A equipe do Vue foi inspirada pelos ganchos do React e decidiu criar uma API semelhante. É opcional e está em desenvolvimento e discussão, portanto, alguns nomes podem mudar.
O principal conceito dessa alteração é organizar o código do componente de maneira mais lógica, dividindo-o em blocos semânticos. Você pode ler mais sobre a API de composição na documentação .

Um exemplo do uso do Vue 3. Um componente é dividido em funções lógicas, nas quais você pode usar ganchos de reatividade e ciclo de vida.

Importe os novos ganchos da API de composição:

 import { reactive, computed, onMounted } from '@vue/composition-api'; export default { setup() { const { state } = countAnimal("rabbit") const { getType, anotherState } = anotherCount() return { state, getType, anotherState } } }

A função countAnimal possui propriedades reativas count, animal e o método de incremento . Com um contador ímpar, o nome do animal muda. O contador inicia quando o componente está montado.

 function countAnimal(name) { const state = reactive({ count: 0, animal: computed(() => state.count % 2 ? name : 'bear') }) function increment() { setTimeout(() => { state.count++; increment() }, 1000) } onMounted(() => { increment() }) return { state } }

Criamos outra função anotherCount , que também contém o método de incremento e estado com o contador e o nome do animal. O método getType passa o nome do animal do modelo.

 function anotherCount() { const anotherState = reactive({ count: 0, animal: 'fox' }) function getType(name) { return name == 'bear' ? 'slow' : 'fast' } function increment() { setTimeout(() => { anotherState.count+=10; increment() }, 1000) } onMounted(() => { increment() }) return { getType, anotherState } }

O modelo exibe 2 contadores e 2 nomes de animais. O tipo de corrida varia de acordo com o nome do animal.

 <template> <div> <div>Count {{state.animal}}: {{ state.count }}</div> <div>{{state.animal}} runs {{getType(state.animal)}}</div> <div>Another: Count {{anotherState.animal}}: {{ anotherState.count }}</div> </div> </template>

Novos ganchos são usados na instalação sem quebrar a API antiga. Observe que onMounted refere-se a um gancho de ciclo de vida de um único componente.

Essa API tem várias vantagens:

Ganchos do ciclo de vida não se esfregam
Fonte clara de propriedades
Nenhuma instância de componente adicional é criada

Conclusão

As alterações mais importantes no Vue 3. estão listadas acima. A maioria das melhorias estará oculta sob o capô do código gerado pelo compilador.

Principais melhorias:

O código gerado é ideal para o compilador JS
Pacote gerado mais fácil
Redesenho dos componentes pai / filho graças ao algoritmo aprimorado de correção

O Vue se estabeleceu como uma das estruturas mais rápidas e ideais. A nova versão se tornará ainda mais rápida e fácil. O Vue 3 é excelente para a Web móvel e orientada para o desempenho de hoje. Comentários sobre futuras alterações podem ser deixados no RFC oficial (solicitação de comentários).
PS Obrigado por corrigir erros de digitação.

Vue 3 ficará mais rápido