【Vue.js】算出プロパティの基本

#はじめに
こんにちは！
今回は【Vue.js】算出プロパティの基本についてアウトプットしていきます！

#算出プロパティとは
関数によって算出したデータを返すことができるプロパティ。
算出プロパティでは、computedを使用します。

#書き方・解説
今回は文字列を反転させるプログラムを例として解説していきます。

HTML

<div id="app">
  <p>
    {{ message.split('').reverse().join('') }}
           　　　　　　　 <!--⏫文字列を反転させる-->
  </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

Vue.js

var app = new Vue({
  el: "#app",
  data: {
    message: 'Hello Vue.js!'
  }
})

今まで通りでしたら、上記のように記述していたと思います。
しかし、他のコードや、テンプレートの中に数多く記述してしまうと見にくく、のちに変更するときにわかりにくくなるデメリットが生じます。
このような複雑なロジック、再利用性の高いものは算出プロパティを使用することを推奨します。

HTML

  <p>
    {{ reversedMessage }}
  </p>

Vue.js

  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }

上のようにしっかり反映されました。
記述方法は、今までのメソッドと同じ感じなのですが、多少違うところがありますので、別記事で解説します！

#まとめ
・複雑なロジック、再利用性の高いものは算出プロパティを使用することを推奨する。

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

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

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