Reaktywność we frameworku Vue

Każda zmiana danych z data prowadzi do natychmiastowej zmiany wyświetlania tych danych na stronie. Takie zachowanie Vue nazywa się reaktywność.

Sprawdźmy to w praktyce. Załóżmy, że mamy następującą właściwość:

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

Wypiszmy wartość tej właściwości:

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

Zróbmy przycisk, po kliknięciu którego będzie się zmieniać nasza właściwość:

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

Napiszmy teraz metodę, która będzie wywoływana po kliknięciu przycisku i zmieniać właściwość:

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

Jeśli zbierzemy cały kod razem i klikniemy przycisk - tekst na ekranie reaktywnie zmieni się na inny.