ウォッチャ

ウォッチャはどういった場面で役立つか？

・データが更新され、その際サーバー間の通信に重い処理が発生したした時

・ユーザノー操作によって、高い頻度で処理が発生した時

① 

条件分岐を使わずにウォッチャ登録で

データの変更を監視する

画面のボタンをクリックするたびに商品が１個ずつ減っていきます

そして、最後に ０ になった時点で 売り切れ の文字がメッセージとして出ます

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: 10  
  },
  methods: {
    onDeleteItem: function() {
      this.stock--;
    }
  },
  watch: {
    stock: function(newStock, oldStock) {
      if (newStock == 0) {
        this.message = '売り切れ';
      }
    }
  }
});

②

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

HTML

①のmessageの部分がstatusMessageに変更になっただけ

JavaScript

var app = new Vue({
  el: '#app',
  data: {
   message: '',
   stock: 10  
  },
  methods: {
    onDeleteItem: function() {
      this.stock--;
    }
  },
  computed: {
    statusMessage: function() {
      if (this.stock == 0) {
        return '売り切れ';
      }
      return '';
    }
  },
  watch: {
    statusMessage: function() {
     console.log('商品のステータスが変化しました');
   }
 }
});
コンソールの画面に

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
商品のステータスが変化しました　　　　　　　　　　　　　　　　　main.js:22