Vue.js DOM 업데이트 후 이벤트 처리

반응형

• vue.js는 data에 javascript 객체를 선언하면 모든 속성에 getter/setter 부여
• getter/setter는 속성에 엑세스하거나 수정할 때 종속적 추적 및 변경 알림
• watcher 인스턴스는 수정된 모든 속성을 기록, setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 렌더링

비동기 갱신 큐

! Vue는 DOM 업데이트를 비동기로 진행

데이터 변경
-> 큐를 열고 같은 이벤트 루프에서 발생하는 모든 데이터 변경을 버퍼에 담는다
(같은 watcher가 여러 번 발생시 한번만 푸시)
-> 다음 이벤트 루프(tick) : vue 대기열을 비우고 실제 랜더링 작업을 수행

문제 발생 가능 예시

<v-date-picker
      class="v-date-picker"
      :prop="yesterday"
      v-model="selectedDate"
      color="#0080ff"
      header-color="#0080ff"
      :weekday-format="getDay"
      :month-format="getMonth"
      :title-date-format="getMonthDay"
      :header-date-format="getYearMonth"
      :allowed-dates="allowedDates"
      :min="yesterday"
      :max="maxDay"
      show-adjacent-months
      :picker-date.sync="pickerDate"
      @change="selectDate"
      ref="picker"
>
</v-date-picker>

watch: {
    pickerDate (newval, oldval) {
      console.log(newval)
      console.log(oldval)
      // 날짜가 변경되면 실행할 함수
      this.someFunction();
      // -> DOM에서 클래스를 찾고 해당 클래스를 변경
    },
  },

-> 날짜 이동 버튼 클릭 (3월 -> 4월)
-> console.log(newval) : 2022-04
-> console.log(oldval) : 2022-03

! someFunction의 작업이 제대로 수행되지 않는다

• 3월 -> 4월 이동시 4월 화면의 DOM에 작업이 수행되지 않고 3월에 적용됨
• 4월 -> 3월 이동시에는 4월 화면에 적용

-> 데이터는 변경되었지만 아직 랜더링은 이루어지지 않았기 때문

해결 방법

: $nextTick으로 DOM 업데이트 처리 콜백을 받아 사용

watch: {
    pickerDate (newval, oldval) {
      this.$nextTick(function () {
        // DOM 업데이트 이후
        
        // 날짜가 변경되면 실행할 함수
        this.someFunction();
        // -> DOM에서 클래스를 찾고 해당 클래스를 변경
      });
    },
  },