【Vue】Computedに関するメモ

はじめに

こんにちは、Mottyです。
今回はリアクティブな処理に関するComputedについての簡易メモとなります。

Computedプロパティについて

computedプロパティはリアクティブな値の変更のみを感知します。computedプロパティは依存しているリアクティブな値が変更されたときに自動的に再計算されます。例えば、以下のようなコードを考えてみます↓

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

const count = ref(0);

const doubleCount = computed(() => {
  return count.value * 2;
});

// count.valueを変更するとdoubleCountも自動的に更新される
</script>

この例では、countがリアクティブな値として定義されており、doubleCountはcountに依存しているため、count.valueが変更されると自動的にdoubleCountも再計算されて更新されます。

リアクティブではない値を使用している場合、その値の変更は感知されません。例えば、次のような場合↓

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

let nonReactiveValue = 0;

const count = ref(0);

const doubleCount = computed(() => {
  return count.value * 2 + nonReactiveValue;
});

// nonReactiveValueの変更はdoubleCountに影響を与えない
</script>

この場合、nonReactiveValueはリアクティブではないため、nonReactiveValueの値を変更してもdoubleCountは再計算されません。computedプロパティは依存しているリアクティブな値が変更されたときのみ再計算されるという性質を持っています。