Watch

우리가 알고 있는 특정 데이터들의 변경사항을 감시하는 용도로, 추가적인 로직을 만들 때 watch옵션을 사용할 수 있습니다.

기존의 data뿐만 아니라 computed 데이터에도 사용을 할 수 있습니다.

<template>
  <h1 @click="changeMessage">
    {{ msg }}
  </h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello?'
    }
  },
  computed: {
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  watch: {
    msg() {
      console.log('msg', this.msg)
    },
    reversedMessage() {
      console.log('reversedMessage', this.reversedMessage)
    }
  },
  methods: {
    changeMessage() {
      this.msg ='Good!'
    }
  }
}
</script>

Hello?를 클릭

Hello?를 클릭하면 h1의 내용이 바뀌고 콘솔창에 watch의 제어 내용이 출력되고 있는 것을 확인할 수 있습니다.

(msg가 변경되면 reversedMessage도 변경되기에 둘다 변경되는 것을 확인할 수 있습니다.)

또한 watch메소드를 만들 때 첫번째 매게변수로 변경된 값을 사용할 수도 있습니다.

  watch: {
    msg(newValue) {
      console.log('msg', newValue)
    },
    reversedMessage(newValue) {
      console.log('reversedMessage', newValue)
    }
  },