Vue. $watch() 톺아보기
$watch()
특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행하도록 해주는 속성
new Vue({
data() {
return {
message: 'Hello vue'
}
},
watch: {
message(newVal, oldVal) {
console.log('newVal: %s, oldVal: %s', newVal, oldVal)
}
}
})기본 사용되는 방법으로 message 데이터의 변경을 감지하여 newVal 변경된 값, oldVal 변경되기 전 값으로 구분된다.
$watch() 다양한 사용 문법
메서드 함수 매칭
watch의 callback 함수를 대신하여 메서드 함수를 매칭시킬 수 있다.
new Vue({
watch: {
'message': 'logMessage'
},
data() {
return {
message: 'Hello'
}
},
methods: {
logMessage() {
console.log(this.message);
}
}
})[Option] Deep
객체 내의 값의 변경을 감지하려면 Options으로 deep: true를 사용한다.
new Vue({
watch: {
user: {
handler(value) {
console.log(value) // { ..., age: 30 }
},
deep: true
}
},
mounted() {
this.user.age = 30;
},
data() {
user: {
name: 'Jkun',
age: 28
}
}
})mounted에서 user 데이터 값을 변경하여 watch 이벤트의 독장을 확인할 수 있다.
deep: true 값을 주석 처리하여 위 코드를 실행하게 되면 console이 뜨지 않는 것을 볼 수 있다.
또한, 아래와 같이 객체 내 선택적으로 감지할 수 있다.
new Vue({
watch: {
'user.age'(value) {
console.log(value); // 30
}
}
...
})[Options] Immediate
컴포넌트가 생성되자마자 즉시 실행되며, 데이터 초기화 이전부터 감시하게 된다.
new Vue({
watch: {
handler(val, oldVal) {
console.log(val, oldVal)
},
immediate: true
}
...
})