VueJS - Panoramica
VueJSè un framework JavaScript progressivo open source utilizzato per sviluppare interfacce web interattive. È uno dei famosi framework utilizzati per semplificare lo sviluppo web. VueJS si concentra sul livello di visualizzazione. Può essere facilmente integrato in grandi progetti per lo sviluppo front-end senza problemi.
L'installazione di VueJS è molto facile da iniziare. Qualsiasi sviluppatore può facilmente comprendere e creare interfacce web interattive in una questione di tempo. VueJS è stato creato da Evan You, un ex dipendente di Google. La prima versione di VueJS è stata rilasciata nel febbraio 2014. Recentemente ha totalizzato 64.828 stelle su GitHub, rendendolo molto popolare.
Caratteristiche
Di seguito sono riportate le funzionalità disponibili con VueJS.
DOM virtuale
VueJS fa uso del DOM virtuale, che viene utilizzato anche da altri framework come React, Ember, ecc. Le modifiche non vengono apportate al DOM, ma viene creata una replica del DOM presente sotto forma di strutture dati JavaScript . Ogni volta che devono essere apportate modifiche, vengono apportate alle strutture dati JavaScript e quest'ultima viene confrontata con la struttura dati originale. Le modifiche finali vengono quindi aggiornate al DOM reale, che l'utente vedrà cambiare. Questo è positivo in termini di ottimizzazione, è meno costoso e le modifiche possono essere apportate a un ritmo più veloce.
Associazione dati
La funzione di data binding aiuta a manipolare o assegnare valori agli attributi HTML, cambiare lo stile, assegnare classi con l'aiuto della direttiva di binding chiamata v-bind disponibile con VueJS.
Componenti
I componenti sono una delle caratteristiche importanti di VueJS che aiuta a creare elementi personalizzati, che possono essere riutilizzati in HTML.
Gestione degli eventi
v-on è l'attributo aggiunto agli elementi DOM per ascoltare gli eventi in VueJS.
Animazione / Transizione
VueJS fornisce vari modi per applicare la transizione agli elementi HTML quando vengono aggiunti / aggiornati o rimossi dal DOM. VueJS ha un componente di transizione incorporato che deve essere avvolto attorno all'elemento per l'effetto di transizione. Possiamo facilmente aggiungere librerie di animazioni di terze parti e anche aggiungere più interattività all'interfaccia.
Proprietà calcolate
Questa è una delle caratteristiche importanti di VueJS. Aiuta ad ascoltare le modifiche apportate agli elementi dell'interfaccia utente ed esegue i calcoli necessari. Non è necessaria alcuna codifica aggiuntiva per questo.
Modelli
VueJS fornisce modelli basati su HTML che collegano il DOM con i dati dell'istanza di Vue. Vue compila i modelli nelle funzioni di rendering DOM virtuali. Possiamo utilizzare il template delle funzioni di rendering e per farlo dobbiamo sostituire il template con la funzione di rendering.
Direttive
VueJS ha direttive integrate come v-if, v-else, v-show, v-on, v-bind e v-model, che vengono utilizzate per eseguire varie azioni sul frontend.
Osservatori
Gli osservatori vengono applicati ai dati che cambiano. Ad esempio, gli elementi di input del modulo. Qui non dobbiamo aggiungere altri eventi. Watcher si occupa di gestire qualsiasi modifica ai dati rendendo il codice semplice e veloce.
Routing
La navigazione tra le pagine viene eseguita con l'aiuto di vue-router.
Leggero
Lo script VueJS è molto leggero e anche le prestazioni sono molto veloci.
Vue-CLI
VueJS può essere installato dalla riga di comando utilizzando l'interfaccia della riga di comando di vue-cli. Aiuta a costruire e compilare facilmente il progetto usando vue-cli.
Confronto con altri framework
Ora confrontiamo VueJS con altri framework come React, Angular, Ember, Knockout e Polymer.
VueJS v / s React
Virtual DOM
Virtual DOM è una rappresentazione virtuale dell'albero DOM. Con il DOM virtuale, viene creato un oggetto JavaScript che è lo stesso del DOM reale. Ogni volta che è necessario apportare una modifica al DOM, viene creato un nuovo oggetto JavaScript e vengono apportate le modifiche. Successivamente, entrambi gli oggetti JavaScript vengono confrontati e le modifiche finali vengono aggiornate nel DOM reale.
VueJS e React utilizzano entrambi DOM virtuale, il che lo rende più veloce.
Template v/s JSX
VueJS utilizza html, js e css separatamente. È molto facile per un principiante capire e adottare lo stile VueJS. L'approccio basato su modelli per VueJS è molto semplice.
React utilizza l'approccio jsx. Tutto è JavaScript per ReactJS. HTML e CSS fanno tutti parte di JavaScript.
Installation Tools
React utilizza create react app e VueJS utilizza vue-cli /CDN/npm. Entrambi sono molto facili da usare e il progetto è impostato con tutti i requisiti di base. React ha bisogno del webpack per la build, mentre VueJS no. Possiamo iniziare con la codifica VueJS ovunque in jsfiddle o codepen usando la libreria cdn.
Popularity
React è popolare rispetto a VueJS. L'opportunità di lavoro con React è più di VueJS. C'è un grande nome dietro React, cioè Facebook, che lo rende più popolare. Poiché, React utilizza il concetto di base di JavaScript, utilizza le migliori pratiche di JavaScript. Uno che lavora con React sarà sicuramente molto bravo con tutti i concetti di JavaScript.
VueJS è un framework in via di sviluppo. Attualmente, le opportunità di lavoro con VueJS sono inferiori rispetto a React. Secondo un sondaggio, molte persone si stanno adattando a VueJS, il che può renderlo più popolare rispetto a React e Angular. C'è una buona comunità che lavora sulle diverse funzionalità di VueJS. Il vue-router è mantenuto da questa comunità con aggiornamenti regolari.
VueJS ha preso le parti migliori da Angular e React e ha costruito una potente libreria. VueJS è molto più veloce rispetto a React / Angular grazie alla sua libreria leggera.
VueJS v / s angolare
Similarities
VueJS ha molte somiglianze con Angular. Direttive come v-if, v-for sono quasi simili a ngIf, ngFor di Angular. Entrambi hanno un'interfaccia a riga di comando per l'installazione del progetto e per crearlo. VueJS utilizza Vue-cli e Angular utilizza angular-cli. Entrambi offrono data binding bidirezionale, rendering lato server, ecc.
Complexity
Vuejs è molto facile da imparare e iniziare. Come discusso in precedenza, un principiante può prendere la libreria CDN di VueJS e iniziare con codepen e jsfiddle.
Per Angular, dobbiamo eseguire una serie di passaggi per l'installazione ed è un po 'difficile per i principianti iniziare con Angular. Utilizza TypeScript per la codifica che è difficile per le persone che provengono dal background JavaScript principale. Tuttavia, è più facile da imparare per gli utenti che appartengono a Java e in background C #.
Performance
Per decidere le prestazioni, spetta agli utenti. La dimensione del file VueJS è molto più leggera di Angular. Un confronto delle prestazioni del framework è fornito nel seguente collegamentohttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
Popularity
Al momento, Angular è più popolare di VueJS. Molte organizzazioni utilizzano Angular, rendendolo molto popolare. Le opportunità di lavoro sono anche maggiori per i candidati con esperienza in Angular. Tuttavia, VueJS sta prendendo il posto nel mercato e può essere considerato un buon concorrente per Angular e React.
Dependencies
Angular offre molte funzionalità integrate. Dobbiamo importare i moduli richiesti e iniziare con esso, ad esempio, @ angular / animations, @ angular / form.
VueJS non ha tutte le funzionalità integrate come Angular e deve dipendere da librerie di terze parti per lavorarci.
Flexibility
VueJS può essere facilmente unito a qualsiasi altro grande progetto senza problemi. Angular non sarà così facile iniziare a lavorare con qualsiasi altro progetto esistente.
Backward Compatibility
Avevamo AngularJS, Angular2 e ora Angular4. AngularJS e Angular2 hanno una grande differenza. L'applicazione del progetto sviluppata in AngularJS non può essere convertita in Angular2 a causa delle differenze principali.
La versione recente di VueJS è la 2.0 ed è compatibile con le versioni precedenti. Fornisce una buona documentazione, molto facile da capire.
Typescript
Angular usa TypeScript per la sua codifica. Gli utenti devono avere una conoscenza di Typescript per iniziare con Angular. Tuttavia, possiamo iniziare con la codifica VueJS ovunque in jsfiddle o codepen utilizzando la libreria cdn. Possiamo lavorare con JavaScript standard, che è molto facile da iniziare.
VueJS contro Ember
Similarities
Ember fornisce lo strumento della riga di comando Ember, cioè ember-cli per una facile installazione e compilazione per i progetti Ember.
VueJS ha anche uno strumento da riga di comando vue-cli per avviare e creare progetti.
Entrambi hanno funzionalità come router, template e componenti che li rendono molto ricchi come framework UI.
Performance
VueJS ha prestazioni migliori rispetto a Ember. Ember ha aggiunto un motore di rendering glimmer con l'obiettivo di migliorare le prestazioni di re-rendering, che è un concetto simile a VueJS e React utilizzando DOM virtuale. Tuttavia, VueJS ha prestazioni migliori rispetto a Ember.
VueJS v / s Knockout
Knockout fornisce un buon supporto per il browser. È supportato sulla versione inferiore di IE mentre VueJS non è supportato su IE8 e inferiore. Lo sviluppo knockout ha subito un rallentamento nel tempo. Non c'è molta popolarità per lo stesso negli ultimi tempi.
D'altra parte, VueJS ha iniziato a guadagnare popolarità con il team di Vue che fornisce aggiornamenti regolari.
Polimero VueJS v / s
La libreria di polimeri è stata sviluppata da Google. Viene utilizzato in molti progetti Google come Google I / O, Google Earth, Google Play Music, ecc. Offre l'associazione dei dati e proprietà calcolate simili a VueJS.
La definizione di elemento personalizzato polimero comprende JavaScript / CSS semplice, proprietà degli elementi, callback del ciclo di vita e metodi JavaScript. In confronto, VueJS consente di utilizzare facilmente JavaScript / html e CSS.
Polymer utilizza le funzionalità del componente Web e richiede polyfill per i browser, che non supporta queste funzionalità. VueJS non ha tali dipendenze e funziona bene in tutti i browser da IE9 +.