[Vue.js] computed & watch

VueJS 공식 문서에서 이 둘을 비교한 세션을 따로 정리할 정도로 이 둘은 하는 역할이 비슷하다.

정확히 이야기하면 하는 역할이 비슷하다기 보다

어떻게 사용하느냐에 따라 watch 가 computed의 역할까지도 할 수 있다고 할 수 있다.

하지만 watch를 남용하지 말아야 한다.

 

Computed : 반응형 getter

computed는 데이터의 변경에 반응하여 특정 값을 반환해주는 일종의 getter 함수이다.

 

Watch : 반응형 콜백

watch 는 computed와 비슷하지만

특정 데이터가 변경되었을 때 지정한 Callback 함수를 실행하는, 즉 사용 목적이 다른 속성이다.

감시할 데이터를 지정하고 그 데이터가 바뀌면 어떠한 함수를 실행하라는 방식의 명령형 프로그래밍 방식이다.

 

차이점

computed는 함수형태로 호출하는 방식이 아니므로 인자를 가질 수 없기 때문에 computed에서는 인자를 넘길 수 없다.

computed에서는 반드시 return 값이 있어야 한다.

 

정리

• 간단하게 computed와 watch 둘 다 데이터 변경에 반응하는 특징을 갖고 있다.
• 따라서 데이터 값이 변경되었을 때 양쪽 다 재호출이 일어난다.
• 참조하고 있는 값이 변경될 때마다 정의된 계산식에 따라 값을 출력하는 computed와 다르게 watch는 값이 변경될 때 실행되는 함수를 우리가 지정할 수 있다.
• 즉 computed는 이미 정의된 계산식에 따라 결과값을 반환할 때 사용되고 watch는 어떤 특정 조건에서 함수를 실행시키기 위한 트리거로서 사용할 수 있다는 의미를 갖고있다.
• 또한 데이터 변경 시 특정 동작을 취해햐 하는 상황은 watch. 그 외 상황은 대체로 computed가 적합하다고 할 수 있다.
• 상황에 맞게 watch 와 computed를 사용하는 것이 좋으나, 일반적으로 선언형 프로그래밍 (computed) 이 명령형 프로그래밍 (watch) 보다 코드 반복이 적은 등 우수하다고 평가하는 경향이 있으므로 쉽게 말했을 때 computed로 구현이 가능하다면 watch가 아니라 computed로 구현하는것이 대게의 경우 옳다고 한다.