v-for 구조 간의 차이

v-for 구조 간의 차이

이 두 개의 v-for 구조 간의 차이가 무엇인지 설명해 주실 수 있나요?

<li v-for="item in items" :key="item">
</li>

그리고.

<li v-for="(item, i) in items" :key="i">
</li>

는 Vue 안에 모든 합니다.v-for'열쇠'를 달아야 한다.키는 각 요소를 고유하게 식별하기 위해 사용됩니다.이것은 Vue를 사용하지 않는다고 해서 Vue가 고장난다는 것을 의미하지는 않습니다.key모든 변경을 검출할 수 없는 경우가 있습니다.

"키"는 변경되지 않은 항목의 재렌더링을 건너뛸 수 있기 때문에 Vue에게 특히 유용하고 중요합니다.

렌더링된 컬렉션에서 중복 키가 감지되면 Vue가 경고를 보냅니다.

또 하나의 Vue 권장사항은 '키'는 기본입니다.string ""number는 다시합니다.s) Vue는 Vue 키를 지정합니다.

위의 모든 권장 사항에 따라 고유한 프리미티브 배열을 렌더링할 때

<div v-for="item in items" :key="item" />

...요건을 충족하기 때문에 완벽하게 허용됩니다. 각 키는 원시적이고 고유합니다.

따라서 항목의 순서를 변경하면 Vue는 기존 DOM 요소를 재사용하여 이동 전환을 수행할 수 있습니다(지정된 경우).이걸 테스트하는 건 재밌어요이 예는 Vue 매뉴얼에서 인용한 것입니다.파일을 열고 dev-tools를 사용하여 렌더링된 항목을 변경합니다.color로로 합니다.red섞다Vue가 요소를 재사용하고 항목이 이동될 때 사용자 지정 변경 내용이 유지됩니다.

---

비기본 요소 모음 또는 고유하지 않은 기본 요소 모음에 대해 처리하는 경우 Vue는 여전히 각 항목에 고유한 기본 키를 제공하기를 기대합니다.하나의 식별자를 사용하는 것이 이상적입니다(예:item.id을 충족합니다 이것은 일반적인 솔루션으로 모든 요건을 충족합니다.

각 항목에 고유 식별자가 없을 수 있습니다.또한 어레이 내의 항목 위치를 식별자(키)로 사용하는 것이 간단한 해결책입니다.

<div v-for="(item, index) in items" :key="index" />

그러나 특히 렌더링된 항목의 순서를 변경하고 Vue가 이 변경에 반응할 것으로 예상되는 경우 문제가 될 수 있습니다.안 돼!왜냐하면 Vue는 열쇠만 보니까요.항목을 교환해도 키는 변경되지 않습니다.값만 해당되므로 Vue는 다시 렌더링하지 않습니다.

공식 문서:

• Vue2 목록 렌더링: https://v2.vuejs.org/v2/guide/list.html
• Vue3 목록 렌더링: https://vuejs.org/guide/essentials/list.html#list-rendering

---

렌더링 시 키가 얼마나 유용하고 강력한지 보여주는 예로 이 가상 스크롤러를 참조하십시오.
dev tools를 연 채로 dev tools를 열고 셀을 검사한 다음 스크롤합니다.행과 열은 변경될 때만 업데이트됩니다(각 요소가 업데이트될 때 빠르게 깜박임).
코드를 들여다보면 열쇠가 역동적이라는 걸 알 수 있을 거예요그래서 당신은 첫 번째를 기대되실 겁니다<div>에rows첫 번째 물건의 내용을 항상 렌더링하다rows및 다른 개체가 배열에서 첫 번째 위치를 차지할 때마다 콘텐츠를 스왑합니다.
열쇠 덕분에 Vue는 같은 것을 유지합니다.<div>화면을 가로질러 이동하는 동안 스크롤 창을 떠난 후에만 버립니다.스크롤 업에 따라 새로운<div>는 부모 앞에 추가되며 새로 스크롤하면<div>는 추가되고, 상단의 것은 폐기됩니다.
이것에 의해, 10만 행(및 10억 개의 셀)을 부드럽게 스크롤 할 수 있습니다(이론적으로는, 실제로는 화면에 들어갈 수 있는 만큼의 셀만 렌더링 할 수 있습니다)+1 행+1 열의 추가입니다).

번째 경우,는 v-for-for-da의 모든 됩니다.items이 됩니다.:key을 사용법은, 중복되는 이지 않습니다.items 각 :key고유해야 합니다.

는 또한 v-for의 모든 요소에 걸쳐 됩니다.items또 인 '아니다'를 도입하고 있습니다.i은 '의 itemitems 이 는 '다 하다'에 이 됩니다:key인덱스는 중복될 수 없으므로 이 방법이 더 좋습니다.

★★★★★★의 :key '아트리뷰트'를 주는 예요.a hint for Vue virtual DOM algorithm about change detection happen기본적으로 Vue는 무엇이 변경되고 무엇이 변경되지 않았는지 식별할 수 있습니다.

이를 보다 잘 이해하기 위해 다음 두 가지 시나리오의 용도를 추가합니다.

• :key="item"· 이 · · · · · · · · · · · · · · · · · 。그러면 반복된 각 요소에 고유한 키가 할당됩니다.

  

• :key="index"· ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.된 각 " "를 사용합니다.index.

  

언급URL : https://stackoverflow.com/questions/71285907/difference-between-v-for-structures