Реактивност във 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';
  }
}

Ако съберем целия код заедно и натиснем бутона - текстът на екрана реактивно ще се промени на друг.