はじめに

この投稿ではcomputed（算出プロパティ）について自分の理解を整理してみました。

そもそもプロパティとは

computedの説明に入る前にプロパティについて簡単に整理します。
プロパティとはひとことで言えば「オブジェクトを定義するもの」です。

オブジェクトは下のsample.jsでいうところの{ }（波カッコ）で定義されます。
{ }の中にはプロパティ（sample.jsではel）と値（sample.jsでは'#app'）を記述します。

sample.js

new Vue({
    el: '#app'
});

computedとは

では、本題に入っていきます、

computedとはVue.jsに用意されているプロパティの一つで、
「算出プロパティ」とも呼ばれます。

computedはdataプロパティと同様にデータの変化を画面に即時反映しますが、
computedはデータそのものに何らかの処理を与えたいものをプロパティにしたいときに使用します。

使用例は以下の通りです。
こちらは簡単なカウンターアプリで
10を超えると「10以上です」という文字が表示されます。

index1.html

<body>
    <div id="app">
        <button @click="increment">+1</button>
        <p>{{ count }}</p>
        <div v-if="isOver">10以上です</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./script/script.js"></script>
</body>

script1.js

new Vue({
    el: '#app',
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    },
    computed: {
            isOver() {
            return this.count >= 10;
        }
    }
});

（JSFiddleにそのままコピペして挙動を手元で確認できます！）

HTMLに条件式を書き込めば良くないか？

先ほどのcomputedを使ったカウンターアプリについて、
以下の実装でも良いのではないか？と思った方もいらっしゃるのではないでしょうか。

index2.html

<body>
    <div id="app">
        <button @click="increment">+1</button>
        <p>{{ count }}</p>
        <div v-if="count >= 10">10以上です</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./script/script.js"></script>
</body>

script2.js

new Vue({
    el: '#app',
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
});

そうです、computedなんて使わず、
HTML側のコードに直接 "count>=10" と書く込む方法です。

実際にこの実装でもアプリは想定通りの挙動をしてくれます。

しかし、このような実装は「良くない」とされています。
理由は「HTMLの可読性が下がるため」です。

今回例として示しているのは単純な条件式ですが、
これが更に複雑になり条件式の記述が長くなると、HTMLの可読性を保つことは難しくなります。

以上の観点からv-ifの条件をHTMLのタグには記述せず、
そのようなロジックは冒頭で示した通り算出プロパティを使用して
JavaScript側に分離して実装すべきでしょう。

参考資料

・Vue.js公式ドキュメント
　https://jp.vuejs.org/v2/guide/computed.html
・書籍「Vue.js入門基礎から実践アプリケーション開発まで」
・書籍「たった1日で基本が身に付く！ Vue.js 超入門」

【Vue.js】computedについての理解を整理してみた

はじめに

そもそもプロパティとは

computedとは

HTMLに条件式を書き込めば良くないか？

参考資料