코딩 기록

Vue.js $watch 오브젝트 변경 모니터링(감시) 사용법


시작하기

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

vue-native-websocket에 대한 선언 파일을 찾을 수 없습니다

Mocha 플러그인 테스트


댓글(0)