Vue.jsのcomputedを使ってみる

Vue.jsのcomputedについて簡単に試してみます。

サンプルコード

例として、入力した文字列を逆にして表示されるようにしてみます。

<div id="app">
  <input type="text" v-model="message">
  <p>{{ reversedMessage }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
});

6～10行目がcomputedの設定になります。
computedのデモページ

computedの代わりにmethodsでも同じような定義ができますが、computedとmethodsでは依存関係にもとづきキャッシュされるかどうかという違いがあります。
先ほどの例に、Date.now()の値を表示するcomputedとmethodsを追加してみます。

<div id="app">
  <input type="text" v-model="message">
  <p>{{ reversedMessage }}</p>
  <p>computed: {{ computedNow }}</p>
  <p>methods: {{ methodsNow() }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    },
    computedNow: function () {
      return Date.now()
    }
  },
  methods: {
    methodsNow: function () {
      return Date.now()
    }
  }
});

inputに入力してmessageの値を変更した際、methodsは変更されますが、computedは変更されません。
methodsは再描画の際に常に関数が実行されますが、computedはキャッシュされた値を返すしているためです。
computedとmethodsのデモページ

今回のような簡単な処理であればどちらでも問題ないですが、重くなりそうな処理がある場合は基本的にcomputedで、処理内容的にキャッシュさせたくない場合はmethodsと使い分けるとよさそうです。