De uma biblioteca javascript a um framework, a jornada do Vue é impressionante, especialmente quando você considera como ele ainda mantém sua natureza leve. Existem vários recursos que o Vue3 oferece, incluindo o Pinia, que permite um gerenciamento de estado mais fácil, bem como uma cadeia de ferramentas de compilação que funciona no Vite. Se você deseja atualizar seus aplicativos para o Vue3 ou simplesmente deseja experimentar a estrutura, compilamos tudo o que você precisa saber sobre o Vue3 aqui!
O que é Vue3?
Antes de entrarmos nas mudanças que você verá no Vue3, vamos primeiro dar uma olhada no que é o Vue.js e seus componentes principais:
Vue
Vue.js é uma estrutura JavaScript front-end de código aberto que pode ser usada para criar interfaces de usuário. A estrutura oferece uma abordagem de codificação declarativa e baseada em componentes que auxilia no desenvolvimento rápido de exibições do usuário. Ele pode ser usado para desenvolver interfaces básicas ou complicadas e é construído sobre HTML, CSS e JavaScript padrão do setor. As razões para a popularidade do Vue.js e a grande base de usuários do Vue.js são sua sintaxe amigável ao programador, facilidade de uso e documentação bem definida.
Como mencionado acima, o Vue.js é construído com base em duas características principais:
A renderização declarativa permite que o usuário defina a saída HTML de forma declarativa, dependendo do estado do JavaScript. O Vue.js expande o HTML normal com a ajuda da sintaxe do modelo.
Reatividade - O Vue.js monitora ativamente o estado do JavaScript e, quando modificado, atualiza rapidamente o DOM.
Vue3.0
Engenheiros que estão usando o Vue 2 para codificar agora precisam atualizar para o Vue3. Isso ocorre porque ele possui novos recursos que tornam o design de componentes legíveis e consistentes muito mais fáceis e métodos melhores para organizar nossos aplicativos. O Vue3 é mais fácil de usar, mais curto e mais simples de manter. Alguns dos recursos notáveis do Vue3 são Teleport, Fragments e vários v-models.
A versão mais recente também se livrou dos filtros e possui variáveis CSS controladas por estado, além de um recurso experimental de suspense. Ele também possui modificações de nomenclatura de ciclo de vida e alterações de componentes de arquivo único.
O Vue3 foi lançado?
A versão mais recente do Vue disponível - Vue3, foi anunciada inicialmente em meados de 2018 e lançada oficialmente em setembro de 2020. O Vue3.0 foi declarado como a versão padrão oficial do framework javascript progressivo em 7 de fevereiro de 2022.
O que há de novo no Vue3?
As mudanças mais interessantes para esperar no Vue3 são:
Fornecer/injetar
O Vue 2 permitia que os usuários passassem dados como strings, arrays, objetos e muito mais através de props no código. Esses dados podem ser facilmente passados de um elemento pai para seus elementos filho. No entanto, o uso de props tornou mais desafiador enviar dados do elemento pai para um elemento filho profundamente aninhado. Como resultado, os desenvolvedores tiveram que usar a Vuex Store e o Event Hub. O Vue 2.2.0 também incluía fornecer/injetar, mas não era recomendado para ser usado no código geral do programa.
No entanto, usando o combo fornecer/injetar aprimorado no Vue3, podemos passar dados de forma mais rápida e organizada. Como o nome sugere, utilizamos para fornecer dados acessíveis de um elemento pai para qualquer um de seus componentes filho, independentemente de quão profundamente aninhados esses elementos filho estejam. Aqui, podemos usar fornecer como objetos ou como funções.
teleporte
Com base na lógica do aplicativo que você deseja criar, seus componentes podem ser exibidos em locais diferentes de onde você deseja que sejam exibidos. Por exemplo, você pode querer criar um pop-up que deve aparecer e ocupar a tela inteira. Para superar isso, podemos usar o atributo position desses componentes em CSS, mas com o Vue3, os desenvolvedores também podem usar o Teleport.
O Teleport permite que os programadores peguem um elemento de seu contêiner inicial no qual ele está encapsulado e os movam para qualquer componente já existente na página em que estão em uso. Por exemplo, você pode realocar um elemento de cabeçalho do #app div para o cabeçalho. Lembre-se de que você só pode usar o Teleport para mover elementos para componentes de código que existam fora do Vue DOM.
Fragmentos
É difícil ter vários componentes raiz em um modelo de arquivo no Vue 2. Os programadores começaram a incluir todos os componentes em um componente pai como uma solução para o mesmo. Às vezes, os programadores podem precisar renderizar um elemento sem um contêiner envolvido nele. Os engenheiros agora podem ter vários itens em seu arquivo de modelo raiz graças ao Fragments, que é um recurso adicionado ao Vue3.
API Global Vue
Você pode ter encontrado frequentemente o Vue.component ou Vue.use no arquivo main.js de um aplicativo Vue. Eles são chamados de APIs globais e existem muitos métodos desse tipo no Vue 2. Aqui, se você tiver várias instâncias do seu aplicativo, todas elas serão colocadas no topo do Vue. É difícil limitar uma funcionalidade específica a uma única instância do aplicativo.
O Vue3 resolve esse problema introduzindo uma nova API global chamada createApp. Com este método, você pode obter uma nova instância de um aplicativo Vue. Todas as APIs relacionadas ao Vue 2.x serão transferidas para instâncias de aplicativos separadas. Isso permite que cada instância de seu aplicativo tenha funções exclusivas a ele sem interromper outras instâncias que já estão em uso.
API de eventos
Além de usar o Vuex Store, o uso do Event Bus é um dos métodos mais populares que os programadores usam para passar dados entre elementos que não compartilham um contexto pai-filho. No entanto, códigos como $on, $off e $once foram todos deletados no Vue3. Mas $emit ainda está acessível, pois os elementos filhos devem emitir eventos para seus elementos pai. Uma solução para isso seria usar fornecer/injetar.
Cadeia de ferramentas de construção com tecnologia Vite
Projetado por Evan You, o criador do Vue, o Vite é uma cadeia de ferramentas de suporte Vue SFC de alto nível, leve e rápida de criar. O Vite agora é o mecanismo por trás da configuração de compilação padrão do Vue3. O empacotador de módulos @vue-cli/service , que é construído em cima do webpack, envolverá todo o seu aplicativo Vue na inicialização, nos hot reloads e na compilação. O Vite, por outro lado, pegará a sintaxe ES Import do código do seu programa e permitirá que o navegador analise cada importação antes de enviar uma solicitação HTTP.
A mudança está sendo feita principalmente por razões de velocidade. O servidor é iniciado imediatamente, pois emprega suporte nativo do navegador para componentes JavaScript e é muito mais rápido.
Sintaxe da API de composição
A API de opções foi usada para criar estados e lógica de elementos. A API de composição foi lançada pelo Vue3 como substituta da mesma. É apenas uma coleção de APIs que nos permite criar elementos Vue sem definir opções usando métodos importados.
A API de composição contém as seguintes APIs:
API de reatividade - Por exemplo, ref() e reactive(). Ele pode construir diretamente o estado reativo, o estado calculado e os observadores usando isso.
Ganchos de ciclo de vida - Por exemplo, onMounted() e onUnmounted(). Podemos nos conectar ao ciclo de vida do elemento usando ganchos de ciclo de vida.
Injeção de dependência - Por exemplo, provide() e inject(). A utilização do sistema de injeção de dependência do Vue com APIs de Reatividade é possível pela injeção de dependência.
Prós de usar APIs de composição
As principais vantagens de usar APIs de composição sobre a API de opções são:
- Um elemento não é mais necessário com o Vue3 para gerar um estado reativo.
- Ao adicionar vários atributos reativos, a configuração em elementos Vue.js pode ficar inchada. Pode ser útil ter essas variáveis reativas abstraídas em arquivos javascript separados por causa disso.
- O principal benefício da API de composição é que ela possibilita a reutilização de lógica clara e eficaz na forma de métodos Composable. Ele aborda todos os problemas com mixins, o principal método de reutilização de lógica na API de opções.
- Você pode digitar o código na API de composição com inferência de tipo completa.
- Os programas que você escreve na API de composição são mais eficientes e os nomes das variáveis podem ser reduzidos. Isso reduz a sobrecarga.
- Você pode compartilhar melhor o código do seu programa com a API de composição.
Pinia
Pinia é uma ferramenta leve de gerenciamento de estado para Vue.js. Ele nos permite compartilhar um estado entre elementos e páginas. Ele cria uma estrutura de gerenciamento de estado totalmente tipada e amigável ao usuário usando o novo conceito de reatividade no Vue3. Esta é agora a nova biblioteca de controle de estado padrão do Vue3.
Pinia serviu inicialmente como um estudo sobre o potencial do Vuex. Por muito tempo, Vuex foi o sistema de gerenciamento de estado sugerido para Vue, mas com Vue3, Pinia é o sistema recomendado para gerenciamento de estados na documentação oficial. Atualmente, o Vuex está em modo de manutenção. Embora continue a funcionar, nenhum novo recurso será adicionado. O uso de Pinia é recomendado para novos aplicativos.
Por que Pinia?
Pinia é muito leve, chegando a apenas 1KB. Além disso, ele se integra às ferramentas de desenvolvimento Vue.js para melhorar sua experiência de codificação em Vue 2 e Vue3. Como o Pinia infere todos os seus tipos de dados, ele também pode oferecer preenchimento automático completo e preciso em javascript. Pinia também é modular por design, fácil de usar e expansível. No geral, Pinia parece ser leve, descomplicado e direto. Ele se assemelha a lidar com elementos e contém todas as ferramentas necessárias para programação dinâmica no Vue3.
O Vue 2 será descontinuado?
A última atualização menor do Vue 2 foi o Vue 2.7, lançado em julho de 2022. O Vue 2 está atualmente em modo de manutenção. Embora nenhum recurso adicional seja enviado, ele ainda receberá correções de bugs e patches de segurança cruciais por 18 meses. Até o final de 2023, o Vue 2 será descontinuado.
Migração do Vue 2
Com base no seu software, mudar para o Vue3 pode não valer a pena se você estiver trabalhando em um projeto extremamente grande usando o Vue 2. Use o Vue3 se os problemas de eficiência persistirem apesar de seus melhores esforços de otimização.
Se você deseja ou não migrar seu aplicativo para o Vue3, depende de seu tamanho e complexidade. A maioria das sintaxes e técnicas do Vue 2 são as mesmas do Vue3. No entanto, se você quiser usar algumas das alterações mencionadas acima, a migração seria uma ideia melhor.
Vue.js no projeto AppMaster
A plataforma AppMaster usa o framework VueJS, ou melhor, a terceira versão do framework, para criar um aplicativo front-end para nossos usuários. O Vue 3 é usado para criar portais de administração, painéis e clientes, e toda a interface do AppMaster studio também é feita usando o framework VueJS.
Usamos uma abordagem especial chamada micro-frontends ou microsserviços de front-end para poder desenvolver nosso produto de forma rápida e eficiente; por exemplo, cada editor de modelo de dados e editor de processo de negócios é um aplicativo de front-end completamente separado em nossa plataforma. Isso nos permite desenvolver de forma muito rápida e independente do ponto de vista da equipe de desenvolvimento, o que aumenta a velocidade geral do nosso produto. Todas essas vantagens que nossos clientes podem obter usando nossos aplicativos.
No futuro, além do modo de aplicativo de página única SPA, adicionaremos o modo SSR (server-side rendering), que permitirá que nossos clientes criem não apenas painéis administrativos e portais personalizados, mas também sites completos com muito alta otimização de SEO.
Sobre sem código
Um dos elementos-chave que influenciam a democratização da codificação é a abordagem de desenvolvimento sem código . Hoje em dia, um número maior de pessoas pode acessar a programação em geral com a ausência de codificação. Ele simplifica o design da Web, o desenvolvimento de aplicativos móveis e o desenvolvimento da Web responsivo.
AppMaster está entre os aplicativos que podem ser usados para criar código-fonte automaticamente. Você pode visualizar e inspecionar o código a qualquer momento. Com o AppMaster, você tem a opção de personalizar as informações do projeto usando a linguagem do computador. Também permitimos que as pessoas exportem o código, se quiserem. Esta é uma garantia de que você tem total controle e propriedade sobre o aplicativo em que está trabalhando com o AppMaster.
Conclusões
Se você quiser uma explicação mais detalhada de como o Vue3 é diferente do Vue 2, junto com trechos de código, você pode consultar a documentação oficial do Vue.js. Mencionamos a maioria das principais mudanças que você deve estar ciente. É importante que você fique atento às atualizações do Vue3 se estiver interessado em construir aplicativos com esse framework.
