Реактивность дар фреймворки Vue

Ҳар гуна тағйири додаҳо аз data ба тағйири фаврӣи намоиши ин додаҳо дар саҳифа меоранд. Ин рафторӣ Vue реактивность номида мешавад.

Биёед дар амал санҷем. Бигзор мо хосияти зеринро дошта бошем:

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

Қимати ин хосиятро хориҷ мекунем:

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

Тугмае созем, ки пахш кардан ба он хосияти моро тағйир медиҳад:

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

Ҳоло усулеро нависем, ки бо клик кардан ба тугма фарохонӣ шавад ва хосиятро тағйир диҳад:

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

Агар ҳама коди якҷоя карда шавад ва тугмаро пахш кунед - матн дар экран реактивно ба дигаре иваз мешавад.