Annunciata nell’autunno del 2018, finalmente il 18 settembre di quest’anno è stata rilasciata ufficialmente la versione 3 di Vue.js, una delle librerie Javascript più utilizzate al  e che si integra perfettamente con Laravel.

Tutte le novità Vue.js versione 3

La nuova versione stabile di Vue.js, retrocompatibile con la versione 2, introduce molte novità che rendono il framework più stabile, veloce e semplice, pur dando agli sviluppatori ancora più libertà di personalizzare il proprio frontend.

Composition API

Ispirate dagli Hook di React, le Composition API sono una alternativa alle Options API. Rispetto a queste, sono più flessibili e mantenibili in quanto permettono di utilizzare i metodi in component diversi e di renderli anche completamente personalizzabili, in quanto sarà possibile, per i metodi stessi, accettare delle configurazioni. Questo ci permette di avere meno righe di codice ma al contempo avremo il progetto organizzato in maniera nettamente migliore: in un unico metodo, chiamato setup(), gestiremo tutte le proprietà e i metodi relativi al component. Nella pratica, le proprietà come data, methods e watch vengono, utilizzando le Composition API, combinate in setup(). È comunque importante sottolineare che le Option API sono comunque pienamente supportate anche nella nuova versione del framework.

Ecco un piccolo esempio di un component che, dato un numero, restituisce di se stesso più 10.

<script>

import { ref } from “vue”

export default {

  setup() {

    const originalNumber = ref(1)

    function sum() {

      originalNumber.value = parseInt(theNumber.originalNumber) + 10

    }

    return {

      originalNumber,

      sum

    }

  }

}

</script>

 

La riga

import { ref } from ‘vue’

rappresenta parte fondamentale delle composition API: grazie ad essa possiamo rendere qualsiasi variabile reattiva ed utilizzarla in setup().

Elementi di root multipli (Fragments)

Una delle restrizioni di Vue.js 2 contro le quali tanti di noi si sono scontrati almeno una volta era quella dell’obbligo di avere un unico elemento di root nei vari template. In Vue.js 3 vengono introdotti i Fragments, grazie ai quali finalmente potremo compilare correttamente il codice anche avendo più di un elemento di root: questo ci permette di semplificare la struttura del nostro progetto!

 

<!– Layout.vue –>

<template>

  <header>…</header>

  <div>…</div>

  <footer>…</footer>

</template>

Teleport

Questa funzione, precedentemente utilizzabile su Vue.js 2 grazie alla libreria di terze parti chiamata Portals, è ora nativamente supportata dal framework e permette di rendererizzare una porzione di codice un un altro albero del DOM rispetto a quello dove viene effettivamente dichiarata: un classico utilizzo pratico dei Teleport è quello delle modal. Con questa nuova funzionalità potremo gestire in maniera indipendente il nostro component da quello in cui lo andremo ad innestare, senza preoccuparci del posizionamento, dello stile e dello z-index.

V-Model multipli

Chi ha già utilizzato la versione precedente di Vue.js sicuramente ha utilizzato la direttiva v-model, che serve per effettuare il cosiddetto two-way binding, cioè l’automatismo che consente di effettuare il far dialogare in maniera reattiva un elemento dell’interfaccia con il modello dei dati, e viceversa. In Vue.js 2, ogni component poteva utilizzare al massimo solo un v-model: anche questa limitazione è stata rimossa nella versione 3. In questo modo è possibile rendere reattivo il component a più properties.

Miglior integrazione con TypeScript

In Vue.js 2 era possibile utilizzare TypeScript ma con la nuova versione il supporto è stato nettamente migliorato: infatti tutto il framework è stato scritto proprio con questo linguaggio e questo ci permette di utilizzarlo senza nessun tool di terze parti.

Modifiche al Mounting globale

Gli sviluppatori del framework hanno voluto evitare che l’istanza globale di Vue venisse utilizzata per installare librerie di terze parti. Infatti hanno creato il metodo createApp() per incapsularle in istanze dedicate: questo è molto utile per evitare che, ad esempio, un plugin potesse sovrascrivere codice dell’istanza globale.

Suspense

Un’altra nuova feature molto utile è quella chiamata Suspense, grazie alla quale è possibile gestire la renderizzazione di un component in base a una o più condizioni da noi scelte. L’utilizzo classico di Suspense è quello relativo alla visualizzazione di un component in seguito alla chiamata di un’API: potremo utilizzare due template, uno di default e uno di fallback, che verranno renderizzati alternativamente in maniera automatica semplicemente rendendo async il metodo setup() visto in precedenza con le Composition API. Fino a quando il metodo non sarà eseguito interamente, il framework forzerà la renderizzazione del metodo di fallback. Questo ci permette di avere un template ancora più pulito!

<Suspense>

  <template #default>

    <PlayersList />

    <MatchesSchedule /> 

  </template>

  <template #fallback>

    <div>Please wait…</div>

  </template>

</Suspense>

Queste sono solo le principali novità che il recente rilascio Vue.js 3 ha introdotto: è molto significativo che il team di sviluppo sia aperto alle idee fornite da sviluppatori terzi, inglobandole nel core, e che si siano migliorati altri aspetti, ispirandosi ad altri framework ma comunque rendendo le funzionalità sempre intuitive e semplici, nel pieno stile che contraddistingue Vue.js.

Dai un’occhiata al nostro Corso Vue.js di LaraMind e se sei interessato ad accelerare in maniera definitiva contattaci a amministrazione@laramind, troveremo di sicuro una soluzione formativa customizzata sulle tue specifiche esigenze.