Vue.js 문법 - Watch

 

Watch

 

- 현재 활성화된 인스턴스에서 데이터 변경을 관찰하고 이에 반응하는 좀 더 일반적인 방법인 watch 속성을 제공

- 데이터 변경에 대한 응답으로 비동기 혹은 비용이 많이 드는 작업을 수행하려는 경우가 가장 유용

 

예제

 

<!-- App.vue -->

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

<script>
export default {
  data() {
    return {
      msg: 'Hello?'
    }
  },
  // 변경 사항이 일어나면 동작
  watch: {
    msg() {
      console.log('msg:', this.msg)
    },
     reversedMessage() {
       console.log('reversedMessage:', this.reversedMessage)
     }
  },
  computed: {
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'Good!'
    }
  }
}
</script>