【Vue.js】算出プロパティとメソッドの比較

はじめに

こんにちは！
今回は【Vue.js】算出プロパティとメソッドの違いについてアウトプットしていきます！

算出プロパティとメソッドの違いとは

算出プロパティとメソッドの違いは３点あります。
①算出プロパティ　cpmputed　・・・ （）不要
　 　　　 メソッド　methods・・・　（）必要

②getter,setter
・cpmputed・・・getter,setterが必要
・methods・・・getterのみ必要

③キャッシュ
・cpmputed・・・される
・methods・・・されない

書き方・解説

①プロパティとメソッド

HTML

  <p>
  {{ reversedMessage }}
  <!-- プロパティ -->
  </p>
  <p>
  {{ reversedMessageMethod() }}
  <!-- メソッド -->
  </p>

Vue.js

  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessageMethod: function() {
      return this.message.split('').reverse().join('')
    }
  }

まとめ

上記のようにプロパティには（）不要、メソッドには（）必要というふうになります。
②getter,setter、③キャッシュについては別記事で解説します。

最後に

今回は算出プロパティとメソッドの違いについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！