Vue.js

Vue.js (comunemente noto come Vue, pronunciato /vjuː/, come view^[1]) è 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^[2].

Vue.js software
Logo
Genere	Framework per applicazioni web
Sviluppatore	Evan You
Data prima versione	febbraio 2014
Ultima versione	3.5.13 (15 novembre 2024)
Sistema operativo	Multipiattaforma
Linguaggio	TypeScript JavaScript
Licenza	licenza MIT (licenza libera)
Sito web	vuejs.org/

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^[3], 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?».^[4] Il primo commit del codice sorgente del progetto è datato luglio 2013, mentre è stato pubblicato ufficialmente il febbraio successivo, nel 2014.

Versioni

Versione	Data di pubblicazione	Titolo
3.5	1 settembre 2024[5]	Tengen Toppa Gurren Lagann
3.4	28 dicembre 2023[6]	Slam Dunk
3.3	11 maggio 2023[7]	Rurouni Kenshin
3.2	5 agosto 2021[8]	Quintessential Quintuplets
3.1	7 giugno 2021[9]	Pluto
3.0	18 settembre 2020[10]	One Piece
2.7	1 luglio 2022[11]	Naruto
2.6	4 febbraio 2019[12]	Macross
2.5	13 ottobre 2017[13]	Level E
2.4	13 lug 2017[14]	Kill la Kill
2.3	27 aprile 2017[15]	JoJo's Bizarre Adventure
2.2	26 febbraio 2017[16]	Initial D
2.1	22 nov 2016[17]	Hunter X Hunter
2.0	30 settembre 2016[18]	Ghost in the Shell
1.0	27 ottobre 2015[19]	Evangelion
0.12	12 giugno 2015[20]	Dragon Ball
0.11	7 novembre 2014[21]	Cowboy Bebop
0.10	23 marzo 2014[22]	Blade Runner
0.9	25 febbraio 2014[23]	Animatrix
0.8	27 gennaio 2014[24]	-
0.7	24 dicembre 2013[25]	-
0.6	8 dicembre 2013[26]	VueJS

Caratteristiche

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.^[27]

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:

<div id="tuto">
	<button-clicked v-bind:initial-count="0"></button-clicked>
</div>

<script>
Vue.component('button-clicked', {
  props: [ "initialCount" ],
  data: () => ({
    count: 0,
  }),
  template: `<button v-on:click="onClick">Clicked <nowiki>{{ count }}</nowiki> times</button>`,
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
    }
  },
  methods: {
    onClick() {
        this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

Modelli

Vue utilizza una sintassi di modello basata su HTML che consente di associare il 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 Document Object Model (o "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.^[28] Le funzioni di rendering consentono di compilare l'applicazione da componenti software.^[29]

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.^[30]

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:

1. 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.
2. Se il componente di transizione ha fornito hook di JavaScript, questi hook verranno chiamati nei tempi appropriati.
3. 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.^[31][32]

Routing

Uno svantaggio tipico delle applicazioni a pagina singola (SPA) è l'incapacità di condividere collegamenti all'esatta "sotto" pagina all'interno di una pagina Web specifica. Poiché le SPA forniscono ai loro utenti solo una risposta basata su URL dal server (in genere serve index.html o index.vue), aggiungere segnalibri a determinate schermate o condividere collegamenti a sezioni specifiche è normalmente difficile se non impossibile. Per risolvere questo problema, molti router lato client delimitano i loro URL dinamici con un hashbang (#!), Ad esempio pagina.com/#!/. Tuttavia, con HTML5 la maggior parte dei browser moderni supporta il routingsenza hashbang.

Vue fornisce un'interfaccia per modificare ciò che viene visualizzato sulla pagina in base al percorso URL corrente, indipendentemente da come è stato modificato (tramite collegamento via e-mail, aggiornamento o collegamenti in-page). Inoltre, l'utilizzo di un router front-end consente la transizione intenzionale del percorso del browser quando si verificano determinati eventi del browser (ad esempio clic) su pulsanti o collegamenti. Vue stesso non viene fornito con il routing hash front-end, ma il pacchetto open source "vue-router" fornisce un'API per aggiornare l'URL dell'applicazione, supporta il pulsante Indietro (cronologia di navigazione) e reimpostazioni della password e-mail o collegamenti di verifica e-mail con parametri URL di autenticazione. Supporta il mapping di percorsi su componenti nidificati e offre un controllo di transizione a granularità fine. Con Vue, gli sviluppatori compongono applicazioni con piccoli blocchi costruendo componenti più grandi. Con vue-router aggiunto alla combinazione, i componenti devono essere semplicemente mappati alle route a cui appartengono e le route parent/root devono indicare dove devono essere eseguito il rendering degli elementi figlio.^[33]

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const User = {
  template: '<div>Utente <nowiki>{{ $route.params.id }}</nowiki></div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
...
</script>

Il codice sopra:

1. Imposta un percorso front-end su nomesito.com/user/<id>, che verrà visualizzato nel componente User definito in (const User...)
2. Consente al componente User di passare un ID particolare dell'utente che è stato digitato nell'URL usando la chiave params dell'oggetto $route: $route.params.id
3. Questo modello (che varia in base ai parametri passati nel router) verrà renderizzato in <router-view></router-view> all'interno del div#app del DOM
4. L'HTML generato alla fine per qualcuno che digita: nomesito.com/user/1 sarà:

<div id="app">
  <div>
    <div>Utente 1</div>
  </div>
</div>

^[34]

Ecosistema

La libreria principale include strumenti e librerie sviluppati sia dal team principale che dai collaboratori.

Tooling ufficiale

• Devtools - estensione devtools del browser per il debug delle applicazioni Vue.js
• Vue CLI - tool standard per un rapido sviluppo di Vue.js
• Vue Loader - caricatore di webpack che consente la scrittura dei componenti Vue in un formato chiamato Single-File Components (SFCs)

Librerie ufficiali

• Vue Router - il router ufficiale di Vue.js
• Vuex - gestore di stato centralizzato ispirato a Flux per Vue.js
• Vue Server Renderer - rendering lato server per Vue.js