Novidades do Vue 3

Compartilhe este conteúdo:

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.

Vue.createApp()

No Vue 2, quando queríamos criar um elemento data, methods ou função computada precisávamos criar uma nova instância do Vue:

new Vue({
  data: {...},
  methods: {...},
  computed: {...}
  ...
})

Porém, isso mudou no Vue 3. Agora temos diversas funções importadas do próprio Vue, como o createApp, que fazem alguns trabalhos que antes fazíamos manualmente.

import { createApp } from "vue";
Vue.createApp()

Na prática, será feito exatamente o mesmo que antes, mas de uma forma mais próxima do JavaScript, o que é ótimo. Mas não é só! Dentro da função precisamos colocar os elementos do componente e isso vai acontecer exatamente como era antes. Veja o exemplo:

import { createApp } from "vue";

const app = Vue.createApp({
  data() {
    return {
      ...
    }
  },
  methods: {...},
  computed: {...}
  ...
})

Dessa forma, o Vue fica semelhante a outros Frameworks, pois tem funções próprias para realizar diversas tarefas na aplicação, deixando o fluxo e leitura mais fáceis.

data()

A nova forma de declarar a instância do Vue transforma a propriedade data em uma função. Antes já era possível fazer assim, mas agora é obrigatório. Consequentemente, o código muda um pouco, por exemplo:

data() {
    return {
      ...
}

Mas é apenas uma mudança pontual, não precisa perder horas tentando entender.

app

Antes, quando queríamos usar alguma biblioteca externa ou acessar um componente, usávamos a partir da instância do Vue diretamente. No entanto, agora não é algo tão recomendado. Ao invés disso, devemos acessar a partir de uma constante (normalmente chamada app), por exemplo:

import { createApp } from "vue";
import App from './App.vue'

const app = Vue.createApp(App)

app.use()
app.component()
app.mount()

Como resultado, temos um controle bem mais claro e direto. Não precisamos mais chamar aquele trecho gigante só para dizer que o Vue vai usar uma rota ou que ele tem que montar algo na tela, basta chamar o app e a função logo depois. Isso não é obrigatório, mas é algo bem legal de se trabalhar.

Rotas

Da mesma forma como eu mostrei lá no createApp, aqui também vamos importar uma função que vai fazer a configuração inicial. Então, inicialmente precisamos fazer o seguinte:

import { createRouter } from "vue-router"

Agora, vamos poder usar a função e atribui-la a uma constante chamada router

const router = createRouter()

Precisamos colocar a configuração das rotas, e isso não é muito diferente do que já conhecemos do Vue 2, por exemplo:

const router = createRouter({
	routes: [
		{ path: '/', component: Home },
		{ path: '/about', component: About },
	],
})

A configuração de history também mudou um pouco, pois ela também vai ser uma função que vai fazer toda a configuração, basta importar e chamá-la dentro da criação da rota:

const router = createRouter({
	history: createWebHistory(),
	routes: [
		{ path: '/', component: Home },
		{ path: '/about', component: About },
	],
})

Dessa forma, o código completo fica assim:

import { createApp } from "vue"
import { createRouter, createWebHistory } from "vue-router"
import App from './App'

const router = createRouter({
	history: createWebHistory(),
	routes: [
		{ path: '/', component: Home },
		{ path: '/about', component: About },
	],
})

const app = createApp(App)
app.use(router)

De tal forma que, comparando com o Vue 2, dá para perceber que que não mudou muita coisa:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
	{ path: '/', component: Home },
	{ path: '/about', component: About }
  ]
})

Vuex – Criando Store

A maneira clássica de se criar uma store no Vuex é a seguinte:

const store = new Vuex.Store({
//Configuração Store (getters, mutations, actions, state e etc)
})

new Vue({
	store: store
}).$mount('#app')

Já no Vue 3, faremos como apresentado até agora, ou seja, vamos importar uma função responsável e apenas configurá-la. Portanto, o primeiro passo é importar a função:

import { createStore } from "vuex"

Em seguida, criaremos uma constante que vai receber a função. Para ficar mais claro, nomearei a função de store.

const store = createStore()

Essa é a forma básica, mas ainda precisamos passar a configuração. Isso é bom, porque funciona como as rotas. O que já existe é funcional, então vamos colocar nossos getters, mutations, actions e tudo mais lá dentro. O código completo fica assim:

import { createApp } from 'vue'
import { createStore } from 'vuex'

import App from './App.vue'

const store = createStore({
//Configuração Store (getters, mutations, actions, state e etc)
})

const app = createApp(App)
app.mount('#app')

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.

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 APPI Company estamos muito ansiosos e animados para essa nova versão, que irá ajudar todos nós a criar aplicações Web incríveis!

Conclusão

Esses foram as mudanças entre Vue 2 e Vue 3 que eu considero mais importantes. Voltando a pergunta do início… “Com a chegada do Vue 3 vou precisar reaprender tudo que eu sei?”.

A resposta é sim. Apesar de muita coisa ter sido alterada, a estrutura base permanece a mesma e usa dos mesmos conceitos, e se você sabe JavaScript provavelmente ficou melhor ainda, pois a maneira de criar tudo se aproxima muito mais da linguagem mais pura.

Espero que tenham entendido o que passei aqui e fiquem atentos a todas as nossas plataformas para mais conteúdos legais como esse 😉

Blog

Novidades do Vue 3