티스토리 뷰
목차
반응형
시작하기
Vue.js에서 생성한 객체는 $watch라는 메소드를 갖고 있습니다. 이 메소드를 이용해 데이터 변경을 모니터링(감시)할 수 있습니다.
그러나 $watch 메서드는 객체의 추가 및 삭제를 감지합니다만, 객체(오브젝트) 값이 변경된 경우엔 작동하지 않습니다. 😢
다음과 같은 Vue.js 예를 봐주세요.
(※ 예제에서는 Vue 인스턴스의 watch 옵션이 설정되어 있지만, 인스턴스화할 때 객체의 각 항목에 대해 $watch 메서드가 호출됩니다)
<script>
export default {
data () {
return {
someObj: {
a: 'obj-a',
b: 'obj-b',
c: 'obj-c'
}
}
},
watch: {
someObj: function (val, oldVal) {
console.log('someObj changed')
}
}
}
</script>
이 경우 객체 데이터 someObj 중 중첩된 값(someObj.a, someObj.b, someObj.c)이 변경되더라도 watch 옵션으로 감지할 수 없습니다. 💦
객체의 변경을 감지하려면 다음과 같은 방법을 사용합니다. 😇
객체를 통째로 모니터링(감시) 할 경우 (중첩된 데이터까지 모니터링하려는 경우)
<script>
export default {
data () {
return {
someObj: {
a: 'obj-a',
b: 'obj-b',
c: 'obj-c'
}
}
},
watch: {
someObj: {
handler: function (val, oldVal) {
console.log('someObj changed')
},
deep: true
}
}
}
</script>
options 인수로 deep: true를 설정하여 객체 속의 중첩된 값의 변화를 감지할 수 있습니다. Vue.js 모니터링 할 때 콜백 처리는 handler에 기술합니다.
객체를 개별적으로 모니터링 하는 경우
<script>
export default {
data () {
return {
someObj: {
a: 'obj-a',
b: 'obj-b',
c: 'obj-c'
}
}
},
watch: {
'someObj.a': function(val){
console.log('someObj.a changed');
},
'someObj.b': function(val){
console.log('someObj.b changed');
},
'someObj.c': function(val){
console.log('someObj.c changed');
}
}
}
</script>
watch 키를 'someObj.a' 같이 따옴표(쿼테이션)로 감싸면, 각각의 속성을 개별적으로 모니터링할 수 있습니다.
정리
많은 경우, 데이터의 변경을 감시하려면 계산(computed) 속성이 더 적절하다고 생각합니다만, 안에는 커스텀 watch가 필요한 경우도 있다고 생각합니다 ✌️ 데이터 변경에 반응하는 watch 옵션은 매우 범용성이 높고 편리하네요. 😇
Vue.js 관련 글
vue-property-decorator - vue js nuxt
반응형