《Vue.js》初心者がcomputedとmethodsの違いを解説

Vue.js

computed(算出プロパティ)について

computedの特徴

算出プロパティはロジックを書いてその結果、すなわち値を格納するプロパティです。template内にロジックを書いてしまうと、ロジックが複雑だった場合かなり汚くなってしまうので直接template内にはロジックは書かず、算出プロパティに書くという方法が公式サイト側から推奨されています。ちなみに算出プロパティを使うメリットが大きく分けて3点あります。

・業務ロジックをまとめて綺麗に書ける

・計算結果をキャッシュできるのでメモリの節約ができる

・依存しているデータの自動更新

1番目は初めに説明してしまいましたが、残りの2つはまだ説明していないので説明します。算出プロパティは計算結果をキャッシュに保存します。なので一度計算したらその後、算出プロパティが参照された時キャッシュしていたデータを返すだけでいいのでブラウザのメモリの節約になります。そして再度、計算する時は依存するデータの値が更新された場合です。例えば、算出プロパティが返す値に親要素から受け取ったデータが含まれていた場合、このデータが更新されたら自動的にそのデータを使う算出プロパティも自動更新されます。

methods(メソッド)について

methodsの特徴

methodsにはそのコンポーネント内で使用する関数を定義します。算出プロパティとの違いは「計算結果がキャッシュされない」「戻り値を定義しなくてもいい」です。例えばクリックされたらアラートを表示するという関数を作りたい時、この関数は戻り値を必要としませんのでmethodsに定義します。

computedとmethodsの違いを比べる

キャッシュする場合(computed)としない場合(methods)でどのような違いが生じるのか、実際にコードをみながら考えてみましょう。

こちらのコードはボタンが押されるごとにvueのディレクティブ、v-textの表示が切り替わる簡単なvueのプログラムです。切り替わるたびにmethods、computedの関数が呼ばれることになります。ボタンを押したときに表示がどうなるのかというと、

methods

時間がボタンを押したときの時刻

computed

画面を生成したときの時間

という結果になります。これは実行結果をキャッシュするかしないかによって結果が変わっているのです。methodsの処理はキャッシュされないため、ボタンを押したときに、もう一度methods内の処理が実行されます。一方computedの処理はキャッシュされるのでボタンを押しても、画面生成時に処理された結果のキャッシュを使用するのでこのような結果になるのです。

タイトルとURLをコピーしました