[Vue.js] Watch

Watch

1. 코드 

<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('')
    }
  },
  methods: {
    changeMessage() {
      this.msg += 'Good!'
    }
  }
}
</script>

2. Watch

watch는 데이터의 변화를 감시하는 옵션입니다.

그러므로 아래의 내용을 추가하게 되면, 어떠한 로직이 구현이 되는 것일까요? 먼저 changeMessage()라는 메소드를 통해서 msg라는 데이터를 할당 연산자로 변경을 했습니다. 그러면 watch라는 옵션을 통해서 우리가 지정한 msg라는 해당 데이터는 감시되고 있는 상태가 되는 것입니다.

그러한 감시가 되고 있는 상태에서 변화가 발생하게 되면, 해당하는 watch의 옵션의 로직이 출력이 되는 것입니다.

export default {
  watch: {
    msg() {
      console.log('msg:', this.msg)
    }
  }
}

watch 옵션은 데이터를 감시하는 것뿐만 아니라, computed 데이터에도 적용이 가능합니다.

watch: {
  msg(newValue) { // 매개변수
    console.log('msg:', newValue) //Good!
  },
  reversedMessage(newValue) {
    console.log('reversedMessage: ', newValue) //!dooG
  }
}

watch의 메소드의 첫 번째 매개변수로는 변경된 값을 사용할 수도 있습니다.