Reaktyvumas Vue framework'e

Bet koks pakeitimas duomenyse iš data sukelia momentinį tų duomenų atvaizdo pakeitimą puslapyje. Toks Vue elgesys vadinamas reaktyvumu.

Patikrinkime praktiškai. Tarkime, kad turime šią savybę:

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

Išveskime šios savybės reikšmę:

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

Sukurkime mygtuką, kurį paspaudus bus keičiama mūsų savybė:

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

Dabar parašykime metodą, kuris bus iškviečiamas paspaudus mygtuką ir pakeis savybę:

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

Jei sujungsime visą kodą ir paspausime mygtuką - tekstas ekrane reaktyviai pakis į kitą.