Реактивность в фреймворке 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';
  }
}

Если собрать весь код вместе и нажать на кнопку - текст на экране реактивно поменяется на другой.