【Vue.js 入門】watch オプションの使い方

今回は、Vue コンポーネントが持つオプションの中の一つである watch オプションを紹介します。

Vue.js の書き方を最初から知りたいという方はこちら(^^)

参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ！！

Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです！Vue.jsのツボとコツがゼッタイにわかる本...

ウォッチャとは
ウォッチャの使い方

ウォッチャとは

ウォッチャとは、データの変更を監視する機能です。

監視したいデータと、そのデータが変更されたときに実行したい処理を登録しておくことで、自動的に変更を検知して処理を実行してくれます。

イベントハンドリングと似ていますが、異なる点は、ある処理が呼び出されるタイミングがイベントではなくデータの変更であることです。

ウォッチャの使い方

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

ウォッチャに登録した関数オブジェクトは、第一引数に変化後の値を、第二引数に変化前の値を受け取ることができます。

サンプルでは、ボタンを押すごとに戦闘力が上昇し、その増加分を表示するプログラムを見てみます。
（ドラゴンボールネタです…(´ー｀)）

<div id="app">
  <template v-if="power <= 22000">
    <span>戦闘力：{{power}}</span>
    <button v-on:click="powerUp">上昇</button>
    <p>{{message}}</p>
  </template>
  <template v-else>
    スカウターが壊れました。
  </template>
</div>

var app = new Vue({
  el: '#app',
  data: {
    power: 13000,
    click: 0,
    message: ''
  },
  methods: {
    powerUp: function() {
      this.power += this.click  * 300 + 1000;
      this.click += 1;
    }
  },
  watch: {
    power: function(afterPower, beforePower) {
      this.message = '戦闘力が' + (afterPower - beforePower) + '上昇しました。';
    }
  }
});

今回は戦闘力の増加分に変化をつけるため、ボタンのクリック回数によって変わるようにしました。

power プロパティ値の変化を監視するためにwacth オプションに登録し、その関数オブジェクトは変化後と変化前の power プロパティ値を引数としています。

（変化後の戦闘力　－　変化前の戦闘力）とすることで増加分を求めています。