watch
데이터의 변화를 감지하고, 그에 반응하여 특정 로직을 실행할 때 사용됩니다.
newValue는 변경되는 값, oldValue는 변경전 값이 호출됩니다.
$nextTick
$nextTick은 데이터 변경에 따른 DOM의 업데이트가 완료된 바로 그 시점에 원하는 코드를 안전하게 실행할 수 있습니다.
예시 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
data() {
return {
message: ''
}
},
watch: {
message(newValue, oldValue) {
this.$nextTick(() => {
console.log('DOM 업데이트 완료 후 작업');
console.log('oldValue : ', oldValue);
console.log('newValue : ', newValue);
});
}
}
});