El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem sobre dues característiques molt potents de Vue.js: les propietats computades (computed properties) i els observadors (watchers). Aquestes eines ens permeten gestionar i reaccionar als canvis en les dades de manera eficient i declarativa.

Propietats Computades

Què són les Propietats Computades?

Les propietats computades són funcions que es defineixen en l'objecte computed d'una instància de Vue. Aquestes funcions es comporten com a propietats, però el seu valor es calcula en funció d'altres dades reactives. Vue.js s'encarrega de memoritzar (caching) els resultats de les propietats computades, de manera que només es recalculen quan les dades de les quals depenen canvien.

Exemple de Propietat Computada

<div id="app">
  <p>Nom complet: {{ fullName }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName: function() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  });
</script>

Explicació

Data: Definim dues propietats firstName i lastName.
Computed: Definim una propietat computada fullName que retorna la concatenació de firstName i lastName.

Beneficis de les Propietats Computades

Memorització: Vue.js memoritza els resultats de les propietats computades, evitant càlculs innecessaris.
Declarativitat: Les propietats computades permeten escriure codi més net i declaratiu.
Reutilització: Les propietats computades poden ser reutilitzades en diferents parts de la plantilla.

Observadors

Què són els Observadors?

Els observadors són funcions que s'executen en resposta a canvis en les dades reactives. Es defineixen en l'objecte watch d'una instància de Vue. Els observadors són útils per a realitzar operacions asíncrones o complexes en resposta a canvis en les dades.

Exemple d'Observador

<div id="app">
  <p>Nom complet: {{ fullName }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe',
      fullName: ''
    },
    watch: {
      firstName: function(newVal, oldVal) {
        this.fullName = newVal + ' ' + this.lastName;
      },
      lastName: function(newVal, oldVal) {
        this.fullName = this.firstName + ' ' + newVal;
      }
    },
    created: function() {
      this.fullName = this.firstName + ' ' + this.lastName;
    }
  });
</script>

Explicació

Data: Definim tres propietats firstName, lastName i fullName.
Watch: Definim dos observadors per firstName i lastName que actualitzen fullName quan canvien.
Created: Inicialitzem fullName en el cicle de vida created.

Beneficis dels Observadors

Reacció a Canvis: Permeten reaccionar a canvis en les dades de manera flexible.
Operacions Asíncrones: Són ideals per a operacions asíncrones com crides a API.
Control Fí: Proporcionen un control més fi sobre com i quan reaccionar als canvis.

Comparació entre Propietats Computades i Observadors

Característica	Propietats Computades	Observadors
Memorització	Sí	No
Declarativitat	Alta	Mitjana
Ús	Càlculs derivats de dades reactives	Operacions asíncrones o complexes
Reacció a Canvis	Automàtica i eficient	Manual i flexible

Exercicis Pràctics

Exercici 1: Propietat Computada

Crea una aplicació Vue que mostri el preu total d'un producte amb IVA. Defineix una propietat computada que calculi el preu total a partir del preu base i el percentatge d'IVA.

Solució

<div id="app">
  <p>Preu base: {{ basePrice }}</p>
  <p>IVA: {{ taxRate }}%</p>
  <p>Preu total: {{ totalPrice }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      basePrice: 100,
      taxRate: 21
    },
    computed: {
      totalPrice: function() {
        return this.basePrice * (1 + this.taxRate / 100);
      }
    }
  });
</script>

Exercici 2: Observador

Crea una aplicació Vue que mostri un missatge de benvinguda personalitzat. Defineix un observador que actualitzi el missatge quan canviï el nom de l'usuari.

Solució

<div id="app">
  <input v-model="userName" placeholder="Escriu el teu nom">
  <p>{{ welcomeMessage }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      userName: '',
      welcomeMessage: 'Benvingut!'
    },
    watch: {
      userName: function(newVal) {
        this.welcomeMessage = 'Benvingut, ' + newVal + '!';
      }
    }
  });
</script>

Conclusió

En aquesta secció, hem après sobre les propietats computades i els observadors en Vue.js. Les propietats computades ens permeten definir càlculs derivats de manera eficient i declarativa, mentre que els observadors ens proporcionen un control més fi per reaccionar als canvis en les dades. Amb aquests coneixements, estem preparats per abordar conceptes més avançats en Vue.js.

Propietats computades i observadors