この記事の要点

Vue.js の computed（算出プロパティ）と data の違い data: 値そのものを保持 computed: 関数で値を計算、依存する data の変更を自動検知してキャッシュ methods と違い、呼び出すたびに再計算しない → パフォーマンスが良い 依存する data が変わらなければ 何度参照しても 1 回しか計算しない set / get を分けて双方向バインディングにも対応

computed とは

Vue.js の computed（算出プロパティ）は、data の値から計算される派生値を宣言的に書く仕組みです。テンプレートに複雑な式を書かずに済み、結果はキャッシュされるため何度参照しても再計算されません。

data との違い

	data	computed
定義	値そのもの	計算ロジックを返す関数
書き換え	直接代入 (this.x = 1)	原則 read-only（setter 定義で write 可）
キャッシュ	なし	依存 data が変わるまでキャッシュ
用途	UI 状態 / 入力値	派生値・計算結果

実装例（Options API / Vue 2/3 共通）

<template>
    <div>
        <p>value: {{ value }}</p>
        <p>computed_value: {{ computedValue }}</p>
        <p>doubled: {{ doubled }}</p>
        <button @click="value++">value をインクリメント</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: 1,
        };
    },
    computed: {
        // value に依存する派生値
        computedValue() {
            return this.value * 10;
        },
        // 関数として書くだけ。テンプレートでは this. なしの「プロパティ名」で参照
        doubled() {
            console.log('doubled() が呼ばれた');  // value 変更時のみ出力される
            return this.value * 2;
        },
    },
};
</script>

このコードでは value が変わると doubled が再計算されますが、テンプレートで何度 {{ doubled }} を参照しても 1 回しか実行されません。

methods との違い

同じ計算は methods でも書けますが、methods は呼び出すたびに毎回実行されます:

<template>
    <p>{{ doubledMethod() }}</p>  <!-- 呼ばれるたびに再計算 -->
    <p>{{ doubledMethod() }}</p>  <!-- 同じ値を 2 回計算する -->

    <p>{{ doubledComputed }}</p>  <!-- 1 回計算してキャッシュから返却 -->
    <p>{{ doubledComputed }}</p>  <!-- キャッシュ参照 -->
</template>

<script>
export default {
    data() { return { value: 5 }; },
    computed: {
        doubledComputed() { return this.value * 2; }
    },
    methods: {
        doubledMethod() { return this.value * 2; }
    }
};
</script>

	computed	methods
呼び方	プロパティ {{ x }}	関数 {{ x() }}
キャッシュ	あり（依存が変わるまで）	なし
引数	不可	可能
用途	派生値の表示	イベントハンドラ / 引数付き計算

setter 付き computed（双方向バインディング）

computed は通常 read-only ですが、setter を定義すれば書き換えも可能:

export default {
    data() {
        return { firstName: '山田', lastName: '太郎' };
    },
    computed: {
        fullName: {
            // 読み取り時
            get() {
                return this.firstName + ' ' + this.lastName;
            },
            // 書き込み時
            set(newValue) {
                const parts = newValue.split(' ');
                this.firstName = parts[0];
                this.lastName = parts[1] || '';
            }
        }
    }
};

// テンプレート: <input v-model="fullName">
// → 入力すると setter が呼ばれて firstName / lastName が更新される

Composition API での書き方（Vue 3）

import { ref, computed } from 'vue';

export default {
    setup() {
        const value = ref(1);

        // computed
        const doubled = computed(() => value.value * 2);

        // setter 付き
        const fullName = computed({
            get: () => firstName.value + ' ' + lastName.value,
            set: (val) => {
                [firstName.value, lastName.value] = val.split(' ');
            }
        });

        return { value, doubled, fullName };
    }
};

watch との使い分け

• computed: 「A から B を導く」関係。同期的で、テンプレートでそのまま使う値
• watch: 「A が変わったら副作用を起こす」。非同期処理 / API 呼び出し / DOM 操作などに使う

export default {
    data() {
        return { keyword: '', results: [] };
    },
    computed: {
        // 純粋な計算（同期）
        keywordUpper() { return this.keyword.toUpperCase(); }
    },
    watch: {
        // 副作用がある処理（非同期）
        keyword(newVal) {
            this.results = [];
            this.$axios.get('/api/search?q=' + newVal).then(res => {
                this.results = res.data;
            });
        }
    }
};

パフォーマンスを意識する

• computed は依存追跡が自動: 内部で使った data だけが依存になる
• 重い処理に最適: フィルタリング・ソート・集計など
• テンプレートで複雑な式を避ける: {{ users.filter(...).map(...) }} ではなく computed に切り出す
• computed のチェーン: ある computed が別の computed を参照しても OK
• v-for と組み合わせ: ソート済みリストや絞り込み済みリストを computed で返すパターンが王道

よくあるハマりどころ

• computed が更新されない: 配列の push / オブジェクトのプロパティ追加は Vue 2 ではリアクティブにならない → Vue.set() または Vue 3 で解消
• 非同期処理を入れない: computed は同期で値を返すべき。await を使うなら methods + watch
• this.fullName = 'xxx': setter なしで代入するとエラー（Vue 2）または無視（Vue 3）
• 引数を取りたい: computed は引数を取れない → 関数を返す computed か methods を使う