Watch 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:

Raggio del cerchio:

L’area del cerchio è: {{ area }}

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);
}
}
};

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.

Computed in Vue.js o Method?

Sviluppiamo lo stesso esempio utilizzando un metodo: