vuejs v-for에 :key 속성이 필요한 이유는 무엇입니까?

vuejs v-for에 :key 속성이 필요한 이유는 무엇입니까?

vscoode가 vuejs v-for에 이 속성이 필요하다고 불평하고 있습니다.

나빠

<p v-for='person in people'> {{person.name}} </p>

좋아요.

<p v-for='(person, index) in people' :key='index'> {{person.name}} </p>

그럼 왜 :key Attribute가 필요한 거죠?

배열에 항목 목록이 있다고 가정합니다.

v-for

v-for를 사용하면 인덱스를 기반으로 모든 항목이 표시됩니다.VueJs는 이러한 모든 요소를 추적하지 않습니다.항목이 변경될 때마다 VueJs는 배열 내 항목의 인덱스에 따라 돔의 위치를 바꿉니다(요소를 이동하는 대신 바꿉니다).(돔의) 위치를 수정하거나 대체하기만 하면 됩니다.배열 항목의 값은 저장되지 않습니다.아이템의 가치를 추적하지 않습니다.인덱스 위치만 저장합니다.

이 문제의 문제는 vuej가 당사의 요구에 따라 업데이트할 수 없는 항목 배열의 변경에 있습니다.(경우에 따라 기억하십시오).vuej가 어레이 내에서 이러한 항목을 추적하도록 하려면 어떻게 해야 합니까?여기서 :key가 나옵니다.

: 키

이제 v-for vuejs의 주요 특성(예: item.id)을 언급할 때 이러한 항목을 직접 참조합니다.이제 vuejs는 위치를 저장하는 대신 항목을 저장합니다.Vuejs는 어레이 내의 모든 항목을 추적합니다.현재 항목이 변경될 때마다 돔의 항목이 변경됩니다.(dom 내의 요소를 이동함으로써): 키는 vuejs가 이러한 모든 항목을 추적하고 있는지 확인합니다.(모든 키 Atribute는 ID와 같이 동작합니다.변경이 있을 때마다 vuejs는 항상 갱신된 값을 취합니다.)

최종 사용자로서 출력에서는 큰 차이가 없지만(:key를 언급하지 않은 경우) 위의 백그라운드에서 문제가 발생합니다.

이 과정을 거치면 분명히 차이를 발견할 수 있을 것이다.키를 사용한 재사용 가능 요소 제어

thankd가 지적한 바와 같이:vue 2.2.0+를 사용하는 경우 vue 컴포넌트에 필요합니다.

2.2.0+에서는 구성 요소와 함께 v-for를 사용할 때 이제 키가 필요합니다.

원답:

Vue.js 공식 가이드에 기재되어 있는 바와 같이

Vue가 각 노드의 ID를 추적하여 기존 요소를 재사용하고 재정렬할 수 있도록 힌트를 제공하려면 고유한 [...]을 제공해야 합니다. 반복된 DOM 컨텐츠가 단순하거나 성능 향상을 위해 일부러 기본 동작에 의존하는 경우가 아니라면 가능하면 항상 v-for와 함께 키를 제공하는 것이 좋습니다.

필요 없어요.key하여 '''를 사용합니다.v-for하지만 이는 좋은 방법이기 때문에 VScode의 IntelliSense는 이를 추가하라고 지시하고 있습니다.

언급URL : https://stackoverflow.com/questions/47395535/why-is-the-key-attribute-needed-in-vuejs-v-for