Vue Watch 속성 사용 언제 사용하는 것이 좋을까?

Vue에서 감시자(Watch) 속성이 있습니다.

 

Vue watch 란?

watch 속성은 데이터를 감시하고 있고, 데이터가 변경이 될 때, 정의된 함수를 실행합니다.

 

watch 사용방법

data의 정의한 message를 watch 속성 안에 넣고 함수를 작성합니다.

message 데이터가 변경이 되면 정의한 함수가 실행됩니다.

Composition API

const message = ref('Hello, Vue!');

watch(message, function(newValue, oldValue) {
   console.log('message 변경됨:', newVal, oldVal);
});

Options API

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log('message 변경됨:', newVal, oldVal);
    }
  }
});

 

Watch 속성은 언제 사용하는 것이 좋을까?

Computed와 기능이 비슷해 보입니다.

대부분의 기능은 Computed를 사용하는 것이 선언형 프로그래밍 방식을 할 수 있어서 좋습니다.

 

Vue 공식 문서에서도 아래와 같이 이야기하고 있습니다.

하지만 명령적인 watch 콜백보다 computed 속성을 사용하는 것이 더 좋습니다.

 

일반적으로

• Computed를 이용하여
  • 템플릿에 조건에 따라 다른 문자열을 표시하거나,
  • 데이터를 계산하여 표시할 때 사용하는 것이 좋습니다.
• Watch 속성의 경우에는
  • 데이터 변경 시에 특정 함수를 호출해야 할 때 사용하는 것이 좋습니다.
  • 특히 서버와 통신하는 API 함수를 이용하거나,
  • 데이터가 변경 됐을 때, 다른 데이터를 변경해야 하는 상황에서 사용하는 것이 좋습니다.