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

Եթե հավաքել բոլոր կոդը միասին և սեղմել կոճակի վրա - էկրան上的 տեքստը ռեակտիվ կփոխվի այլ տեքստի։