watch

watch 활용 1

• watch는 데이터가 변경이 됐을 때 실행되는 로직이다.
• 감지를 원하는 데이터명을 함수명으로 선언한다. (데이터가 변경되면 함수 호출)
• 일반 데이터, computed의 데이터 등도 변경을 감지할 수 있다.

<template>
  <button @click="changeMessage">Change</button>
  <div>{{ reversedMessage }}</div>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello!'
    }
  },
  computed: { // 읽기 전용
    reversedMessage() {
        return this.msg.split('').reverse().join('')
    }
  },
  watch: {
    msg() {
      console.log( 'msg가 변경됐습니다.' )
    },
    reversedMessage() {
      console.log( '계산된 reversedMessage가 변경됐습니다.' )
    }
  },
  methods: {
    changeMessage() {
      this.msg = 'Good!'
    }
  }
}
</script>

// Change 버튼 누르기 전
!olleH
Hello!
  
// Change 버튼 누른 후
!dooG
Good!
  
// console
'msg가 변경됐습니다.'
'계산된 reversedMessage가 변경됐습니다.'

• 아래와 같이 매개변수로 변경된 값이 들어온다.
• 매개변수 newVal은 아무 이름이나 상관없다.

watch: {
  msg(newVal) {
    console.log( newVal ) // Good!
  },
  reversedMessage(newVal) {
    console.log( newVal ) // !dooG
  }
},
methods: {
  changeMessage() {
    this.msg = 'Good!'
  }
}