Reactividad en el framework Vue

Cualquier cambio en los datos de data conduce a un cambio instantáneo en la visualización de estos datos en la página. Este comportamiento de Vue se llama reactividad.

Comprobémoslo en la práctica. Supongamos que tenemos la siguiente propiedad:

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

Mostremos el valor de esta propiedad:

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

Hagamos un botón, al hacer clic en el cual cambiará nuestra propiedad:

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

Escribamos ahora el método que será invocado al hacer clic en el botón y cambiará la propiedad:

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

Si juntamos todo el código y hacemos clic en el botón - el texto en la pantalla reactivamente cambiará a otro.