[Vue.js] computed vs watch - computed와 watch의 차이점

17 February 2020 / 3 min read

Vue.js를 처음 학습할 때 가장 헷갈렸던 것중 하나가 computed와 watch를 선택해서 사용해야 하는 상황이었다. 언뜻 보면 비슷한 동작을 하는 것 같은데 차이가 있을테니 두 개가 있을 것이고, 이름도 뭔가 계산된거 같은 이름과 지켜보는 듯한 이름으로 차이가 있다. 공식 문서에 두 속성에 대한 개념과 차이점이 잘 정리되어 있지만 되새기는 차원에서 글을 작성해 본다.

computed

computed는 데이터의 변경에 반응하여 특정 값을 반환해주는 일종의 getter 함수이다. 아래는 공식 문서의 예제 코드이다.

	<template>
	<div id="example">
	<p>원본 메시지: "{{ message }}"</p>
	<p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
	</div>
	</template>

	<script>
	export default {
	name: 'vue-computed-example',
	data(){
	return {
	message: '안녕하세요'
	}
	},
	computed: {
	// 계산된 getter
	reversedMessage: function () {
	return this.message.split('').reverse().join('')
	}
	}
	}
	</script>

view raw vue-computed-example.vue hosted with ❤ by GitHub

예제를 실행해보면 message의 값에 따라 reversedMessage가 반환하는 값이 변경됨을 알 수 있다. reversedMessage라는 getter 함수가 message에 의존성을 가지고 있기 때문인데, 이것이 바로 computed 속성의 특징이다.

또한 computed의 장점중 하나는 의존성을 가진 데이터가 변경되지 않으면 getter 호출 시 내부 로직 연산을 다시 하지 않고, 이미 계산되어 있는 결과를 즉시 반환한다는 점이다. 이는 Vue가 데이터를 추적하기 위해 사용하는 방식 덕분인데, 연산이 부담스러운 데이터 같은 경우 이러한 특성을 잘 활용하면 불필요한 연산을 줄일 수 있다. 매번 연산이 필요할 경우엔 method를 활용하면 된다.

watch

watch는 computed와 비슷하지만 특정 데이터가 변경되었을 때 지정한 Callback 함수를 실행하는, 즉 사용 목적이 다른 속성이다. 아래는 공식 문서의 예제 코드를 일관성을 위해 message를 활용한 예제로 변경한 것이다.

	<template>
	<div id="example">
	<p>원본 메시지: "{{ message }}"</p>
	<p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
	</div>
	</template>

	<script>
	export default {
	name: 'vue-watch-example',
	data(){
	return {
	message: '안녕하세요',
	reversedMessage: ''
	}
	},
	watch: {
	// Callback으로 지정된 handler 함수를 실행
	message: {
	handler: function (newVal, oldVal) {
	if (newVal && newVal !== oldVal) {
	this.reversedMessage = newVal.split('').reverse().join('')
	}
	},
	immediate: true,
	deep: true
	}
	}
	}
	</script>

view raw vue-watch-example.vue hosted with ❤ by GitHub

예제를 보면 결과는 computed를 사용했을 때와 동일하지만 코드가 길어지고(습관적으로 watch를 풀어서 사용한 탓도 있다.) 복잡도가 더 올라갔다. 하지만 computed 사용이 더 적합한 예제를 다뤄서 그렇지, 특정 데이터가 변경되었을 때 API 호출 등 특정 동작을 실행해야하는 상황은 watch가 더 적합하다고 Vue에서는 언급하고 있다. 물론 대부분의 경우 computed가 더 적합하다는 말도 함께 언급하고 있지만 말이다.

정리

간단하게 computed와 watch 속성의 차이점에 대해 알아보았다. 둘 다 데이터 변경에 반응하는 특징을 갖고 있지만, 사용 목적이 다름을 인지하고 상황에 맞게 사용하려는 노력이 필요하다. 정리하자면 데이터 변경 시 특정 동작을 취해야 하는 상황은 watch, 그 외 상황은 대체로 computed가 적합하다고 할 수 있다.

References

# Vue.js

Slowly, but steadily