key의 특수 속성은 Vue의 가상 DOM 알고리즘에서 주로 사용되어 이전 노드와 새 노드를 비교할 때 VNode를 식별합니다. 키를 사용하지 않는 경우 Vue는 동적 요소를 최소화하고 가능할 때마다 동일한 유형의 요소를 복구/재사용하는 알고리즘을 사용합니다. 키를 사용하면 키 변경 사항에 따라 요소의 순서를 재정렬하고 키가 존재하지 않는 요소를 제거합니다.
동일한 상위 요소를 가진 하위 요소에는 고유 키가 있어야 합니다. 키가 중복되면 렌더링 오류가 발생합니다.
가장 일반적인 사용 사례는 v-for와 결합하는 것입니다:
으아아아
또한 요소/구성 요소를 재사용하는 대신 강제로 교체하는 데 사용할 수도 있습니다. 다음 시나리오가 발생할 때 유용할 수 있습니다.
목록 데이터를 업데이트할 때 키가 여기에 있나요? 첫 번째 요점: 데이터가 동일한 데이터로 업데이트되면 키를 사용하여 동일한 데이터가 없으면 키를 비교하게 됩니다. 동일하지 않으면 새로운 데이터를 다시 렌더링해야 합니다. 그렇지 않으면 Vue는 렌더링을 위해 기존 데이터를 직접 사용하기 위해 내부 원칙을 사용합니다. 결과적으로 데이터는 예상한 효과를 얻지 못하고 원본을 얻습니다. DOM 스타일과 구성요소를 업데이트할 수 없나요? 내 이해가 맞는지는 모르겠지만, 공식 홈페이지에는 입력에는 키가 있어야 한다고 되어 있는데, 키가 있든 없든 효과는 동일하다는 것을 알았습니다. 누군가 예를 들어줄 수 있는지 궁금합니다. 정말 감사하겠습니다! ! ! ! ! ! ! ! ! ! ! !
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
key의 특수 속성은 Vue의 가상 DOM 알고리즘에서 주로 사용되어 이전 노드와 새 노드를 비교할 때 VNode를 식별합니다. 키를 사용하지 않는 경우 Vue는 동적 요소를 최소화하고 가능할 때마다 동일한 유형의 요소를 복구/재사용하는 알고리즘을 사용합니다. 키를 사용하면 키 변경 사항에 따라 요소의 순서를 재정렬하고 키가 존재하지 않는 요소를 제거합니다.
동일한 상위 요소를 가진 하위 요소에는 고유 키가 있어야 합니다. 키가 중복되면 렌더링 오류가 발생합니다.
가장 일반적인 사용 사례는 v-for와 결합하는 것입니다:
으아아아또한 요소/구성 요소를 재사용하는 대신 강제로 교체하는 데 사용할 수도 있습니다. 다음 시나리오가 발생할 때 유용할 수 있습니다.
구성 요소의 수명 주기 후크를 완전히 트리거합니다.
으아아아전환을 트리거합니다.
텍스트가 변경되면 언제든지 <span>이 업데이트되어 전환이 시작됩니다.
출처 참조: https://cn.vuejs.org/v2/api/#key
목록을 렌더링할 때 데이터의 고유성을 보장해야 하는 경우가 있습니다. 이 키는 고유한 식별자이므로 고유해야 합니다.
목록 데이터를 업데이트할 때 키가 여기에 있나요? 첫 번째 요점: 데이터가 동일한 데이터로 업데이트되면 키를 사용하여 동일한 데이터가 없으면 키를 비교하게 됩니다. 동일하지 않으면 새로운 데이터를 다시 렌더링해야 합니다. 그렇지 않으면 Vue는 렌더링을 위해 기존 데이터를 직접 사용하기 위해 내부 원칙을 사용합니다. 결과적으로 데이터는 예상한 효과를 얻지 못하고 원본을 얻습니다. DOM 스타일과 구성요소를 업데이트할 수 없나요? 내 이해가 맞는지는 모르겠지만, 공식 홈페이지에는 입력에는 키가 있어야 한다고 되어 있는데, 키가 있든 없든 효과는 동일하다는 것을 알았습니다. 누군가 예를 들어줄 수 있는지 궁금합니다. 정말 감사하겠습니다! ! ! ! ! ! ! ! ! ! ! !
위에서 말한 내용은 너무 공식적입니다. 즉, 사이클 성능을 향상시키기 위한 것입니다.
사실 이 내용을 작성하든 안 작성하든 상관없습니다. 하지만 일반적으로 for 루프를 작성하는 것이 더 좋습니다.더 많은 문서를 읽어보는 것이 좋습니다:
http://cn.vuejs.org/v2/guide/...