vue - watch로 object 감시(모니터링)

프로젝트 진행중 object안에 있는 값을 변경되는것을 감시해야할 일이 생겼다. 기존에 watch를 사용하던데로 작업을 진행하였으나, object를 감시하지 못하였고 이를 해결한 방법을 기술하고자 한다.

 

 

- 기존에 watch를 사용하던 방법은 아래와 같다.

아래와 같은 방법으로 watch를 사용하였으나 object안에 있는 a, b 값이 변경되어도 watch는 동작하지 않았다.

<script>
  export default {
    data: () => ({
      testObject: {
      	a: 'test1'
        b: 'test2'
      }
    }),
    watch: {
      testObject: function (val, oldVal) {
        console.log("데이터 변경됨")
      }
    }
  }
</script>

 

- 해결한 방법

구글링을 통하여 간단히 해결방법을 찾았다. 객체 속의 객체의 값에 대한 변경을 감시하기 위해서는 watch의 옵션인

deep: true를 설정하고, 변경에 관련한 데이터 처리는 handler에 기술한다고 하여 구현을 해보니 정상적으로 동작하였다.

<script>
  export default {
    data: () => ({
      testObject: {
      	a: 'test1'
        b: 'test2'
      }
    }),
    watch: {
      testObject: {
        handler: function (val, oldVal) {
          console.log("데이터 변경됨")
        },
        deep: true
      }
    }
  }
</script>

 

이번 경험을 기반으로 앞으로는 잊지않고 잘 사용할 것 같다!