しおり

Vueインスタンスのオプションに、メソッド(methods)と算出プロパティ(computed)があります。

メソッド(methods)はイベントが発生したときなどの振る舞いを設定し、算出プロパティ(computed)はデータから派生して算出される値を設定します。

コードをみたところ、両者の明確な違いがわかりにくかったので、まとめておきたいと思います。※両者のコードはこんな感じで書きます。

算出プロパティ(computed)

new Vue({
  // ~~~
  computed: {
    //算出プロパティ名: function() {
    //return
  }
});

メソッド(methods)

new Vue({
  // ~~~
  methods: {
    //メソッド名: function() {
    //処理
  }
});

コードを書く段階では、computedとmethodsという名前を除いて、あまり違いがないように思えます。

それでは、両者にどんな違いがあるのかをみていきましょう。

プロパティかどうか

その名の通り、算出プロパティ(computed)はプロパティ、メソッド(methods)はメソッドです。

プロパティである算出プロパティ(computed)は、呼び出す際に()が必要ありません。算出プロパティ名だけで呼び出すことができます。

一方のメソッド(methods)は、呼び出し時に()が必要です。メソッド名()という呼び出し方がされます。

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

算出プロパティ(computed)はキャッシュされ、メソッド(methods)はキャッシュされません。

※公式サイトからの引用です。

算出プロパティの代わりに、同じような関数をメソッドとして定義することも可能です。最終的には、2つのアプローチは完全に同じ結果になります。しかしながら、算出プロパティは依存関係にもとづきキャッシュされるという違いがあります。

 

算出プロパティは、それが依存するものが更新されたときにだけ再評価されます。これはつまり、message が変わらない限りは、reversedMessage に何度アクセスしても、関数を再び実行することなく以前計算された結果を即時に返すということです。

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

このように、算出プロパティ(computed)はキャッシュされるので、Date nowなどのメソッドを算出プロパティでキャッシュ呼び出してしまうと困ったことになります。

前回に呼び出した際にキャッシュされたデータが表示されるので、今日のデータを呼び出せなくなってしまうのです。

一定の計算を行う場合は算出プロパティ(computed)、外部から取得するデータを扱う場合はメソッド(methods)という感じに使い分ける必要がありますね。

PROFILE

はじめまして、大阪のWeb制作会社Yuapです。「Yuap(ユアプ)」とは英語で「あなたのプランナー」という、Your Plannerの頭文字をとった社名です。 ホームページ制作|Webシステム開発|Webコンサルティングなどの業務を通じて、みなさまの事業の成長に貢献できるようなプランナーになれるよう、日々チャレンジしております。

※お問い合わせ・お見積りは無料です。 IT|ホームページ|Webシステムのことならなんでもお気軽にご相談ください。お問い合わせはこちらから。