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>
!olleH
Hello!
!dooG
Good!
'msg가 변경됐습니다.'
'계산된 reversedMessage가 변경됐습니다.'
- 아래와 같이
매개변수로 변경된 값
이 들어온다.
- 매개변수 newVal은 아무 이름이나 상관없다.
watch: {
msg(newVal) {
console.log( newVal )
},
reversedMessage(newVal) {
console.log( newVal )
}
},
methods: {
changeMessage() {
this.msg = 'Good!'
}
}