watch 속성

watch 속성은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다.

 

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

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

 

위 코드는 message라는 데이터의 watch 속성을 지정한 코드이다.

 

message의 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터를 출력한다.

 

 

 

- watch 속성에 메서드 함수를 연결

 

watch 대상 속성에 함수를 연결하는 대신 메서드 함수를 연결할 수 있다.

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    logMessage() {
      console.log(this.message);
    }
  },
  watch: {
    'message': 'logMessage' // 대상 속성과 메서드 함수를 매칭
  }
})

 

 

 

 

- 핸들러와 초기 실행 옵션

 

watch 대상 속성에 다음과 같이 handler()와 immediate 속성을 정의할 수 있다.

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    'message': {
      handler(value, oldValue) {
        console.log(value);
      },
      immediate: true // 컴포넌트가 생성되자마자 즉시 실행
    }
  }
})

 

immediate: true를 추가하게 되면 컴포넌트가 생성되자마자 즉시 실행한다.

 

위 watch 옵션이 포함된 컴포넌트의 라이프 사이클에서 created 전에 해당 watch가 한번 실행되게 된다.