[vue.js] watch와 computed의 차이점

Vue.js에서 watch와 computed 모두 데이터의 변화를 감지하고 그에 따른 작업을 수행할 수 있는 기능을 제공합니다. 하지만 두 기능의 목적과 사용 방법은 다릅니다.

watch는 Vue 인스턴스의 데이터를 감시하고, 해당 데이터의 변화를 감지하면 지정된 콜백 함수를 실행합니다. 주로 비동기식으로 처리해야 하는 데이터나, 복잡한 계산이 필요한 데이터 등을 감시하기 위해 사용됩니다.

watch: {
  message: function(newValue, oldValue) {
    console.log('message changed:', newValue, oldValue);
  }
}

위 코드에서 watch 옵션으로 message 데이터를 감시하고, 해당 데이터의 값이 변경될 때마다 console.log로 메시지를 출력합니다.

반면, computed는 Vue 인스턴스의 데이터를 연산하여 새로운 값을 반환하는 속성입니다. computed 속성은 응답성(Reactivity)이 있어, 데이터가 변경될 때마다 자동으로 새로운 값을 계산합니다. 계산 결과는 캐시(Cache)되기 때문에, 데이터가 변경되지 않는 한 매번 계산하지 않아도 됩니다.

예시:

computed: {
  reversedMessage: function() {
    return this.message.split('').reverse().join('');
  }
}

위 코드에서 computed 속성으로 reversedMessage를 선언하고, message 데이터의 문자열을 역순으로 바꾼 값을 반환합니다. message 데이터가 변경될 때마다 reversedMessage 속성의 값도 자동으로 갱신됩니다.

따라서, watch와 computed는 목적과 사용 방법이 서로 다릅니다. watch는 데이터의 변화를 감지하고 그에 따른 작업을 수행하는데 주로 사용되며, computed는 데이터를 연산하여 새로운 값을 반환하는 속성으로 사용됩니다.