컴포넌트가 재렌더되는 원인을 특정하는 방법

컴포넌트가 재렌더되는 원인을 특정하는 방법

앱에서 컴포넌트를 변경할 때 관련 없는 컴포넌트도 여러 개 재구축되는 문제가 있습니다.Vue performance timings 설정을 사용하면 다음과 같은 내용이 표시됩니다(모두 약 200ms 범위 내).

이 컴포넌트가 재렌더되는 원인을 찾고 있습니다.리렌더의 원인을 특정하는 힌트를 확인했는데, 이 스니펫*을 모든 리렌더 컴포넌트에 넣어도 콘솔에 아무것도 기록되지 않습니다.

그러면 이 모든 컴포넌트가 재렌더되는 원인을 어떻게 찾을 수 있을까요?

*실제로 넣은 코드는

public mounted() {
    let oldData = JSON.parse(JSON.stringify(this.$data));
    this.$watch(() => this.$data, (newData) => {
      console.log(diff(oldData, newData));
      oldData = JSON.parse(JSON.stringify(newData));
    }, {
      deep: true,
    });
  }

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/64876458/how-to-determine-what-causes-components-to-rerender