⇨ Vue 記事の目次はこちら

Vue の Computed（算出プロパティ）を使う方法について書いていきます。

「算出プロパティって何やねん」と誰しもが最初は思うはずですが、僕的に一番分かりやすい説明をしたいと思います。

Vue の Computed のデータを書き換えようとするとエラーが出る

公式ドキュメントのこの辺の話です

算出プロパティとは？

簡単に「計算するときに使う機能」だと捉えて良いと思います。

Vue では、Computed で、例えば「計算」や「文字の結合」をしたいときに使います。

確かに、Vue では template の中で計算させることは可能ですが、

テンプレートの中にロジック的なことを詰め込むと、読みづらくなります。

なので、計算や、文字の結合が必要なところは極力この Computed を使いましょう。というやつです。

使う方法

とても簡単な例で、a + b = c の c を表示するものを想定します。

<template>
  <div>{{ c }}</div>
</template>
<script>
  export default {
    data() {
      return {
        a: 1,
        b: 2,
      };
    },
    methods: {
      changeNumber:function{
        this.c = 5
      }
    },
    computed: {
      c: function () {
        return this.a + this.b;
      },
    },
  };
</script>

このように、computed の中で、c という関数を作って return した内容を

テンプレート内で出力することができます。

つまり、c の関数内でめっちゃ長い記述を書いても、テンプレートの中は c で済むということですね。

別の例

例えば computed で長い処理を書くこともできます。

    computed: {
        c: function() {
            const ab = this.a * this.b;
            const ab2 = ab*ab;
            //最終的にreturnしたやつが表示される
            return ab2;
        }
    }

まとめ

以上、Vue の Computed の解説でした。

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！