Watch

Watch: 사용자가 원하는 데이터를 감시하는 역할, 계산된 데이터도 감시를 진행할 수 있다.

 

App.vue 코드

<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(): 감시를 진행할 데이터 명칭
    msg() {
      console.log('msg: ', this.msg)
    },
    // this.데이터명 말고 사용자가 원하는 명칭으로 조회 할 수도 있다.
    reversedMessage(newValue){
      console.log('reversedMessage: ', newValue)
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'Good!'
    }
  }
}
</script>

 

브라우저 확인