꼭 캐싱이 목적이 아니더라도 computed 옵션 속성으로 데이터를 미리 만들어 놓으면 코드의 가독성을 훨씬 높일 수 있습니다. 예를 들어, 숫자 배열에서 짝수만 찾아 총합을 출력하는 코드를 작성한다고 해보겠습니다. 다음과 같이 filter()와 reduce() 메서드를 사용하면 배열 요소 중 짝수만 필터링해서 합을 구할 수 있습니다.
<script>
export default {
data() {
return {
numArr: [1, 2, 3, 4, 5],
};
},
}
</script>
<template>
<h1>{{ numArr.filter((v) => v % 2 === 0).reduce((acc, cur) => acc + cur, 0) }}</h1>
</template>