Vue js에서 추적 기준 또는 v-for의 키는 어떤 용도로 사용됩니까?

Vue js에서 추적 기준 또는 v-for의 키는 어떤 용도로 사용됩니까?

javascript와 javascript-frameworks는 처음입니다.의 실용성은 무엇입니까?track-by또는key에v-forVue JS에서?

나는 설명서를 읽었지만 그 용도를 잘 이해하지 못했다.

일반적으로는 다음을 사용하는 것이 좋습니다.key사용할 때마다v-for그 주된 이유는 Vue가 성능상의 이유로 스마트하게 기존 컴포넌트를 재사용하려고 하기 때문입니다.이로 인해 컴포넌트가 내부 상태를 가지고 있기 때문에 특히 컴포넌트에 문제가 발생할 수 있습니다.컴포넌트가 속성 변경에 주의를 기울이지 않으면 이전 내부 상태로 렌더링되고 표시된 정보가 올바르게 업데이트되지 않은 것처럼 나타납니다.

여기 제가 몇 주 전에 대답한 질문의 좋은 예가 있습니다.키를 사용하지 않고 컴포넌트를 반복하는 것을 나타냅니다.

<li v-for="item in items">
  <test-component :prop1="item"></test-component>
</li>

데이터 변경 버튼을 클릭하면 속성 값(첫 번째 목록)은 변경되지만 구성 요소(두 번째 목록)의 내부 상태는 변경되지 않습니다.이는 일반적으로 업데이트가 표시되지 않거나 Vue에서 업데이트되지 않은 것으로 보이는 것을 의미합니다.

그러나 구성 요소에 키를 추가하면 각 구성 요소의 ID가 특정되고 ID가 동일한 경우에만 Vue가 해당 구성 요소를 재사용한다고 Vue에게 알립니다.이렇게 하면 일반적으로 나타나는 이상한 동작이 많이 방지됩니다.여기 같은 바이올린이 업데이트되었습니다.

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

이제 데이터 변경 버튼을 클릭하면 내부 상태가 항상 속성과 일치함을 알 수 있습니다.

이는 말 그대로 StackOverflow에서 발생하는 문제에 대한 가장 일반적인 수정 중 하나입니다.키는 목록 렌더링에만 유용한 것이 아닙니다.일반적으로 Vue에서 뭔가 이상한 일이 일어나고 있는 것 같으면 키를 사용하면 문제가 해결됩니다.

다음은 매뉴얼에 기재된 키에 관한 몇 가지 관련 정보입니다.

• 목록과 함께 키 사용.
• 구성 요소를 반복할 때 키는 필수입니다.
• 키의 API 문서.

언급URL : https://stackoverflow.com/questions/44077320/what-is-the-use-of-track-by-or-key-in-v-for-in-vue-js