Entre muitas novidades, o Vue 3 está disponibilizando uma nova API para criação de componentes. Ela não introduz novos conceitos no Vue, mas expõe os principais recursos, como criar e observar os estados reativos como funções independentes. Isso é extremamente útil para desenvolvedores de todos os níveis.
Options API e Composition API
No Vue 2, os componentes criados com a Options API são baseados em objetos. No Vue 3, foi adicionado um conjunto de APIs, chamado Composition API que é baseado em funções. Isso é principalmente bom para resolver dois problemas que eram encontrados na utilização do Vue em projetos muito grandes.
Em componentes grandes que encapsulam várias tarefas lógicas, você deseja agrupar código por recurso, mas a API Options dividia esse código (entre hooks de ciclo de vida etc.) afetando negativamente a legibilidade do código. Em segundo lugar, você deseja reutilizar a lógica em projetos de larga escala e, no Vue 2, soluções como mixins não tratam muito bem esse problema.
O Vue 3 veio para resolver esses problemas com uma nova API. Essa API coexistirá com a Options API, não substituindo-a. Você continuará criando componentes da maneira que está acostumado, sem encontrar nenhum problema. Mas você poderá também criar com a Composition API, que fornece recursos mais flexíveis de organização e reutilização de código e lógica. A nova API pensou em levar o Vue adiante como uma estrutura, reduzindo a visão de que o Vue opera “magicamente” por trás dos panos.
Composition API
A Composition API já está disponível como um plug-in para você testá-la.
No Vue 2, a reatividade foi alcançada com o uso de getters e setters do Object.defineProperty, causando algumas limitações. No Vue 3, a reatividade é realizada por meio de proxies, um recurso introduzido no JavaScript ES6.
O Vue oferece APIs independentes que permitem criar, observar e reagir a alterações de estado.
Você pode criar um objeto da seguinte maneira:
import { reactive } from 'vue';
const state = reactive ({ count: 0 });
Você terá acesso às APIs que permitirão injetar hooks dinamicamente em uma instância do Vue. Os métodos de registro do ciclo de vida podem ser utilizados no método setup(), que é o ponto de entrada em que todas as funções de composição são chamadas. Por exemplo:
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log("O componente está montado.");
})
}
}
As funções que usam essas APIs podem ser importadas para um componente, permitindo que o componente execute várias tarefas lógicas com código reutilizável e legível.
Gostou desta notícia? Confira as mais novas funções no link de referência!
Referência: https://alligator.io/vuejs/whats-coming-in-vue-3/