Proprietà computed e watchers

Nel precedente articolo abbiamo parlato di filtri, speciali componenti riusabili in grado di formattare un testo secondo particolari criteri. I filtri, però, dovrebbero occuparsi solamente di aspetti di presentazione, tant'è che Vue.js ne permette l'utilizzo solamente tramite la direttiva v-bind o con la sintassi "a graffe".

Tuttavia lo strumento filtro può risultare insufficiente, in quanto il dato "elaborato" deve essere utilizzato anche fuori dal contesto presentazionale. In questi casi, le computed properties sono lo strumento che fa per noi.

Computed Properties

Queste particolari property assumono valori dinamici in base ad altre property del nostro oggetto Vue, e reagiscono esattamente come se fossero proprietà statiche. Analizziamo un esempio:

var vm = new Vue({
  el: '#vue-app',
  data: {
    firstname: 'Alberto',
    lastname: 'Bottarini'
  },
  computed: {
    fullname: function() {
      return this.firstname + ' ' + this.lastname;
    }
  }
})

Utilizzando le computed properties, è possibile accedere alla property fullname come se fosse una normalissima proprietà, al pari di firstname e lastname. La vera comodità è che Vue è in grado di capire da quali variabili fullname "dipende" e quindi è in grado di aggiornarne il suo valore dinamicamente se dovesse cambiare una sua "dipendenza". Internamente, Vue implementa questo meccanismo come un vero albero di dipendenze e di eventi: al cambio di una property, il framework sa esattamente quali computed properties rigenerare.

Quest'ultima caratteristica di Vue porta con sè un secondo vantaggio, non direttamente collegato ma fondamentale: il caching. Quando un'applicazione inizia a crescere e il numero di computed property diventa importante, avere i valori in cache diventa fondamentale per non appesantire il browser. Utilizzare le computed piuttosto che i semplici metodi, evita di generare i valori di ritorno ad ogni accesso e di rigenerarli solo se e quando le dipendenze dovessero cambiare.

Le computed property, di default, permettono di definire solamente il comportamento in lettura, ma è possibile anche definirne quello in scrittura. Pensiamo per esempio ad una applicazione dove internamente vogliamo separare firstname da lastname, ma all'utente è necessario mostrare un unico campo editabile. Possiamo implementare il tutto, con alcune limitazioni al funzionamento, in questo modo:

var vm = new Vue({
  el: '#vue-app',
  data: {
    firstname: 'Alberto',
    lastname: 'Bottarini'
  },
  computed: {
    fullname: {
      get: function() {
        return this.firstname + ' ' + this.lastname;
      },
      set: function(value) {
        var parts = value.split(' ');
        this.firstname = parts[0];
        this.lastname = parts[1];
      }
    }
  }
});

<div id="vue-app">
  <input type="text" v-model="fullname">
  {{ firstname }} {{ lastname }}
</div>

Watchers

Le computed property sono una concretizzazione di un concetto più astratto ovvero la possibilità di reagire di fronte al cambiamento dello stato del nostro componente Vue. Questa astrazione viene implementata dai watchers. Grazie ai watchers per esempio è possibile, invocare un servizio locale di validazione e bloccare/sbloccare un eventuale form durante la digitazione dell'utente.

var vm = new Vue({
  el: '#vue-app',
  data: {
    name: 'Alberto',
    submitDisabled: false
  },
  watch: {
    name: function(value) {
      this.submitDisabled = value.length < 3;
    }
  }
});

<div id="app">
  <input type="text" v-model="name">
  <button :disabled="submitDisabled">Invia</button>
</div>

In questo semplice esempio, abbiamo creato un watcher per la property name che modifica una seconda property submitDisabled in base alla propria lunghezza. submitDisabled viene poi collegata (tramite bind) all'attributo disabled del pulsante, in modo da negarne il click se il name non è valido.

I watchers sono strumenti comodi e funzionali, ma il loro utilizzo deve essere valutato con criterio. È necessario usarli solamente quando gli strumenti più specializzati (computed property e watched property) non sono efficaci. L'esempio proposto ha come unica finalità quella didattica in quanto lo stesso risultato sarebbe potuto essere ottenuto tramite una proprietà computed.