Vuejs에서 무한한 시계 루프를 찾을 방법이 있습니까?

Vuejs에서 무한한 시계 루프를 찾을 방법이 있습니까?

그래서, 저는 큰 VueJS 애플리케이션을 만들고 있는데, 왠지 큰 실수를 했습니다.저는 게터에 시계를 놓고, 시계 안에서 상태를 조작하고 반응적으로 게터를 부르는 행동을 불렀습니다.그래서 저는 무한 루프에 갇혔습니다.한동안 제 애플리케이션은 괜찮았지만, 다른 구성 요소에서 저는 다시 그 개터에 시계를 놓고 로그를 넣었고, 그러고 나서 제 크롬 콘솔이 콘솔 메시지로 가득 찬 것을 보았습니다.그리고 나서 저는 제 시계를 고쳤습니다.

저는 제 Vue 애플리케이션에 다른 무한 시계 루프가 있는지 확인할 방법을 찾고 있습니다.제가 가서 다른 모든 감시자들에게 로그를 넣을 수는 없기 때문입니다.많이 있습니다.

글로벌 믹스인을 사용하여 프로그램적으로 모든 감시자에 로그를 넣을 수 있습니다.이 작업은 다음 코드를 사용하여 수행할 수 있습니다.

Vue.mixin({
  beforeCreate() {
    if (this.$options.watch) {
      Object.entries(this.$options.watch).forEach(([watcherKey, func]) => {
        this.$options.watch[watcherKey] = new Proxy(func, {
          apply(target, thisArg) {
            console.log(`Called watcher ${target.name} on component ${thisArg.$options.name}`);
          },
        });
      });
    }
  },
});

이 코드는 글로벌 Vue 인스턴스에 연결되며 구성 요소가 생성되기 전에 모든 구성 요소에 대해 감시자 함수를 통해 열거되고 프록시로 래핑됩니다.프록시는 감시자가 호출될 때마다 콘솔에 기록하는 트랩을 구현합니다.

너무 미묘한 차이가 있는 경우 Vue Performance Devtool 또는 Chrome Dev Tools의 Performance 탭과 같은 일반적인 성능 도구를 사용하는 방법을 살펴볼 수 있습니다.

• https://github.com/vue-perf-devtool/vue-perf-devtool
• https://developers.google.com/web/tools/chrome-devtools/rendering-tools/

언급URL : https://stackoverflow.com/questions/51908412/is-there-anyway-to-find-infinite-watch-loops-in-vuejs