Vue 3 está chegando! Conheça os principais recursos da nova versão

O Vue.js se tornou um dos frameworks em JavaScript mais usados no momento, e agora a sua nova versão (3.0) está chegando, junto com algumas novidades bem interessantes. Iremos falar sobre algumas delas neste artigo.

Composition API - A principal novidade

A principal nova funcionalidade que será implementada no Vue 3 será a Composition API. Essa API irá representar e facilitar a maneira de criarmos novas instâncias Vue. Nós estamos acostumados a usar as opções ou propriedades que o Vue nos oferece. Veja alguns exemplos:

1 - data. Propriedade que irá conter os dados do objeto.

2 - methods. Propriedade que irá conter as funções, ou métodos, que serão usados na instância Vue.

3 - computed. Propriedade que irá conter as computed properties de nosso código.

Essas são apenas algumas propriedades que o Vue possui e nos deixa à disposição, e elas funcionam muito bem. Contudo, com a nova versão do Vue, não precisaremos declarar essas opções, elas não serão mais necessárias. Teremos apenas um método dentro da instância Vue, onde tudo ficará armazenado.

Estamos falando do método setup(). Ele possuirá todas as variáveis, dados e métodos que desejamos e retornará essas informações para nosso template. Os nossos métodos serão criados como funções de fato, o que deixará nosso código mais próximo à sintaxe nativa da linguagem JavaScript.

O método setup() será executado antes de qualquer outro, o que é muito interessante. Se lembrarmos do conceito do Ciclo de Vida da instância Vue, iremos recordar de métodos como beforeCreate(), beforeMount() ou created(). Esses métodos são executados antes da instância Vue estar pronta para ser usada em nosso navegador. Mesmo assim, o método setup() será executado primeiro que todos eles. Devido a isso, ele não possuirá acesso à referência do próprio objeto, ou seja, ao this.

Com essa mudança e a introdução desse novo método, o Vue ficará ainda mais fácil de usar, pois tudo ficará centralizado em um único lugar. Além disso, conforme a nossa aplicação for crescendo, não iremos “perder o controle” dela por assim dizer, talvez ficando confusos com nossos códigos. Com a Composition API o Vue ficou ainda mais robusto.

Ela irá nos ajudar também na reutilização de nosso código. Estamos acostumados a usar mixins para compartilhar dados e funções úteis entre os componentes. Todavia, com a Composition API, poderemos fazer isso de maneira muito mais simples, por exportar e importar funções com JavaScript nativo, de maneira bem mais fácil. Podemos dizer assim que a Composition API também representa uma evolução dos mixins.

Lembrando apenas um detalhe importante: essa nova API é apenas uma alternativa para o nosso código, mas seu uso não é obrigatório. A versão 3 é compatível com as versões anteriores do Vue, como a versão 2. Isso significa que podemos usar a sintaxe antiga e nosso código funcionará sem problemas. Entretanto, se usarmos a nova sintaxe, também não iremos nos arrepender.

Outras novidades

A Composition API é a principal novidade da versão 3, mas não é a única. Uma novidade muito interessante que poderá chegar na versão 3 do Vue é a possibilidade de usar mais de um v-model no mesmo elemento. Sabemos que essa diretiva só pode ser aplicada uma única vez em um elemento. Contudo, poderemos adicionar essa diretiva múltiplas vezes se desejarmos. Vai ser interessante analisar como isso afetará a nossa aplicação.

Se você é fã do TypeScript, com certeza irá gostar da próxima novidade, pois na versão 3 do Vue haverá suporte para esse superset JavaScript incrível.

Haverá também a adição de alguns conceitos que nos faz lembrar de uma frase bem famosa que está associada ao Vue. Já ouviu a frase: “O Vue junta o que há de melhor no React e Angular”? Muitos recursos do Vue já na versão 2 eram similares a conceitos interessantes do React e Angular, como o Virtual DOM e a componentização. E na versão 3 haverá a introdução de outros recursos que já são usados principalmente no React. Alguns exemplos deles são os conceitos de Suspense, os Portals e os Fragments. Eu considero o último citado como muito interessante, pois ele nos ajudará a resolver um pequeno “problema” que tínhamos ao criar componentes: não podemos definir dois elementos raiz em um componente. Para resolver essa questão, geralmente adicionávamos uma <div> em volta de todo o conteúdo do componente. Com os Fragments, isso não será mais necessário.

A versão 3 do Vue ainda não está disponível para usarmos de fato. Mas, se desejar, você pode baixar essa versão em seu estágio alpha clicando aqui. Você pode fazer seus testes e entender como essa nova versão irá influenciar nossos projetos.

As novidades que analisamos juntos são muito interessantes e com certeza irão levar o Vue.js para um novo nível em sua estrutura. A verdade é que a cada dia que passa, Evan You e sua equipe estão tornando o Vue um framework cada vez mais fácil de implementar e simples, mas ao mesmo tempo cada vez mais poderoso. Nós da Hcode estamos muito ansiosos e animados para essa nova versão, que irá ajudar todos nós a criar aplicações Web incríveis!

Até o próximo artigo :)