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';
  }
}

Агар барча кодни бирга тўплаб, тугмани боссак - экрандаги матн реактив тарзда бошқасига ўзгаради.