[Vue.js] 사용자가 입력한 data를 감시하는 watcher

Watcher(감시자) 이란?

• watcher는 데이터 변경을 모니터링 하고, 데이터가 변경 될 때 특정 동작을 수행하게 하는 Vue의 항목이다.
• 사용 예시를 예를 들자면, 특정 데이터가 변경 될 때 로그를 출력하거나, 특정 동작을 트리거(trigger)하기를 원할 때, Watcher를 사용 할 수 있겠다.

 

watch 항목 사용하기

<template>
    <input type="text" v-model="month" />
</template>

<script>
export default {
  data() {
    return {
    	month: 0,
    };
  },
  
  //watch 항목 생성
  watch: {
  	month() {
    	console.log("month값이 변경되었습니다.");
    }
  }
};
</script>

 

위 코드 기준으로 "watch" 라는 항목을 생성해주고, month데이터가 변경될 때마다 이를 감시해주는 month()라는 콜백함수를 생성해뒀다. v-model로 인하여 month라는 데이터가 변경 될 때마다 이제 콘솔에 "month값이 변경되었습니다." 

라는 메세지가 출력 되는 것을 확인 할 수 있다.