Watch in Vue.js

In questa lezione parliamo di watch in Vue.js. I watchers in Vue.js consentono di eseguire del codice quando i dati reattivi cambiano. A differenza delle computed properties, i watchers non calcolano un valore; piuttosto, eseguono del codice quando si verificano specifiche modifiche di dati. Si possono utilizzare i watchers per eseguire azioni asincrone, effettuare chiamate AJAX o eseguire altre operazioni quando i dati cambiano.

Esempio Watch in Vue.js

Realizziamo un esempio di un componente Vue.js con un campo di input per inserire il raggio del cerchio e sotto un paragrafo che mostra dinamicamente l’area calcolata del cerchio utilizzando una watch property:

<template>
    <div>
      <label for="radius">Raggio del cerchio:</label>
      <input type="number" id="radius" v-model="radius">
      <p>L'area del cerchio è: {{ area }}</p>
    </div>
  </template>
 
<script>  
  export default {
    name: 'WatchComponent',
    data() {
      return {
        radius: 0,
        area: 0
      };
    },
    watch: {
        radius(newValue) {
           this.area = Math.PI * Math.pow(newValue, 2);
        }
    }
  };
  </script>

Ho dunque inserito un campo di input per il raggio del cerchio, legato alla variabile radius tramite v-model, inizializzata a 0. Ho anche inizializzato la variabile area che compare in un paragrafo a 0. Dopo ho utilizzato un watcher per osservare i cambiamenti nella variabile radius. Ogni volta che radius cambia, il watcher calcola l’area del cerchio e aggiorna la variabile area.

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Differenza con computed

Se avessimo utilizzato una computed property, il calcolo dell’area del cerchio verrebbe eseguito solo quando il valore del raggio cambierebbe. Invece, utilizzando watch, la funzione associata è chiamata ogni volta che il valore di radius cambia, indipendentemente dal fatto che sia direttamente correlato al calcolo dell’area o meno. Questo potrebbe comportare una maggiore complessità e meno efficienza nel codice.

Inoltre Vue.js gestisce automaticamente la cache delle computed properties, quindi il valore dell’area verrebbe memorizzato nella cache e ricalcolato solo quando il valore del raggio cambia. Questo può portare a prestazioni migliori rispetto all’utilizzo di un watch.

Dunque nell’esempio precedente sarebbe preferibile usare computed al posto di watch.

Un esempio più appropriato per l’utilizzo di un watcher potrebbe essere il controllo della disponibilità di un prodotto in un negozio online. Supponiamo di avere un’applicazione Vue.js che visualizza i dettagli di un prodotto e dobbiamo controllare se il prodotto è attualmente disponibile o meno nel negozio online. In questo caso, un watcher può essere utilizzato per monitorare i cambiamenti nello stato di disponibilità del prodotto e reagire di conseguenza.

Conclusioni

In conclusione i watcher sono una risorsa fondamentale nel contesto di Vue.js, offrendo agli sviluppatori un meccanismo versatile per monitorare e rispondere a modifiche specifiche all’interno dei dati dell’applicazione. La loro flessibilità consente di eseguire azioni personalizzate in risposta a eventi specifici, estendendo così le capacità di gestione reattiva dei componenti Vue.js.

L’utilizzo accurato dei watcher richiede una valutazione oculata delle necessità dell’applicazione e una comprensione approfondita delle operazioni reattive richieste. Mentre sono preziosi per compiti come il controllo della validità dei dati o l’interazione con servizi esterni, è importante evitare un uso eccessivo che potrebbe compromettere le prestazioni dell’applicazione.

Bibbia Commentata dai nuovi padri

>> computed

vue router >>