Un framework nato dall’esperienza pratica
Vue.js viene rilasciato nel febbraio 2014 da Evan You, ingegnere che ha lavorato in Google su progetti basati su AngularJS. L’esperienza diretta con i limiti di AngularJS — la complessità della configurazione, la curva di apprendimento ripida, la difficoltà di adozione parziale in progetti esistenti — porta You a progettare un framework con una filosofia diversa: essere progressivo, adottabile un pezzo alla volta.
Vue prende il data binding bidirezionale e i template HTML da AngularJS, ma elimina la struttura rigida. Prende l’idea dei componenti come unità di composizione dell’interfaccia da React, ma mantiene i template HTML come opzione predefinita anziché richiedere JSX. Il risultato è un framework che si posiziona tra i due in termini di complessità, accessibile ai principianti ma sufficientemente potente per applicazioni complesse.
Reattività e sistema di rendering
Il cuore di Vue è il suo sistema di reattività. Quando si crea un’istanza Vue con un oggetto data, il framework attraversa ogni proprietà è la converte in coppie di getter e setter tramite Object.defineProperty. Quando un componente accede a una proprietà durante il rendering, il getter registra quella proprietà come dipendenza. Quando la proprietà viene modificata, il setter notifica tutti i componenti che dipendono da essa, attivando un re-rendering mirato.
Questo sistema è trasparente per lo sviluppatore: si lavora con oggetti JavaScript normali, e Vue si occupa di tracciare le dipendenze e aggiornare il DOM in modo efficiente. Il rendering utilizza un Virtual DOM — una rappresentazione in memoria della struttura del documento — che minimizza le operazioni sul DOM reale confrontando lo stato precedente con quello nuovo.
Componenti single-file
Vue introduce i single-file component (SFC): file con estensione .vue che racchiudono template HTML, logica JavaScript e stili CSS in un unico file. Ogni sezione è delimitata da tag dedicati — <template>, <script>, <style> — e gli stili possono essere dichiarati come scoped, applicabili solo al componente che li definisce.
Questa organizzazione risolve un problema pratico: in un’applicazione complessa, tenere template, logica e stili nello stesso file riduce il context switching e rende il componente un’unità autonoma e riutilizzabile.
Adozione incrementale
La caratteristica che distingue Vue è la possibilità di adottarlo incrementalmente. Si può iniziare aggiungendo un singolo tag <script> a una pagina esistente per rendere reattiva una porzione dell’interfaccia, senza build tool né configurazione. Quando il progetto cresce, si aggiungono componenti, routing con vue-router, gestione dello stato. Non è necessario riscrivere l’applicazione esistente: Vue si integra con ciò che c’è già.
Link: vuejs.org