【vue.js】初心者がcomputedとmethodsの違いを解説

フレームワーク

こんにちは。KATUOです。今回はvue.jsにおける「computedとmethodsの違い」について解説していきたいと思います。この記事を書こうと思ったきっかけはインターン先で、computedに書くと読み込まれるのに、methodsの書くと読み込まれないプロパティが存在するとい場面に遭遇したのがきっかけです。

 

computedとは

computedのサンプルコード

実行結果

 

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

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

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

 

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

 

キャッシュされるとなにが違う?

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

 

 

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

 

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

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

 

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

 

こちらのサイトに非常にわかりやすくまとめられていたため、参考にさせていただきました。

Vueの「methods」と「computed」の違い – console dot log

 

 

 

 

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