Comparação entre vue3 e vue2 (versão xmind)

Um esboço geral foi listado.

1. Reescrever a lógica de implementação responsiva

Vue2 intercepta dados por meio de Object.defineProperty(), converte dados em formato getter/setter, chama a função getter ao acessar dados e chama a função setter ao modificar dados .

Defeito: não é possível detectar alterações em arrays e objetos

Referências:
Por que o vue2 não consegue detectar alterações em arrays e objetos?

O Vue3 implementa o proxy de dados com base no novo objeto Proxy do ES6 e opera nos dados de origem por meio do Reflect.Ele resolve o problema de que o Vue2 não pode rastrear a adição ou exclusão de atributos de dados. Além disso, o Proxy pode monitorar diretamente o array, sem precisar reescrever o método do array para interceptação como o Vue2 responsivo.

2. Substitua a API de opções pela API de composição

Falhas de opções

• Saltar repetidamente
  uma função geralmente requer a definição de atributos e métodos em diferentes itens de configuração do vue, que são relativamente dispersos e os requisitos são simples e claros; mas depois que os requisitos são complicados, haverá mais configurações, como watch, computered e provide. Este arquivo .vue também aumentará gradualmente, e um método pode conter de 10 a 20 métodos, e muitas vezes você não consegue dizer qual método corresponde a qual função. Ao manter um componente .vue com mais de 200 linhas e adicionar ou modificar um requisito, você precisa modificá-lo em dados, métodos e computados respectivamente, e a barra de rolagem se move para cima e para baixo repetidamente, o que é chamado de "salto horizontal repetido "

• A essência dos mixins e desses
  saltos horizontais repetidos está na organização em blocos de funções e na grande quantidade de código. Se conseguirmos controlar o código em uma tela, será resolvido naturalmente. A solução em vue2 é usar mixin para mixar. Por exemplo, extraímos um counter.js. Isso realmente divide o código, mas há um problema sério, ou seja, se você não abrir o counter.js, as propriedades de count e add on this no App.vue não saberão de onde vêm. não sei que é um mixin , ou a instalação global, ou a configuração Vue.prototype.count, a fonte dos dados é completamente vaga, a depuração vai te matar, isso também é um grande problema com a opção, isso é uma caixa preta, o count e double escrito no template, não sei de onde vem daqui .

• conflitos de nomenclatura mixin.

A API de composição no Vue3 é usada para resolver esse problema: por meio da combinação, o código espalhado em vários dados e métodos é recombinado e o código de uma função é mantido junto, e esses códigos podem ser divididos em funções separadamente.

3. Otimização de desempenho

3.1 Otimizando Vdoms

Toda vez que o Vue2 atualiza o diff, ele compara o valor total,
enquanto o Vue3 compara apenas os marcados, o que reduz muito o consumo de comparação de conteúdo não dinâmico .

3.2 sinalizador de patch para otimizar a árvore estática

O poder do sinalizador de patch é que, quando seu algoritmo diff atingir a função _createBlock, todos os nós estáticos serão ignorados e apenas os nós dinâmicos marcados serão comparados e ainda é válido sob o aninhamento de várias camadas. A aparência do sinalizador de patch melhorou muito o desempenho do Vdom do Vue3, especialmente ao direcionar componentes grandes.

3.3 Tremor da árvore

Simplificando, é remover o código inútil, mantendo o resultado do código em execução inalterado .

No Vue2, não importa quais funções usamos, elas acabam no código de produção. O principal motivo é que a instância do Vue é um singleton no projeto e o bundler não pode detectar quais propriedades desse objeto são usadas no código.

O código-fonte Vue3 apresenta o recurso de agitação da árvore para dividir a API global em blocos. Se você não usar alguns de seus recursos, eles não serão incluídos em seu pacote básico.

Por exemplo, se você quiser usar watch, você precisa importar { watch } de 'vue'. Se outros computados não forem usados, eles não serão empacotados para você reduzir o tamanho.

4. Novos componentes e suporte de escrita

• Suporta renderização de escrita JSX
• Adicionar Suspense
• Suporta escrita múltipla de v-model
• Adicionar teletransporte

5. Ciclo de vida da página