【Vue.js】computed(算出プロパティ)とmethods(メソッド)の違い

computedとmethodsは似ているからつい「methodsで良くね?」となる。

しかし、両者には下記2つの違いがある。

  1. 呼び出すときに()が必要かどうか
  2. キャッシュされるかどうか

順に見ていく。

違い1:()が必要かどうか

computedはプロパティで、methodsはメソッドという違いがある。

「プロパティを呼び出すときは()が要らず、メソッドを呼び出すときは()が要る」という説明で違いの一つ目は完結。

プロパティ = オブジェクトの持つ情報
メソッド = オブジェクトに紐付く関数

https://qiita.com/hirotatsu/items/1e56186dd24e55d0bcac

……と書いても分かりづらいので、コードで補足。

return this.text.toUpperCase().split('').reverse().join('')

という、 変数text大文字に変換(toUpperCase)して分解(split)して反転(reverse)させて結合(join)して返すという処理があったとする。

これをcomputedとmethodsにそれぞれ定義してみる。

// --SNIP--
data: {
  text = 'hello vue.js'
},
computed: {
  computedHantai: function(){
    return this.text.toUpperCase().split('').reverse().join('');
  }
},
methods: {
  methodsHantai: function(){
    return this.text.toUpperCase().split('').reverse().join('');
  }
},
// --SNIP--

これをHTMLからそれぞれから呼び出す場合に違いが生じる。

<h2>computedから呼び出す</h2>
<p>{{ computedHantai }}</p>
<h2>methodsから呼び出す</h2>
<p>{{ methodsHantai() }}</p> 

異なる呼び出しだけど描画には下の通り同じ処理が走る。

See the Pen computed&methods1 by Takasaki (@tkskds) on CodePen.

computedはプロパティだから()が要らない。
methodsはメソッドだから()が必要。

あとはsetterが使えるかどうかという点もあるらしいけど、僕はオブジェクト指向に明るいわけではないので割愛。

参考 算出 Setter 関数https://jp.vuejs.org/v2/guide/computed.html#算出-Setter-関数

ただし、

算出プロパティの代わりに、同じような関数をメソッドとして定義することも可能です。

https://jp.vuejs.org/v2/guide/computed.html

とのことなので、基本的には変わらない。

多分大きな違いは下の2番目の方だ。

キャッシュされるかどうか

computedはキャッシュされ、
methodsはキャッシュされない。

これが具体的にどういう違いをもたらすか。

乱数を生成して返す処理である下記のコードを、

return Math.random();

computedとmethodsそれぞれに定義して、HTMLで呼び出す。

<ul> <!--computedから呼び出し-->
  <li>{{ computedRandNum }}</li>
  <li>{{ computedRandNum }}</li>
  <li>{{ computedRandNum }}</li>
</ul>
<ul> <!--methodsから呼び出し-->
  <li>{{ methodsRandNum() }}</li>
  <li>{{ methodsRandNum() }}</li>
  <li>{{ methodsRandNum() }}</li>
</ul>

すると結果は以下の通りだ。

See the Pen computed&methods1 by Takasaki (@tkskds) on CodePen.

すると、こうなる。

computedでは、同じ乱数が表示され、
methodsでは、異なる乱数が表示される
リストになった。

ちなみに上記のPenでは処理を呼び出すたびにコンソールにそれぞれCOMPUTEDとMETHODSという文字列が走るようにしているのだが、

このようにCOMPUTEDは1回しか走らず、METHODSはきちんと3回走ってる。

つまり、大きな処理などはキャッシュされる算出プロパティ(computed)を使えば高速化が図れる

コメントを残す

メールアドレスが公開されることはありません。