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と使い分けるとよさそうです。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年9月
 1234
567891011
12131415161718
19202122232425
2627282930