Em 2019, a popularidade do framework Vue cresceu incrivelmente. O número de downloads semanais do Vue dobrou: no ano passado foram 600 mil e agora são 1,2 milhão. A tão esperada terceira versão do Vue, a próxima iteração da estrutura, será lançada em algum momento no primeiro trimestre de 2020.
No Vue 3.0. muitos novos recursos estão planejados. Esses novos recursos visam aumentar a eficiência dos programadores, melhorar a sintaxe e otimizar o desempenho do sistema. Eu, como a pessoa que apóia a Vue, me esforço para estar pronto para usar as inovações imediatamente após elas surgirem.
Aqui reuni algumas dicas úteis para quem deseja se preparar para o advento do Vue 3.0. Espero que aqueles que seguem essas dicas possam se acostumar com as novas condições muito rapidamente.
1. Confira os recursos mais recentes do Vue 3.0.
Obviamente, não se pode preparar a chegada de algo completamente desconhecido. É por isso que é importante se familiarizar com as
alterações no Vue 3.0. Aqui está o que eu recomendo prestar atenção especial a:
- A API Composition permite organizar melhor o código do componente.
- O suporte ao TypeScript ajuda, entre outras coisas, a simplificar a gravação de código devido a mecanismos de conclusão de entrada.
- Renderização acelerada , obtida pela introdução de muitas otimizações na estrutura que aumentam seu desempenho.
- Aumentando propriedades estáticas , eliminando a necessidade de recriar elementos estáticos.
- Trabalhar com objetos observáveis usando objetos proxy ajuda a melhorar o desempenho e expandir os recursos para trabalhar com objetos reativos.
Além disso, aconselho a assistir a
esse desempenho de Evan Yu em relação ao dispositivo Vue 3.0. Esta apresentação permite que você entenda melhor as idéias que estão por trás da estrutura.
Em geral, é definitivamente importante saber exatamente o que aparecerá na nova versão do framework, o que mudará. O fato é que isso pode afetar a maneira como os programadores planejam a estrutura de seus projetos atuais. Especialmente nos casos em que se trata de novos projetos. Os novos projetos do Vue que estão sendo criados agora e serão criados em um futuro próximo devem ser feitos levando em consideração sua transferência para o Vue 3.0. Graças a isso, essa transição não se tornará um pesadelo.
2. Comece a aprender TypeScript
Uma das mudanças mais comentadas esperadas no Vue 3.0. - Este é o suporte ao TypeScript. A base de código do Vue está sendo reescrita no TypeScript. Isso dará aos desenvolvedores a oportunidade de usar dicas de tipo e ferramentas de conclusão de código em seu IDE.
É importante observar que isso não significa que todos precisem absolutamente mudar para o TypeScript. Os projetos do Vue ainda podem ser escritos em JavaScript. Porém, o uso do TypeScript aumenta a velocidade e a qualidade do código.
TypeScript (TS) é um superconjunto de JavaScript. Esta é uma linguagem, o código escrito no qual é compilado em JavaScript (JS). A diferença entre TS e JS é que o TypeScript permite especificar tipos de variáveis. Erros no código associado aos tipos podem ser detectados no estágio de compilação. Aqui estão alguns trechos de código da
documentação do TypeScript. Um deles está escrito em TypeScript, o outro em JavaScript.
Aqui está o código JS:
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
E aqui está o código TS:
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
Observe que no código TS há indicações de tipos de entidade. A passagem da função TS
greeter não é uma string, mas, por exemplo, uma matriz, resultará em uma mensagem de erro ao tentar compilar o código TS.
Se você quiser aprender TypeScript -
aqui está - alguns bons recursos. De fato, há um grande número de fontes de informação sobre TS. Entre eles, você pode encontrar exatamente o que precisa.
3. Aprenda os recursos do padrão Vue
Vue 3.0. inclui muitas melhorias em relação à renderização. Isso inclui aumentar elementos estáticos e melhorar o trabalho com árvores de renderização e até a capacidade de escrever seus próprios métodos de renderização.
Para tirar o máximo proveito do que o Vue 3.0 oferece, você definitivamente precisa dominar perfeitamente os modelos do Vue. Talvez, naturalmente, a melhor fonte de conhecimento sobre modelos seja a
documentação oficial do Vue.
Além disso, uma compreensão de como o mecanismo para elevar elementos estáticos funciona e como as árvores de renderização de blocos são organizadas pode ajudar a aumentar a eficiência do desenvolvimento de seus próprios modelos. Criar elementos estáticos é um mecanismo cuja operação leva ao fato de que os elementos estáticos não são recriados toda vez que a página é exibida. Em vez disso, os mesmos elementos são usados constantemente.
As árvores de renderização, consistindo de blocos, ajudam a simplificar o monitoramento de objetos reativos, reduzindo o número de operações executadas durante a renderização.
Usando blocos para formar uma árvore de renderização4. Comece com a API Composition
Uma das inovações mais quentes (e mais controversas) do Vue 3.0. É a API de composição. O Vue 2 agora usa as opções da API. Ao usá-lo, o código é distribuído por componente (dados, métodos, propriedades calculadas etc.).
Graças à nova API, todo o código será agrupado. Isso melhorará sua legibilidade e simplificará a extração e reutilização da funcionalidade.
Composição da APINovos mecanismos funcionam fornecendo acesso direto ao sistema de reatividade do núcleo Vue, que permite aos desenvolvedores controlar exatamente o que está sendo monitorado. Além disso, um novo método
setup() é introduzido, chamado imediatamente após
beforeCreate() e imediatamente antes de
created() .
O mais importante é que
a API Composition esteja disponível agora, para que já possa ser usada em projetos existentes.
5. Atualize o conhecimento do ciclo de vida do Vue
Na seção anterior, a API Composition era uma nova maneira de adicionar funcionalidade aos componentes. O fato de o método do ciclo de vida do componente
setup() ser chamado antes do método
created() indica que o
setup() não tem acesso aos dados do componente, seus métodos ou propriedades calculadas.
Agora não está totalmente claro como estão os outros novos recursos do Vue 3.0. estará relacionado ao ciclo de vida do componente. Mas, independentemente disso, quem quiser começar a usar o Vue 3.0, produtivamente o mais rápido possível, deve atualizar seus conhecimentos sobre os
métodos de ciclo de vida do Vue. Ou seja, vale a pena prestar atenção quando determinadas propriedades estão disponíveis, em que ordem os métodos são chamados e assim por diante.
Ciclo de vida do VueSumário
Como resultado, gostaria de dizer que alguém que deseja aprender rapidamente novas tecnologias simplesmente vale a pena aprender. Vale a pena pagar o máximo de tempo possível. A equipe de desenvolvimento do Vue definitivamente deixou claro para a comunidade qual é a estrutura do Vue 3.0. foi criado de maneira a facilitar a transição para aqueles que já usam o Vue. Portanto, seria errado pensar dessa maneira: "O Vue 3 será lançado, esperarei o lançamento e depois descobriremos". "Entender" é melhor com antecedência. Espero que o que foi discutido neste artigo ajude todos a se prepararem adequadamente para a reunião do Vue 3.0.
Caros leitores! O que você espera do Vue 3.0.?
