前 Vue.js入門 2章 Vue.jsの入門（ディレクティブ）
次 Vue.js入門 3章コンポーネントの基礎（コンポーネントとは何か／Vueコンポーネントの定義）

ライフサイクルフック

ライフサイクルフック一覧とフロー

フックの名前	フックが呼ばれるタイミング
beforeCreate	インスタンスが生成され、データが初期化される前
created	インスタンスが生成され、データが初期化された後
beforeMount	インスタンスがDOM要素にマウントされる前
mounted	インスタンスがDOM要素にマウントされた後
beforeUpdate	データが変更され、DOMに適用される前
updated	データが変更され、DOMに適用された後
beforeDestroy	Vueインスタンスが破棄される前
destroyed	Vueインスタンスが破棄された後

createdフック

この段階ではまだDOM要素はインスタンスに紐づいていないので、DOM要素は取得できない
Vuexを導入していないアプリでWeb APIと通信してデータに関する処理を開始したり、setInterval、setTimeoutで、処理を開始するポイントとして利用される。

mountedフック

DOM要素が紐づいた後に呼ばれ、DOM APIが利用できるようになる。DOM操作やイベントリスナーの登録が必要な場合に使われる。

beforeDestroyフック

インスタンスが破棄される前に呼ばれる。イベントリスナーの破棄、タイマー処理のクリアといった、後始末をここで行う。

  var vm = new Vue({
    el: '#app',
    data: function () {
      return {
        count: 0,
        timerId: null
      }
    },
    created: function () {
      console.log('created')
      var that = this
      // データに参照できる
      console.log(this.count)
      // DOM 要素が紐付いていないので undefined
      console.log(this.$el)
      // タイマー処理を開始する
      this.timerId = setInterval(function () {
        that.count += 1
      }, 1000)
    },
    mounted: function () {
      console.log('mounted')
      // DOM 要素が紐付いている
      console.log(this.$el)
    },
    beforeDestroy: function () {
      console.log('beforeDestroy')
      // タイマーの後始末をおこなう
      clearInterval(this.timerId)
    }
  })
  window.vm = vm

実行すると呼び出しされていることがわかる。

メソッド

methodsは以下のように定義する。データの変更や、サーバーにHTTPリクエストを送る際に使われる。

methods: {
  メソッド名: function() {
    // 処理
  }
}

メソッドの呼び出し例。$eventという変数を参照することができる。doBuy($event)と書いても可能。

<button v-bind:disabled="!canBuy" v-on:click="doBuy">購入</button>

イベントオブジェクト

v-onディレクティブの属性値にメソッドを指定した場合は、引数にはデフォルトでイベントオブジェクトが渡される。

methods: {
  メソッド名: function(event) {
    // 引数eventはイベントオブジェクト
  }
}

算出プロパティとメソッドの違いは、算出プロパティはキャッシュ機構があるということ。依存しているデータが変更されない限り、算出プロパティはキャッシュ値を使う。キャッシュされた値を使いたくない場合は、メソッドを使う。

サンプルでのメソッドの呼び出し

購入ボタンを設置する。<button v-bind:disabled="!canBuy" v-on:click="doBuy">購入</button>
doBuyメソッドを用意して、購入ボタンが押されたらdoBuyメソッドを呼び出し、alertを表示した後、数量を0に変更する。

<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="app">
  <ul>
    <li v-for="item in items" v-bind:key="item.name">
      {{ item.name }}の個数: <input type="number" v-model="item.quantity" min="0">
    </li>
  </ul>
  <hr>
  <div v-bind:style="errorMessageStyle">
    <ul>
      <li v-for="item in items" v-bind:key="item.name">
        {{ item.name }}: {{ item.price }} x {{ item.quantity }} = {{ item.price * item.quantity | numberWithDelimiter }}円
      </li>
    </ul>
    <p>{{ items[0].name }}: {{ items[0].price }} x {{ items[0].quantity }}</p>
    <p>小計: {{ totalPrice | numberWithDelimiter }}円</p>
    <p>合計(税込): {{ totalPriceWithTax | numberWithDelimiter }}円</p>
    <p v-show="!canBuy">
      {{ 1000 | numberWithDelimiter }}円以上からご購入いただけます
    </p>
    <!-- ボタンが押されたら、メソッドを呼び出す -->
    <button v-bind:disabled="!canBuy" v-on:click="doBuy">購入</button>
  </div>
</div>

var items = [
  {
    name: '鉛筆',
    price: 300,
    quantity: 0
  },
  {
    name: 'ノート',
    price: 400,
    quantity: 0
  },
  {
    name: '消しゴム',
    price: 500,
    quantity: 0
  }
]
var vm = new Vue({
  el: '#app',
  data: {
    items: items
  },
  filters: {
    numberWithDelimiter: function (value) {
      if (!value) {
        return '0'
      }
      return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
    }
  },
  methods: {
    doBuy: function () {
      // 本来はここで、サーバーと通信をおこなう
      alert(this.totalPriceWithTax + '円のお買い上げ！')
      this.items.forEach(function (item) {
        item.quantity = 0
      })
    }
  },
  computed: {
    totalPrice: function () {
      return this.items.reduce(function (sum, item) {
        return sum + (item.price * item.quantity)
      }, 0)
    },
    totalPriceWithTax: function () {
      return Math.floor(this.totalPrice * 1.08)
    },
    canBuy: function () {
      return this.totalPrice >= 1000
    },
    errorMessageStyle: function () {
      // canBuyが偽の時に赤く表示する
      return {
        border: this.canBuy ? '' : '1px solid red',
        color: this.canBuy ? '' : 'red'
      }
    }
  }
})
window.vm = vm

数量を増やして、1000円以上になると購入ボタンが押せるようになる。

購入ボタンを押すと、ダイアログが表示される。

数量が0に戻り、再び購入ボタンが押せなくなる。

まとめ
- ライフサイクルフックは、初期設定や後始末をすることができる。
- メソッドは、処理をまとめたり共通化することができる。イベント処理を行ったりサーバーとの通信などに使われる。$eventオブジェクトを取得できる。算出プロパティはキャッシュがあるが、メソッドはない。

参考
Vue.js入門基礎から実践アプリケーション開発まで