Vue.js에서 컴포넌트가 재렌더되는 원인이 되는 데이터 변경을 찾는 방법

Vue.js에서 컴포넌트가 재렌더되는 원인이 되는 데이터 변경을 찾는 방법

Vue.js에서는 일부 데이터가 변경되면 구성 요소가 다시 렌더링(업데이트)합니다.때때로 리렌더 빈도가 너무 높기 때문에 리렌더의 원인이 되는 데이터의 변경에 대해 알고 싶습니다.재렌더의 원인이 되는 변경된 데이터를 어떻게 알 수 있습니까?

Deep-diff 및 단순한 워처를 사용하면 VM 데이터의 이전 복사본과 다른 점을 쉽게 찾을 수 있습니다.

new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  mounted() {
    let oldData = JSON.parse(JSON.stringify(this.$data));
    this.$watch(vm => vm.$data, (newData) => {
      console.log(DeepDiff.diff(oldData, newData));
      oldData = JSON.parse(JSON.stringify(newData));
    }, {
      deep: true
    });
  },
  methods: {
    add: function() {
      this.counter++;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/deep-diff@1/dist/deep-diff.min.js"></script>
<div id="app">
  <button @click="add"> +1 </button> {{ counter }}
</div>

게다가 코멘트에 기재되어 있듯이, 상세 감시자는 컴포넌트의 데이터가 변경되었을 경우에만 동작합니다.보다 결정적인 방법은 다음과 같습니다(https://stackoverflow.com/a/69275418/960380)에도 게재되어 있습니다).

Chrome의 F12 개발 도구를 사용하여 컴포넌트의 재렌더를 트리거하는 원인을 추적할 수 있습니다.다음과 같이 컴포넌트에 업데이트된 후크를 추가합니다.

updated() {

            if (!this.updateCnt)
                this.updateCnt = 1;
           
            if (this.updateCnt > 1) { // set to desired
                debugger;
            }
            console.log(`Updated ${this.updateCnt++} times`);
        }
    }

F12 도구를 열어 Chrome에서 페이지를 새로 고치고 중단점이 나타날 때까지 기다립니다.[ Sources ]탭 우측에 콜스택이 표시되고 현재 스택프레임으로서 updated() 함수가 표시됩니다.콜 스택을 백업하면 갱신이 트리거된 원인이 된 코드가 표시됩니다.제 경우 vue 런타임에서는 reactiveSetter()로 되어 있습니다.이것은 부모 컴포넌트에 속성을 설정함으로써 트리거되었습니다.

언급URL : https://stackoverflow.com/questions/50579835/in-vue-js-how-to-find-what-data-changes-cause-a-component-to-re-render