01.2. Watch 중첩데이터 감시(deep) 및 즉시실행(immediate)

0.1. 포스팅에서 watch를 사용해야하는 경우에 대해 정리하였다.

• watch를 사용해야할 경우

1. mustache(템플릿 표현식) 없이 값의 변화를 관찰하고 싶을때는 watch를 사용한다.
2. 비동기적 처리시 사용한다!
3. 값이 바뀔 때마다 매번 호출되어야 할 경우
4. 연산을 얼마나 자주 수행하는지 제한가능(lodash의 debounce 이용)

그런데! 데이터가 배열이나, 객체일 경우에 값이 변해도 변수는 여전히 같은 객체를 가리키고 있기 때문에 watch 가 실행되지 않는다. 아래와 같이 해결한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

export default {
  data: () => ({
    processingItems: ['a', 'b ']
  }),
  
  watch: {
    processingItems() {
      console.log('123') // 실행되지 않는다.
    },
    
    processingItems: {
      immediate: true, // 최초 초기화시 1회 실행되게 한다.
      deep: true, // 변화를 deep하게 감시한다.
      handler(newVal, oldVal) {
        console.log('change') // 실행된다.
      }
    }
  }
}

Reference

https://stackoverflow.com/questions/52343140/how-to-implement-dirty-state-in-vuejs

https://ui.toast.com/weekly-pick/ko_20190307/

Comment and share