일단 아래의 간단한 예제를 보자.
<div>
<input type="text" v-model="num"/>
<br/>
1부터 입력된 수까지의 합(computed) : <span>{{ sum }}</span>
<br />
1부터 입력된 수까지의 합(method) : <span>{{ sum_method() }}</span>
</div>
<script>
export default {
name: "DataBinding",
components: {},
data() {
return {
num: 0,
}
},
computed: {
sum() {
let n = Number(this.num);
if (Number.isNaN(n) || n < 1) return 0;
return ((1 + n) * n) / 2;
}
},
methods: {
sum_method() {
let n = Number(this.num);
if (Number.isNaN(n) || n < 1) return 0;
return ((1 + n) * n) / 2;
},
}
</script>
결과는 동일하다.
그러나 method 속성은 메서드이기 떄문에 sum_method() 와 같이 호출 구문 형식 을 사용해야 한다.
그런데 작성된 형태를 보니 Computed Property를 사용했을 때와 차이점을 느끼기 힘들고, 얼핏보면 Compute Property가 왜 필요한지 이해가 안될 수도 있다.
메서드와 계산형 속성을 사용했을 때의 최종적인 결과물은 같아보이지만, 내부 작동 방식 에는 차이가 있다.
계산형 속성은 종속된 값에 의해 결괏값이 캐싱된다는 점이다.
입력값이 같은 값이라면 계산형 속성인 sum은 캐싱된 결과값을 바로 리턴하지만, sum_method() 메서드는 매번 실행된다.