Reactivitatea în framework-ul Vue

Orice modificare a datelor din data duce la o modificare instantanee a afișării acestor date pe pagină. Acest comportament al Vue se numește reactivitate.

Să verificăm în practică. Să presupunem că avem următoarea proprietate:

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

Să afișăm valoarea acestei proprietăți:

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

Să creăm un buton, la click pe care se va schimba proprietatea noastră:

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

Să scriem acum metoda care va fi apelată la click pe buton și va modifica proprietatea:

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

Dacă adunăm tot codul împreună și apăsăm pe buton - textul de pe ecran se va schimba reactiv în altul.