Reaktivitet i Vue-ramverket

All förändring av data från data leder till en omedelbar förändring av visningen av denna data på sidan. Detta beteende i Vue kallas reaktivitet.

Låt oss testa detta i praktiken. Antag att vi har följande egenskap:

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

Låt oss visa värdet på denna egenskap:

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

Låt oss skapa en knapp som, när man klickar på den, kommer att ändra vår egenskap:

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

Låt oss nu skriva en metod som kommer att anropas vid klick på knappen och ändra egenskapen:

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

Om man samlar all kod tillsammans och klickar på knappen - kommer texten på skärmen reaktivt att ändras till en annan.