Vue.js 算出プロパティ

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

算出プロパティとは

算出プロパティは、Vueインスタンスが持っているcomputedという名前のプロパティのことで、

メソッドに近い感覚で使うことができ、

値を処理して、テンプレート側に処理した値を渡すことができます。

メソッドとの違い

算出プロパティは依存関係に基づいてキャッシュされるという違いがあり、

算出プロパティ内で使われている値が更新されて時にのみ、

関数を再び実行するというところで、

その値が変わらなければ、もともと1回計算された処理をキャッシュとして残し、2回目からは結果だけを残すというところがメソッドとの大きな違いです。

算出プロパティの使い方

公式ドキュメントを参考にして、

下記のコードを作り、実行してみます。

サンプルコード

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>算出前: "{{ message }}"</p>
      <p>算出後: "{{ reversedMessage }}"</p>
    </div>
  </body>
</html>
<script>
  var obj = {
    message: 'Vue.jsは便利'
  }

  vm = new Vue({
    el: '#app',
    data: obj,
    computed: {
      reversedMessage: function() {
        return this.message.split('').reverse().join('')
      }
    }
  })
</script>

実行結果