[Vue] computed 와 watch

‘computed’와 ‘watch’는 데이터와 변화를 감지하고 처리하는 함수다. 하나씩 알아 보자.

computed

‘computed’는 의존하는 데이터가 변경될 때마다 새로운 값을 계산해서 제공하는 함수다. 변경이 없을 시에는 캐시된 값을 제공한다. 캐시(Cache)란 데이터를 일시적으로 저장해두는 임시 저장소를 말한다.

computed 함수에서 return 되는 값은 computed ref 객체다. 따라서 vue 앱 인스턴스에서 일반 ref처럼 ‘.value’를 통해 참조할 수 있다. 하지만, 반환 값은 읽기 전용이기 때문에 변경하려 해서는 안된다.

computed 함수 대신에 일반 methods를 사용해도 똑같이 기능한다. 하지만 methods는 호출할 때마다 계산을 반복하기에 불필요한 자원이 낭비된다.

watch

watch는 하나 이상의 반응형 데이터를 감시하면서, 감시하는 데이터가 변경된다면 콜백 함수를 호출하는 함수다.

watch(source, (newValue, oldValue) => {
  // 콜백 함수 호출
  })

첫번째 인자인 source가 감시하는 대상이고 두번째 인자는 콜백함수이다. 콜백함수의 첫번째 인자인 newValue는 감시하는 대상이 변화된 값이며, 두번째 인자인 oldValue는 감시하는 대상의 기존 값이다.

computed와 watch 비교

둘 다 특정 데이터를 감시한다는 공통점이 있다. 하지만, computed는 중복되는 연산을 막기 위해 미리 계산된 값만 반환해주지만, watch의 경우 감시하는 데이터가 변화했을 때 특정한 작업을 수행한다는 차이가 있다.