vue.js v-for 사용중 무한루프에 빠지는 원인

Question

안녕하세요. vue.js 사용중 v-for에서 무한루프가 발생해서 질문 올립니다.쌤플은 단순한데요. 무한루프에 왜 빠지는지 이해가 안되네요. data: () => { return { cnt: 0,... methods: { getCnt(i){ console.log(++this.cnt); return i; }, ++this.cnt 부분 때문에 무한르프가 되어버리는데원인 아시는분 계실까요?

Mambo · Answer

Vue 라이프사이클에 대해서는 기본으로 이해하셔야만 합니다.SFC의 데이터가 변경되면 렌더링을 다시 수행하게 됩니다.

데브파크 · Answer

제가볼땐 vue.js에 버그로 보입니다.참조되지 않는 cnt가 증가한다고for를 계속 랜더링하진 않겠죠. 단순히 v-for 안에서 증가시킬때cnt는 외부변수임에도 불구하고 for문이 계속 반복됩니다. 외부에서 변경하면 for문이 계속도는건 아닙니다. 데이터 먼저 가공해서 처리했는데이런 문제가 있으니 조심하세요.

코딩찡찡이 · Answer

일단 1차적으로 v-for를 돌리면서 key를 지정 안하는건 많은 문제를 야기할 수 있다고 vue에서 꼭 지정할 것을 명시하고 있습니다. 그리고 vue.js 버그가 아니라 vue는 data에 변화가 있으면 리렌더링을 시도합니다. 지금 저 화면을 풀어보시면 cnt는 template에 참조되지 않는 외부변수인데 이게 왜 리렌더링을 통해 화면이 바뀌냐라고 하시면

console.log(++cnt)

<<< 요 상황을 생각해보시면 편할 것 같습니다. 현재 template에서 data를 mutate 시키고 있어요.vue 초보자들이 흔히 하는 실수입니다.애초에 저런 간단한 것도 버그랍시고 그냥 둘만큼 허접한 언어였으면 여태까지 살아남지도 못했어요

NULL만나면 · Answer

음 어떤 결과를 원하시는걸까요? 아래 간단 샘플이라도 도움이 된다면 참조하세요. https://jsfiddle.net/idealful/3s2vcge8/

Tae-woong Kim · Answer

버그가 아니라 휴먼에러입니다. 뷰인스턴스에서 반응성 데이터 프로퍼티는 마법이 아닙니다. this.cnt&#43;&#43;은 this.cnt &#61; this.cnt &#43; 1과 같고자바스크립트에서 객체에 프로퍼티 값을 변경시 get, set 기능으로 값을 할당하는것 이외에 함수형식으로 호출하여 특정루틴을 실행하는게 가능한데 vue 내부적으로 get, set 기능을 이용하여서 set일때 반응형 데이터에 대한 비교호출을 하여 값이 변경되었으면 다시렌더링을 하게됩니다.결과적으로 렌더링함수에서 값을 계속 변경하니 변경에 따른 렌더링이 계속돼서 무한루프로 보이는것이지요. 아무도 템플릿 렌더링 흐름에서 이벤트로 값을 변경하는 함수를 전달하는것 이외에 데이터를 직접 변경하는 함수를 호출하지는 않습니다.

깨구리 · Answer

v-for가 실행된 횟수(p 태그의 개수)를 cnt 값에 넣고 싶은데, 명령형 프로그래밍과 선언형 프로그래밍에 대한 이해 부족으로 이런 코드를 작성하신 것 같습니다. 처음에 흔히 겪는 과정이니 선언적 렌더링에 대해서 조금 더 찾아보시는 것이 좋겠습니다.

데브파크 · Answer

아니에요. 작동하는 코드를 제거하고 쌤플을 급하게 작성할려니 변수명은 신경을 안썼네요.ㅋcnt라는건 의미없는 변수명 입니다. cnt&#61;문자열을 넣으면 무한루프가 안되는데cnt&#43;&#43;를 하면 관련없는 for문이 무한루프를 도네요.for문에 list는 어떤게 들어가도 상관 없습니다. 희안해서-_-ㅋ..

vue.js v-for 사용중 무한루프에 빠지는 원인

7개의 답변

Q&A 목록