Computed in Vue.js

In questa lezione parleremo di computed in Vue.js, una funzionalità fondamentale di Vue.js per gestire la logica reattiva all’interno delle applicazioni.

Le computed properties in Vue.js sono funzioni calcolate dinamicamente che restituiscono un valore in base allo stato dei dati reattivi. Queste proprietà sono memorizzate nella cache e sono ricalcolate solo quando le dipendenze effettive cambiano. Questo significa che se una o più dipendenze cambiano, il valore calcolato sarà aggiornato automaticamente. Le computed properties sono ideali per calcoli derivati da uno o più dati reattivi.

Esempio Computed in Vue.js

Realizziamo un esempio completo di un componente Vue.js che include un campo di input per il raggio del cerchio e mostra dinamicamente l’area calcolata del cerchio utilizzando una computed 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>
import { ref, computed } from 'vue';

export default {
  name: 'CircleArea',
  data() {
    return {
      radius: 0
    };
  },
  computed: {
    area() {
      const areaCerchio = Math.PI * Math.pow(this.radius, 2);
      return areaCerchio.toFixed(2);
    }
  }
};
</script>

In questo esempio ho utilizzato un campo di input per il raggio del cerchio, legato alla variabile radius tramite v-model. Poi ho utilizzato una computed property chiamata area per calcolare dinamicamente l’area del cerchio basata sul valore di radius. Nella sezione data, abbiamo inizializzato radius a 0. Il componente esporta sia radius che area, che possono essere utilizzati nel template.

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

Computed in Vue.js o Method?

Sviluppiamo lo stesso esempio utilizzando un metodo:

<template>
  <div>
    <label for="radius">Raggio del cerchio:</label>
    <input type="number" id="radius" v-model="radius">
    <p>L'area del cerchio è: {{ calculateArea() }}</p>
  </div>
</template>

<script>
export default {
  name: 'CircleArea',
  data() {
    return {
      radius: 0
    };
  },
  methods: {
    calculateArea() {
      const areaCerchio = Math.PI * Math.pow(this.radius, 2);
      return areaCerchio.toFixed(2); // Arrotonda l'area a due cifre decimali
    }
  }
};
</script>

La differenza principale tra l’utilizzo di una computed property e l’utilizzo di un metodo per calcolare e mostrare l’area del cerchio è nel modo in cui vengono gestiti i dati reattivi e l’ottimizzazione delle prestazioni.

Computed Property:
- Una computed property è calcolata dinamicamente in base allo stato dei dati reattivi. Vue.js gestisce automaticamente la cache e ricalcola il valore solo quando le dipendenze effettive cambiano.
- Quando il valore del raggio cambia, Vue.js ricalcola automaticamente l’area del cerchio.
- Le computed properties sono ideali per calcoli che dipendono da dati reattivi e sono ottimizzate per prestazioni, in quanto vengono memorizzate nella cache e ricalcolate solo quando necessario.
Metodo:
- Un metodo viene chiamato esplicitamente ogni volta che viene richiesto, ad esempio nel template o in risposta a un evento.
- Quando il valore del raggio cambia, il metodo deve essere chiamato manualmente per ricalcolare l’area del cerchio e visualizzarla.
- I metodi possono essere più flessibili e consentono di eseguire operazioni complesse o logiche aggiuntive al di là del semplice calcolo dell’area del cerchio.

L’utilizzo di una computed property in Vue.js per calcolare l’area del cerchio è preferibile quando si tratta di calcoli basati su dati reattivi e si desidera ottimizzare le prestazioni. D’altra parte, l’utilizzo di un metodo può essere più appropriato quando si necessita di flessibilità nell’esecuzione di operazioni complesse o quando non si desidera che il calcolo sia eseguito automaticamente in risposta ai cambiamenti dei dati.

Conclusioni

In conclusione, le computed properties in Vue.js si dimostrano uno strumento potente e flessibile per gestire calcoli basati su dati reattivi. Sfruttando la loro capacità di memorizzare nella cache e ricalcolare i valori solo quando necessario, possiamo ottimizzare le prestazioni delle nostre applicazioni, evitando calcoli ridondanti e migliorando l’esperienza dell’utente.

Bibbia Commentata dai nuovi padri

>> computed

watch >>