【Vue】リアクティブデータ

Vue.js

Vueクラスのdataオプションに登録されたデータは変更があれば自動的にページに反映される

以下のコードを実行すると現在時刻が表示され、1秒毎に更新される

<div id="app">
    <p>現在時刻：{{ current.toLocaleString() }}</p>
</div>

new Vue({
  el: "#app",
  data: {
    // 現在時刻
    current: new Date(),
  },
  //始動時にタイマーを設定
  created: function () {
    let that = this;
    // 1000ミリ秒スパンでcurrentプロパティを更新
    this.timer = setInterval(function () {
      that.current = new Date();
    }, 1000);
  },
  beforeDestroy: function () {
    clearInterval(this.timer);
  },
});

※あとから破棄できるように生成したタイマーはtimerプロパティに格納しておく

プロパティの追加・削除

Vue.jsはJavaScriptの制約によりプロパティそのものを追加・削除することができない
この問題を避けるには以下の手段がある

  1. 全てのプロパティを最初に準備する
  2. Vue.setメソッドを利用する

ビューの非同期更新

リアクティブシステムによるビューの更新は非同期であり、連動して発生するすべての変更をプールした上で最終的な結果を反映する
ビューへの反映の完了を待ってから何かしらを実行するには$nextTickメソッドを利用する

this.$nextTick().then(function() {
  // 何かしらの処理
});

ウォッチャーによる監視

例えばフォームへの入力を監視して入力の間隔が空いたときだけ処理を実行したり、変更を検知して非同期通信を行うなど標準的なリアクティブシステムだけでは対応できないことをやりたい場合はwatchオプションを利用する

watch: {
  hoge: function(newValue, oldValue) {
    // 何かしらの処理
  }
}

またウォッチャーには動作オプションを定義できる

オプション 概要
handler ウォッチャーの本体
deep 入れ子のオプションも監視するか
immediate 起動時に即座に実行するか