ウォッチャ

vue.jsフレームワーク

  1. HOME
  2. ウォッチャ

データの変更を監視する

ウォッチャはデータの変更を監視してくれる機能です。
監視したいデータとデータが変更されたときに実行したいハンドラを予め登録しておくと、データの変更をVueが検知してハンドラを呼び出します。

watch: {監視したいプロパティ名: 関数オブジェクト}

ウォッチャ登録

{{message}}

HTML

<div id="app">
<template v-if="stock >= 1">
  <span class="num">在庫はあと{{stock}}個</span>
  <button class="btn" v-on:click="onDeleteItem">削除ボタン</button>
</template>
{{message}}
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: '',
    stock: 9
  },
  methods: {
    onDeleteItem: function() {
      this.stock--;
    }
  },
  watch: {
    stock: function(newStock, oldStock) {
      if (newStock == 0) {
        this.message = '売り切れ!!';
      }
    }
  }
});
算出プロパティとウォッチャの使い分け
クリックイベントの時と表示は同じですが、在庫が0の時messageの内容が自動的に更新されるのでテンプレート欄にmessageを表示するかの条件分岐を記述する必要がなくなり、HTMLがスッキリする。

ウォッチャで算出プロパティを監視する

{{statusMesseage}}

HTML

<div id="app2">
<template v-if="stock >= 1">
  <span class="num">在庫はあと{{stock}}個</span>
  <button class="btn" v-on:click="onDeleteItem">削除ボタン</button>
</template>
{{statusMesseage}}
</div>

JavaScript

var app2 = new Vue({
  el: '#app2',
  data: {
    message: '',
    stock: 10
  },
  methods: {
    onDeleteItem: function () {
      this.stock--;
    }
  },
  computed: {
    statusMesseage: function () {
      if (this.stock == 0) {
        return '売り切れです';
      }
      return '';
    }
  },
  watch: {
    statusMesseage: function () {
      console.log('商品のステータスが変化しました。');
    }
  }
});
dataプロパティだけでなくcomputedの算出プロパティを監視することも可能です。
ウォッチャが役立つ場面は
・データが更新されたとき、サーバー間の通信など重い処理が発生する場面
・ユーザーの操作によって、高い頻度で処理が発生する場面