앞의 코드는 <template> 태그 영역의 콧수염 문법이 매우 복잡하고 가독성도 떨어집니다. 뷰에서는 <template> 태그 영역에 사용하는 콧수염 문법을 간단히 작성하도록 권고합니다. 이럴 때 computed 옵션 속성을 사용하면 캐싱도 되고 가독성도 높일 수 있습니다.
<script>
export default {
data() {
return {
numArr: [1, 2, 3, 4, 5],
};
},
computed: {
evenSum() {
return this.numArr
.filter((v) => v % 2 === 0)
.reduce((acc, cur) => acc + cur, 0);
},
},
}
</script>
<template>
<h1>{{ evenSum }}</h1>
</template>