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

vue

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

computedの特徴

算出プロパティはリアクティブな依存関係にもとづきキャッシュされるという違いがあります。算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。

引用:「算出プロパティとウォッチャ」

算出プロパティとウォッチャ — Vue.js
Vue.js - The Progressive JavaScript Framework

computedのサンプルコード

実行結果

computed(算出プロパティ)は複雑なロジックを用いて、値を出力するという処理を書くときに使用します。またこのような処理をまとめて、関数にすることでコードの可読性が上がり、computedは毎度キャッシュされるのでメモリの節約になります。

computedとmethodsの違いを比べる

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

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

methods

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

computed

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

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

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