Reattività nel framework Vue

Qualsiasi modifica ai dati in data porta a un cambiamento immediato della visualizzazione di questi dati sulla pagina. Questo comportamento di Vue è chiamato reattività.

Verifichiamolo nella pratica. Supponiamo di avere la seguente proprietà:

javascriptdata() {
  return {
    text: 'xxx',
  }
}

Visualizziamo il valore di questa proprietà:

App.vue<template>
  {{ text }}
</template>

Creiamo un pulsante, al click del quale cambierà la nostra proprietà:

App.vue<template>
  {{ text }}
  <button @click="change">text</button>
</template>

Scriviamo ora il metodo che verrà chiamato al click sul pulsante e modificherà la proprietà:

App.vuemethods: {
  change: function() {
    this.text = 'yyy';
  }
}

Se si mette insieme tutto il codice e si preme il pulsante - il testo sullo schermo reattivamente cambierà in un altro.