VueJS - Visão geral
VueJSé uma estrutura JavaScript progressiva de código aberto usada para desenvolver interfaces da web interativas. É um dos famosos frameworks usados para simplificar o desenvolvimento web. VueJS se concentra na camada de visualização. Ele pode ser facilmente integrado em grandes projetos para desenvolvimento de front-end sem quaisquer problemas.
A instalação do VueJS é muito fácil de começar. Qualquer desenvolvedor pode facilmente compreender e construir interfaces da web interativas em questão de tempo. VueJS é criado por Evan You, um ex-funcionário do Google. A primeira versão do VueJS foi lançada em fevereiro de 2014. Recentemente, atingiu 64.828 estrelas no GitHub, tornando-o muito popular.
Características
A seguir estão os recursos disponíveis com VueJS.
DOM Virtual
O VueJS faz uso de DOM virtual, que também é usado por outros frameworks como React, Ember, etc. As alterações não são feitas no DOM, em vez disso, uma réplica do DOM é criada e está presente na forma de estruturas de dados JavaScript . Sempre que qualquer alteração deve ser feita, ela é feita nas estruturas de dados JavaScript e esta é comparada com a estrutura de dados original. As mudanças finais são então atualizadas para o DOM real, que o usuário verá mudando. Isso é bom em termos de otimização, é menos caro e as alterações podem ser feitas em um ritmo mais rápido.
Ligação de dados
O recurso de vinculação de dados ajuda a manipular ou atribuir valores a atributos HTML, alterar o estilo, atribuir classes com a ajuda da diretiva de vinculação chamada v-bind disponível com VueJS.
Componentes
Os componentes são um dos recursos importantes do VueJS que ajudam a criar elementos personalizados, que podem ser reutilizados em HTML.
Manipulação de eventos
v-on é o atributo adicionado aos elementos DOM para ouvir os eventos em VueJS.
Animação / Transição
O VueJS fornece várias maneiras de aplicar a transição a elementos HTML quando eles são adicionados / atualizados ou removidos do DOM. VueJS tem um componente de transição embutido que precisa ser envolvido em torno do elemento para efeito de transição. Podemos facilmente adicionar bibliotecas de animação de terceiros e também adicionar mais interatividade à interface.
Propriedades Computadas
Esta é uma das características importantes do VueJS. Isso ajuda a ouvir as alterações feitas nos elementos da interface do usuário e executa os cálculos necessários. Não há necessidade de codificação adicional para isso.
Modelos
O VueJS fornece modelos baseados em HTML que vinculam o DOM aos dados da instância do Vue. O Vue compila os modelos em funções virtuais de renderização do DOM. Podemos fazer uso do modelo das funções de renderização e, para isso, temos que substituir o modelo pela função de renderização.
Diretivas
O VueJS tem diretivas integradas, como v-if, v-else, v-show, v-on, v-bind e v-model, que são usadas para executar várias ações no front-end.
Observadores
Os observadores são aplicados aos dados que mudam. Por exemplo, elementos de entrada de formulário. Aqui, não precisamos adicionar eventos adicionais. O Watcher cuida de qualquer alteração de dados, tornando o código simples e rápido.
Encaminhamento
A navegação entre as páginas é realizada com a ajuda do vue-router.
Leve
O script VueJS é muito leve e o desempenho também é muito rápido.
Vue-CLI
O VueJS pode ser instalado na linha de comando usando a interface de linha de comando vue-cli. Ajuda a construir e compilar o projeto facilmente usando o vue-cli.
Comparação com outras estruturas
Agora vamos comparar o VueJS com outros frameworks, como React, Angular, Ember, Knockout e Polymer.
VueJS v / s React
Virtual DOM
Virtual DOM é uma representação virtual da árvore DOM. Com o DOM virtual, um objeto JavaScript é criado, o mesmo que o DOM real. Sempre que uma mudança precisa ser feita no DOM, um novo objeto JavaScript é criado e as mudanças são feitas. Posteriormente, ambos os objetos JavaScript são comparados e as alterações finais são atualizadas no DOM real.
O VueJS e o React usam DOM virtual, o que o torna mais rápido.
Template v/s JSX
VueJS usa html, js e css separadamente. É muito fácil para um iniciante entender e adotar o estilo VueJS. A abordagem baseada em modelo para VueJS é muito fácil.
O React usa a abordagem jsx. Tudo é JavaScript para ReactJS. HTML e CSS fazem parte do JavaScript.
Installation Tools
React usa create react app e VueJS usa vue-cli /CDN/npm. Ambos são muito fáceis de usar e o projeto é configurado com todos os requisitos básicos. O React precisa do webpack para a construção, enquanto o VueJS não. Podemos começar com a codificação VueJS em qualquer lugar no jsfiddle ou codepen usando a biblioteca cdn.
Popularity
React é mais popular do que VueJS. A oportunidade de trabalho com React é mais do que VueJS. Há um grande nome por trás do React, ou seja, Facebook, o que o torna mais popular. Visto que React usa o conceito central de JavaScript, ele usa as melhores práticas de JavaScript. Quem trabalha com React definitivamente é muito bom com todos os conceitos de JavaScript.
VueJS é uma estrutura em desenvolvimento. Atualmente, as oportunidades de trabalho com VueJS são menores em comparação com React. De acordo com uma pesquisa, muitas pessoas estão se adaptando ao VueJS, o que pode torná-lo mais popular em comparação ao React e ao Angular. Há uma boa comunidade trabalhando nos diferentes recursos do VueJS. O vue-router é mantido por esta comunidade com atualizações regulares.
VueJS pegou as partes boas do Angular e do React e construiu uma biblioteca poderosa. VueJS é muito mais rápido em comparação com React / Angular por causa de sua biblioteca leve.
VueJS v / s Angular
Similarities
O VueJS tem muitas semelhanças com o Angular. Diretivas como v-if, v-for são quase semelhantes a ngIf, ngFor de Angular. Ambos possuem uma interface de linha de comando para instalação e construção do projeto. VueJS usa Vue-cli e Angular usa angular-cli. Ambos oferecem ligação de dados bidirecional, renderização do lado do servidor, etc.
Complexity
Vuejs é muito fácil de aprender e começar. Conforme discutido anteriormente, um iniciante pode pegar a biblioteca CDN do VueJS e começar no codepen e jsfiddle.
Para o Angular, precisamos seguir uma série de etapas para a instalação e é um pouco difícil para iniciantes começar a usá-lo. Ele usa o TypeScript para codificação, o que é difícil para as pessoas que têm um background básico de JavaScript. No entanto, é mais fácil aprender para usuários pertencentes ao background de Java e C #.
Performance
Para decidir o desempenho, cabe aos usuários. O tamanho do arquivo VueJS é muito mais leve do que o Angular. Uma comparação do desempenho da estrutura é fornecida no seguinte linkhttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
Popularity
Atualmente, o Angular é mais popular do que o VueJS. Muitas organizações usam o Angular, o que o torna muito popular. As oportunidades de emprego também são mais para candidatos com experiência em Angular. Porém, a VueJS vem se firmando no mercado e pode ser considerada uma boa concorrente da Angular e da React.
Dependencies
O Angular oferece muitos recursos integrados. Temos que importar os módulos necessários e começar a usá-los, por exemplo, @ angular / animations, @ angular / form.
O VueJS não tem todos os recursos integrados do Angular e precisa depender de bibliotecas de terceiros para funcionar nele.
Flexibility
O VueJS pode ser facilmente mesclado com qualquer outro grande projeto sem problemas. Angular não será tão fácil começar a trabalhar com qualquer outro projeto existente.
Backward Compatibility
Tínhamos AngularJS, Angular2 e agora Angular4. AngularJS e Angular2 têm uma grande diferença. O aplicativo do projeto desenvolvido em AngularJS não pode ser convertido em Angular2 devido às diferenças principais.
A versão recente do VueJS é 2.0 e é boa com compatibilidade com versões anteriores. Ele fornece uma boa documentação, que é muito fácil de entender.
Typescript
Angular usa TypeScript para sua codificação. Os usuários precisam ter conhecimento de Typescript para começar a usar o Angular. No entanto, podemos começar com a codificação VueJS em qualquer lugar no jsfiddle ou codepen usando a biblioteca cdn. Podemos trabalhar com JavaScript padrão, que é muito fácil de começar.
VueJS v / s Ember
Similarities
Ember fornece a ferramenta de linha de comando Ember, ou seja, ember-cli para fácil instalação e compilação para projetos Ember.
O VueJS também possui uma ferramenta de linha de comando vue-cli para iniciar e construir projetos.
Ambos têm recursos como roteador, modelo e componentes que os tornam muito ricos como a estrutura de interface do usuário.
Performance
O VueJS tem melhor desempenho em comparação ao Ember. O Ember adicionou um mecanismo de renderização de brilho com o objetivo de melhorar o desempenho da re-renderização, que é um conceito semelhante ao VueJS e React usando DOM virtual. Porém, o VueJS tem um desempenho melhor quando comparado ao Ember.
VueJS v / s Knockout
O Knockout oferece um bom suporte ao navegador. É compatível com a versão anterior do IE, enquanto VueJS não é compatível com o IE8 e anteriores. O desenvolvimento do Knockout desacelerou com o tempo. Não há muita popularidade para o mesmo nos últimos tempos.
Por outro lado, o VueJS começou a ganhar popularidade com a equipe do Vue fornecendo atualizações regulares.
Polímero VueJS v / s
A biblioteca de polímeros foi desenvolvida pelo Google. É usado em muitos projetos do Google, como Google I / O, Google Earth, Google Play Music, etc. Ele oferece vinculação de dados e propriedades computadas semelhantes ao VueJS.
A definição do elemento personalizado do Polymer compreende JavaScript / CSS simples, propriedades do elemento, callbacks de ciclo de vida e métodos JavaScript. Em comparação, VueJS permite usar facilmente JavaScript / html e CSS.
O Polymer usa recursos de componentes da web e requer polyfills para navegadores, que não oferecem suporte a esses recursos. O VueJS não possui tais dependências e funciona bem em todos os navegadores do IE9 +.