Vue.js の Computed プロパティ: Composition API での効率的なデータ処理

Vue.js の Computed プロパティは、他のプロパティやメソッドの値に基づいて計算された値を返すための機能です。

1. Computed プロパティの基本

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('名無し');
const lastName = ref('太郎');

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});
</script>

<template>
  <div>
    <h1>フルネーム: {{ fullName }}</h1>
  </div>
</template>

• computed 関数を使用して、Computed プロパティ fullName を定義します
• fullName は、firstName と lastName の値を結合してフルネームを計算します
• テンプレート内で fullName を直接参照できます

上記画像のように名無し 太郎と出力されます。

2. get と set メソッド

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)

const doubleCount = computed({
  get() {
    return count.value * 2
  },
  set(newValue) {
    count.value = newValue / 2
  }
})
</script>

<template>
  <div>
    <p>ダブルカウント: {{ doubleCount }}</p>
    <p>カウント: {{ count }}</p>
    <input type="number" v-model.number="doubleCount" />
  </div>
</template>

• get メソッドは、Computed プロパティの値を取得します
• set メソッドは、Computed プロパティの値を設定します
• この例では、doubleCount を設定すると、count の値も適切に更新されます

3. 依存性の追跡

<script setup>
import { ref, computed } from 'vue';

const price = ref(1000);
const discount = ref(10);

const discountedPrice = computed(() => {
  return price.value - (price.value * discount.value / 100);
});
</script>

<template>
  <div>
    <p>割引価格: {{ discountedPrice }}</p>
    <input type="number" v-model.number="price" />
    <input type="number" v-model.number="discount" />
  </div>
</template>

• discountedPrice は、price と discount に依存しています
• どちらかの値が変更されると、discountedPrice が自動的に再計算されます

まとめ

複雑な計算やデータ処理を行う必要がある場合は、computedを使用することでコードの可読性が上がるため積極的に使いたいと感じました。