Vue를 처음 사용하게 된다면
computed와 watch의 차이에 대해 궁금하게 될 것이다.
나도 그렇고 대부분의 사람들도 그런 것 같다.
Vue 공식 문서에서도 이 둘의 차이점을 예시로 설명해주기까지 하는 거 보면 그럴만한가보다.
computed와 watch 모두 Vue 인스턴스 내의 값이 변경되는 것을 감지하는 것은 동일하다.
그렇다면 어떤 점에서 차이가 있는 지 예시로 확인해보자!
computed 예시
우선 computed는 위의 예시처럼 참조하고 있는 값이 변경될 때마다
정의된 계산식에 따라 값을 계산하고 출력한다.
reverseMessage 프로퍼티에 익명 함수가 할당되어 있는 것을 확인할 수 있는데 반환하는 값을 얻기위한 함수이기 때문에 computed는 반드시 return 값이 필요하다.
이 결과 값은 캐싱하여 저장되는데 참조하는 데이터의 변경이 감지되지 않으면 컴포넌트가 리렌더링 되어도 새로 저장하지 않는다.
따라서 변경이 감지되었을 경우에만 computed 함수를 실행시켜 값을 업데이트하고 저장하기 때문에 성능이 좋다.
(= computed로 참조, 변경되지 않은 데이터가 리렌더링 되더라도 캐싱된 data를 사용)
그러면 computed를 계산된 값을 출력할 때 사용한다면
watch는 언제 사용하는가..
간단하게 말하면 watch는 특정 조건이 충족되었을 때 적용할 함수를 실행시키기 위한 트리거로 사용한다.
watch 예시
watch를 정의한 부분을 보면 message 프로퍼티에 익명 함수가 할당되어 있다.
이 익명 함수는 콜백 함수 역할을 하며 message의 값이 변경됨을 감지하고
변경된 후의 값을 첫번째 인자로, 변경되기 전의 값을 두번째 인자로 전달한다.
return 값이 필요하지 않으면서 데이터가 변경되었을 경우 실행시키고 싶은 로직만 필요할 때 사용하면 된다.
즉 watch의 정의된 프로퍼티는 감시할 대상을 의미할 뿐이다.
아 참고로 위의 예시를 < script setup > 형태로 작성하면
이런 모습이다. (script setup 최고 b !)
computed? watch? 언제 어떻게 사용할까
위의 예시에 있는 reverseMessage 프로퍼티는 message의 값에 따라 계산되어 정의된다.
이는 종속관계에 있다고 표현될 수 있는데, 이 종속관계에 있는 값들로 세팅하고 싶을 때 computed로 구현하는 것이 좋다.
단, 종속관계가 복잡해지면 복잡해질수록 재계산 시점을 파악하기 어렵기 때문에 계산된 결과 값을 return 하는 용도로만 사용하여 사이드 이펙트를 방지해야한다.
watch의 경우에는 특정 프로퍼티의 변경이 감지되었을 경우 특정 기능(api 호출, alert 등..)을 실행시키고자 할 때 적합하다.
종속관계가 복잡한 데이터를 watch로 구현할 경우 중복계산이 일어날 수 있고 코드도 복잡해진다. 이는 당연하게도 오류 발생 확률이 커질 것이다.
따라서 computed로 구현이 가능하다면 watch보다 computed로 구현하는 것이 좋다.
(Vue 공식 가이드가 이렇게 추천함 ㅇㅇ)
