v-for에서 key 속성의 역할을 살펴보겠습니다!

관련 권장 사항: "vue.js Tutorial"

사실 vue뿐만이 아닙니다. React도 목록 렌더링을 수행할 때 각 구성 요소에 키 속성을 추가해야 합니다.

키의 역할을 설명하려면 먼저 가상 DOM의 Diff 알고리즘을 소개해야 합니다.

우리는 vue와 React 모두 가상 DOM 세트를 구현한다는 것을 알고 있습니다. 이를 통해 DOM 요소를 직접 조작하지 않고 데이터만 조작하여 페이지를 다시 렌더링할 수 있습니다. 그 뒤에 숨겨진 원리는 효율적인 Diff 알고리즘입니다.

vue와 React의 가상 DOM의 Diff 알고리즘은 거의 동일하며 핵심은 두 가지 간단한 가정을 기반으로 합니다.

• 두 개의 동일한 구성 요소는 유사한 DOM 구조를 생성하고, 서로 다른 구성 요소는 서로 다른 DOM 구조를 생성합니다.

• 동일한 레벨의 노드 그룹으로, 고유한 ID로 구분할 수 있습니다.

위의 두 가지 가정을 기반으로 가상 DOM Diff 알고리즘의 복잡성이 O(n^3)에서 O(n)으로 감소됩니다.

여기서 간략하게 설명하기 위해 React의 diff 알고리즘에서 그림을 빌려왔습니다.

페이지의 데이터가 변경되면 Diff 알고리즘은 동일한 수준의 노드만 비교합니다.

노드 유형이 다르면 그냥 종료하세요. 이전 노드를 삭제하고 새 노드를 생성하여 삽입하면 이 노드의 후속 하위 노드는 비교되지 않습니다.

노드 유형이 동일할 경우 노드의 속성이 재설정되어 노드가 업데이트됩니다.

특정 레이어, 즉 리스트 노드에 동일한 노드가 여러 개인 경우 Diff 알고리즘의 업데이트 프로세스도 기본적으로 위의 원칙을 따릅니다.

예를 들어, 다음 상황에서:

B와 C 사이에 F를 추가하려고 합니다. Diff 알고리즘의 기본 실행은 다음과 같습니다.

즉, C를 F로, D를 C로 업데이트합니다. , E를 D로 업데이트하고 마지막에 E를 삽입하는 방식은 매우 비효율적이지 않나요?

따라서 우리는 각 노드를 고유하게 식별하기 위해 키를 사용해야 합니다. Diff 알고리즘은 이 노드를 올바르게 식별하고 새 노드를 삽입할 올바른 위치를 찾을 수 있습니다.

한마디로 key의 주요 기능은 가상 DOM을 효율적으로 업데이트하는 것입니다. 또한 Vue에서 동일한 태그 이름을 가진 요소의 전환 전환을 사용할 때 Vue가 이를 구별할 수 있도록 하는 목적도 사용됩니다. 그렇지 않으면 Vue는 내부 속성만 교체하고 전환을 트리거하지 않습니다. 효과.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 교육

을 방문하세요! !

위 내용은 v-for에서 key 속성의 역할을 살펴보겠습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!