구성요소 렌더 함수에 무한 업데이트 루프가 있을 수 있음

구성요소 렌더 함수에 무한 업데이트 루프가 있을 수 있음

VueJS는 처음이야 Vue로부터 경고를 받았어

[Vue warn]: You may have an infinite update loop in a component render function. 

V-bind:style에서 변수에 대해 V-for를 사용하는 경우 템플릿에 예:

<div v-for="item in model.items" v-bind:class="test(item.result)">
{{item.id}}
</div>

스크립트로:

data() {
    return {
        accept: false,
        not_accept: false,
    };
},
methods: {
    test(result) {
        if (result == 'accept') {
            this.accept = true;
            this.not_accept = false;
        } else if (result == 'Not accept') {
            this.accept = false;
            this.not_accept = true;
        } else {
            console.log(result);
        }

        return {
            success: this.accept,
            danger: this.not_accept,
        };
    },
},

@Decade가 그 문제에 대해 옳다.정확한 문제는 다음과 같다.

1. 일부 상태 값을 사용하여 항목 목록을 렌더링하는 렌더링 방법

참고: 상태가 변경될 때마다 렌더링 방법이 트리거됨

2. 그러면 함수 결과에 따라 클래스를 바인딩하려고 하는 것이다.test이 기능은 상태를 다시 변이하려고 시도하여 렌더 - 테스트 - 렌더 사이클을 유발하므로 결함이 있다.

당신은 당신의 시험기능이 대신 다음과 같이 국가를 변이시키지 않도록 함으로써 이 문제를 해결할 수 있다.

methods: {
    test(result) {
        let accept;
        if (result == 'accept') {
            accept = true;
        } else if (result == 'Not accept') {
            accept = false;
        } else {
            console.log(result);
        }

        return {
            success: accept,
            danger: !accept,
        };
    },
}

그게 도움이 되었기를 바래!

첫째, 나는 왜 당신이 그것을 가지고 있는지 잘 모르겠다.not_accept, 그냥 사용할 수 없을까?!this.accept그 자리에?

네가 왜 이런 경고를 받는지 100% 확신할 수는 없지만, 내 생각은 이렇다.

의 시중을 드는 .v-bind:class에 대한 변화를 주시하고 있다.item.result this.accept그리고this.not_accept그 값들의 어떠한 변화도 전화에 의해 그것을 다시 렌더링하게 할 것이다.test 그 에서. 하지만 안에서는test, 당신이 수정하고 있다.this.accept그리고this.not_accept, 그래서 Vue는 그것 때문에 결과가 바뀌었는지 다시 한번 확인할 필요가 있고, 그렇게 함으로써 바뀔 수도 있다.this.accept그리고this.not_accept 다시, 기타 등등.

그class구속력이 있고 자료에는 결함이 있다. class각 항목에 대해 동일한 것으로 설정되지만, 다음에 따라 각 항목에 대한 사용자 정의 스타일을 원하는 것처럼 보인다.item.result. 당신은 정말로 의 어떤 특성도 수정해서는 안 된다.this안쪽에test.

당신의 부품이 어떻게 작동하고 어떻게 해야 하는지 완전히 확신할 수 없기 때문에 철저한 대답을 하기가 어렵다.

vue 명령어로 함수를 전달하는 대신 함수를 호출하면 이 오류가 발생할 수 있다.예를 들면 다음과 같다.

나는 부스트랩 탭이 표시되면 AJAX를 통해 데이터를 로드하도록 사용자 지정 명령을 만들었어.

이것은 나쁘다:

 v-on-show-bs-tab="getFirstPageSites()"

여기서 vue는 함수를 호출(또는 표현식을 평가)하고 그 결과를 지시문에 전달하는 것으로 나타난다.

이것은 좋다:

 v-on-show-bs-tab="getFirstPageSites"

여기서 나는 명령어를 부를 수 있도록 함수를 이름별로 전달하고 있다.

나는 우연히 훈련받지 않은 눈으로 발견하기 쉽지 않은 비슷한 일을 하고 있었다..sort()필터의 배열로 sort배열을 변경하여 구성요소를 재조정한다.해결책은 우선이다.slice배열하고 얕은 사본을 만든 다음 정렬하십시오.

불량:

 filters: {
    sortedDays(days) {
      return days.sort().join(', ');
    },
  },

좋음:

 filters: {
    sortedDays(days) {
      return days.slice().sort().join(', ');
    },
  },

바보 같은 실수를 저지르고도 똑같은 실수를 저질렀다.:click의 구성 요소에서@click

필자의 경우, 나는 어떤 기능 안에 있는 물체를 돌연변이를 하고 있었는데, 그것을 돌연변이를 할 때마다 같은 기능(일종의 재귀)을 반복해서 불렀다고 생각한다.그래서 기능 본체에 이것을 가지고 있는 대신에:

this.someProperty = myObject;

모든 코드를 새로운 함수에 넣었다(함수의 이름은totalesSimples) "myObject"를 반환하는 것.

HTML 부분에서는 다음과 같이 표시하지 않고

{{someProperty}}

나는 그것을 다음과 같이 보여주었다.

{{totalesSimples()}}

이런 식으로, 나는 함수 내부의 속성을 돌연변이로 만들어 보여 주는 것이 아니라, 함수의 결과를 보여주고 있었다.

내가 잘못한 것:

데이터 사용 시 화살표 기능을 사용하지 않음

예를 들면 다음과 같다.

data() {
  state: {
     foo: 'bar'
  }
},
created() {
  bus.$on('data_change', function(data) {
    this.state = Object.assign({}, this.state, data); <-- this will cause an infinite loop
  });
}

대신 화살표 기능 사용:

created() {
  bus.$on('data_change',(data) => {
    this.state = Object.assign({}, this.state, data);
  });
}

흔히 있는 실수인 줄 알았는데

참조URL: https://stackoverflow.com/questions/43151265/you-may-have-an-infinite-update-loop-in-a-component-render-function