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

Эгер бардык кодду бир жерге чогултуп, баскычка бассаңыз - экрандагы текст реактивдуу түрдө башкага алмашат.