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

すべてのコードをまとめ、ボタンをクリックすると、画面上のテキストが別のものにリアクティブに変化します。