watch란?

watch는 반응형 콜백으로 Vue 인스턴스의 특정 프로퍼티가 변경될때 지정한 콜백함수가 실행되는 기능입니다.

한 마디로 변수의 변화를 감지해서 값이 변경될 경우 그 변수에 매핑된 함수를 실행시키는 기능입니다.

watch 속성의 구현 코드 형식은 다음과 같습니다.

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message: function(value, oldValue) {
      console.log(value);
    }
  }
})

위 코드는 message라는 데이터에 watch 속성을 지정한 코드입니다. message라는 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터를 출력합니다.

그런데 이렇게만 사용을 할 경우 watch로 배열 형태를 감지할 때 배열 안에 내부 내용만 바뀌었을경우 watch로 배열 형태의 값을 감지할 수 없습니다. 배열 형태를 감지하기 위해서는 배열 외부의 컨테이너가 바뀌어야 watch로 감지가 됩니다.

따라서 배열 내부의 값만 바뀌어도 watch로 감지를 하기 위해서는 deep과 handler를 이용하여 해당 변수에 watch를 걸어줘야 합니다.

deep과 handler를 이용한 코드 형식은 다음과 같습니다.

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array
    },
  },
  watch: {
    colours: {
      // This will let Vue know to look inside the array
      deep: true,

      // We have to move our method to a handler field
      handler()
        console.log('The list of colours has changed!');
      }
    }
  }
}

이렇게 watch를 걸어주면 배열 내부의 데이터만 바뀌어도 watch로 해당 변수의 변화를 감지할 수 있습니다.