Vue.js) Computed 캐싱

1. Computed 캐싱

Computed 캐싱은 Computed 속성이 의존하는 데이터가 변경되지 않는 한, 이전에 계산된 값을 재사용하여 불필요한 연산을 방지하는 메커니즘입니다.

 

2. 사용 예제

<template>
	<h2>methods 속성 사용</h2>
	<h4>{{ reverseMessage() }}</h4>
	<h4>{{ reverseMessage() }}</h4>
	<h4>{{ reverseMessage() }}</h4>
	<h4>{{ reverseMessage() }}</h4>
	<h2>computed 속성 사용</h2>
	<h4>{{ reversedMessage }}</h4>
	<h4>{{ reversedMessage }}</h4>
	<h4>{{ reversedMessage }}</h4>
	<h4>{{ reversedMessage }}</h4>
</template>

<script>
export default {
	data() {
		return {
			msg1: 'Hello Computed!',
			msg2: 'Hello Computed!',
		};
	},
	computed: {
		reversedMessage() {
			return this.msg1.split('').reverse().join('');
		},
	},
	methods: {
		reverseMessage() {
			return this.msg2.split('').reverse().join('');
		},
	},
};
</script>

methods 속성 사용

!detupmoC olleH

!detupmoC olleH

!detupmoC olleH

!detupmoC olleH

computed 속성 사용

!detupmoC olleH

!detupmoC olleH

!detupmoC olleH

!detupmoC olleH

 

methods에서 호출할 경우 reverseMessage() 함수가 4번이나 호출하여 불필요한 반복을 해야 하지만, computed에서 호출할 경우 reversedMessage() 함수에 한번 변경된 데이터 msg1이 캐싱되기 때문에 변환 과정을 한 번만 거쳐도 됩니다. 반복 횟수가 적으면 큰 문제는 없지만 반복이 많을수록 연산이 복잡할수록 성능에 문제가 발생할 수 있습니다. 이처럼 Vue.js에서 computed 속성의 캐싱은 성능 최적화의 중요한 측면이라고 볼 수 있습니다.

 

참고 문서:

https://v2.ko.vuejs.org/v2/guide/computed.html