KATUBLO | エンジニアの日常BLOG
2019年05月11日

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

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

 

computedとは

computedのサンプルコード

実行結果

 

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

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

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

 

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

 

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

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

 

 

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

 

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

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

 

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

 

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

https://blog.capilano-fw.com/?p=485

 

 

 

 

最後まで読んで頂き、ありがとうございました。
SNS等でのシェアが頂ければ幸いです!

プロフィール

@KATUO

現在都内私立大学に通う大学4年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習を開始。現在は「ToC向け大規模サービスを運営するメガベンチャー」と「AIスタートアップ」でインターンで修行中。2020年4月からwebエンジニアとして社会人生活スタート。

Twitterアカウント

広告

スポンサー