はじめに
状態管理はVue.jsでの開発において重要な要素の1つです。今回は、状態管理の負荷を軽減しコードの保守性と可読性を向上させる算出プロパティについて紹介します
算出プロパティの使い方
さっそく全体のコードを見ていきましょう。
<script setup>
import { ref, computed } from "vue";
const numbers = ref([1, 2, 3, 4, 5]);
const addNumber = () => numbers.value.push(numbers.value.length + 1);
const evenNumbers = computed(() =>
numbers.value.filter((num) => num % 2 === 0)
);
</script>
<template>
<button @click="addNumber">Add Number</button>
<ul>
<li v-for="num in evenNumbers" :key="num">{{ num }}</li>
</ul>
</template>
script,templateの処理は以下のようになっています。
script内
- refを使った配列numbersを定義
- numbersを更新するaddNumber関数を定義
- computedでnumbersから偶数のみを抽出するevenNumbersを定義
template内
- evenNumbersの値をリストとして画面に表示
- ボタンをクリックするとaddNumber関数が呼ばれ、numbersに新しい数値が追加
- numbersが更新されると、evenNumbersが自動で再計算され、リストも自動更新
このように、算出プロパティは依存するデータの変更を検知しし自動で再計算されるので状態管理が大幅に簡素化されます。ですが、このコード自体はわざわざ算出プロパティを使わずともメソッドでも同じ処理は出来ますよね？次は算出プロパティとメソッドの比較をしてみましょう。
算出プロパティとメソッドの比較
先程のロジックをメソッドで実装した場合は以下のようになります。
<script setup>
import { ref } from "vue";
const numbers = ref([1, 2, 3, 4, 5]);
const addNumber = () => numbers.value.push(numbers.value.length + 1);
const getEvenNumbers = () => numbers.value.filter((num) => num % 2 === 0);
</script>
<template>
<button @click="addNumber">Add Number</button>
<ul>
<li v-for="num in getEvenNumbers()" :key="num">{{ num }}</li>
</ul>
</template>
メソッド getEvenNumbers は、算出プロパティとは異なり呼び出されるたびに再計算されます。つまりnumbers の値が変更されていなくても毎回フィルタリングのロジックが実行されてしまいます。算出プロパティとメソッドは両方とも同様の計算を行うことができますが、大きな違いは算出プロパティは依存関係を自動的に追跡しキャッシュされることです。つまり、依存する値が変更されない限り、算出プロパティは前回の計算結果をキャッシュして返すため、効率的です。
まとめ
いかがでしたでしょうか？今回は状態管理を簡素化する算出プロパティについて紹介しました。状態管理はVue.jsでの開発において重要な要素の1つです。状態を簡素化することでよりメンテナンス性・可読性の高いアプリケーションになるので積極的に使ってみてください。