Vue.js

Vue.js (comunemente noto come Vue, pronunciato /vjuː/, come view) è un framework per applicazioni web JavaScript open source in configurazione model-view-viewmodel per la creazione di interfacce utente e single-page application. È stato creato da Evan You ed è gestito da lui e dai membri attivi del team principale, provenienti da varie società come Netlify e Netguru.

Panoramica

Vue.js presenta un'architettura adottabile in modo incrementale che si concentra sul rendering dichiarativo e sulla composizione dei componenti. Le funzionalità avanzate richieste per applicazioni complesse come il routing, lo state management e gli strumenti di compilazione sono offerte tramite librerie e pacchetti di supporto ufficialmente mantenuti, che comprendono, tra le soluzioni più popolari, Nuxt.js.

Storia

Vue è stato creato da Evan You, dopo aver lavorato per Google utilizzando AngularJS in numerosi progetti. Ha proposto un sunto del suo processo di pensiero a seguito della sua esperienza: «Ho pensato, e se potessi solo estrarre la parte che mi piaceva molto di Angular e costruire qualcosa di veramente leggero?». Il primo commit del codice sorgente del progetto è datato luglio 2013, mentre è stato pubblicato ufficialmente il febbraio successivo, nel 2014.

Quando viene pubblicata una nuova versione major, l'ultima versione minor diventerà una versione Long Term Support (LTS) per diciotto mesi (correzioni di bug e patch di sicurezza) e per i successivi diciotto mesi sarà in modalità di manutenzione (solo patch di sicurezza).

Componenti

I componenti Vue estendono gli elementi HTML di base per incapsulare il codice riutilizzabile. A livello generale, i componenti sono elementi personalizzati a cui il compilatore di Vue associa una funzionalità. In Vue, un componente è essenzialmente un'istanza di Vue con opzioni predefinite.

Lo snippet di codice seguente contiene l'esempio di un componente Vue. Il componente presenta un pulsante e stampa il numero di volte in cui si fa clic sul pulsante:

Modelli

Vue utilizza una sintassi di modello basata su HTML che consente di associare il Document Object Model (DOM) renderizzato ai dati dell'istanza di Vue sottostante. Tutti i modelli Vue sono HTML validi che possono essere analizzati da browser e parser HTML conformi alle specifiche. Vue compila i modelli in funzioni di rendering DOM virtuali. Un DOM virtuale consente a Vue di eseguire il rendering dei componenti in memoria prima di aggiornare il browser. In combinazione con il sistema di reattività, Vue è in grado di calcolare il numero minimo di componenti per eseguire nuovamente il rendering e applicare la quantità minima di manipolazioni DOM quando cambia lo stato dell'app.

Gli utenti di Vue possono utilizzare la sintassi del modello o scegliere di scrivere direttamente le funzioni di rendering utilizzando JSX. Le funzioni di rendering consentono di compilare l'applicazione da componenti software.

Reattività

Vue presenta un sistema di reattività che utilizza semplici oggetti JavaScript e un re-rendering ottimizzato. Ogni componente tiene traccia delle sue dipendenze reattive durante il rendering, in modo che il sistema sappia esattamente quando eseguire nuovamente il rendering e su quali componenti.

Transizioni

Vue offre una varietà di modi per applicare effetti di transizione quando gli elementi vengono inseriti, aggiornati o rimossi dal DOM. Ciò include strumenti per:

Applicare automaticamente le classi per le transizioni e le animazioni CSS;

Integrare librerie di animazione CSS di terze parti, come Animate.css;

Utilizzare JavaScript per manipolare direttamente il DOM durante gli hook di transizione;

Integrare librerie di animazione JavaScript di terze parti, come Velocity.js.

Quando un elemento di cui è stato eseguito il wrapping in un componente di transizione viene inserito o rimosso, questo è ciò che accade:

Vue rileverà automaticamente se all'elemento target sono state applicate transizioni o animazioni CSS. In tal caso, le classi di transizione CSS verranno aggiunte/rimosse nei tempi appropriati.

Se il componente di transizione ha fornito hook di JavaScript, questi hook verranno chiamati nei tempi appropriati.

Se non vengono rilevate transizioni/animazioni CSS e non vengono forniti hook di JavaScript, le operazioni DOM per l'inserimento e/o la rimozione verranno eseguite immediatamente sul frame successivo.