Reaktivitet i Vue-frameworket

Enhver ændring af data fra data fører til en øjeblikkelig ændring i visningen af disse data på siden. Denne opførsel kaldes reaktivitet i Vue.

Lad os teste det i praksis. Antag, at vi har følgende egenskab:

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

Lad os udskrive værdien af denne egenskab:

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

Lad os lave en knap, hvor et klik på den vil ændre vores egenskab:

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

Lad os nu skrive en metode, der vil blive kaldt ved klik på knappen og ændre egenskaben:

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

Hvis man samler al koden og klikker på knappen - vil teksten på skærmen reaktivt ændres til en anden.