Watch

What Watch ? 😁

특정한 데이터가 변경되는것을 감시해서 추가적인 로직을 만들어줄때 watch라는 옵션을 사용할 수 있다.
데이터뿐만 아니라 계산된 데이터(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)
      console.log('reversedMessage:', this.reversedMessage)
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'Good!'
    }
  }
}
</script>

<style>

</style>

msg가 바뀌면 reversedMessage도 바뀐다. 현재 watch라는 옵션을 통해 감시하고 있기 때문에 변경이 감지가 되면 내부 로직이 실행이 되는 구조이다.
즉, watch라는 옵션을 통해 감시를 할 수 있고 또한 method의 첫번째 매개변수로 변경된 값을 사용할 수 있다.

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

<style>

</style>

변경된 새로운 값인 newValue

console 창을 확인해보면 동일한 결과!

감시하고 싶은 데이터가 있으면 watch에 메소드처럼 만들어서 메소드의 로직으로 그 데이터가 변경되었을 때 어떤 내용을 실행할지를 명시하면 된다.