რეაქტიულობა 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';
  }
}

თუ მთელ კოდს ერთად შევკრიბავთ და დავაჭერთ ღილაკს - ეკრანზე არსებული ტექსტი რეაქტიულად შეიცვლება სხვაზე.