깊이 들 어가 면 쉽게 Vue. js - --- VNode
5515 단어 vue 학습
(1) Vue. js 에 VNode 클래스 가 존재 합 니 다. 이 를 사용 하면 서로 다른 유형의 vnode 인 스 턴 스 를 예화 할 수 있 고 서로 다른 유형의 vnode 인 스 턴 스 는 각각 다른 유형의 DOM 요 소 를 표시 합 니 다.
(2) 사실 vnode 는 하나의 이름 일 뿐 본질 적 으로 자바 script 의 일반적인 대상 이 고 VNode 류 에서 예화 된 대상 이다.이 자바 script 대상 으로 실제 DOM 요 소 를 설명 하면 이 DOM 요소 의 모든 속성 은 VNode 라 는 대상 에 대응 하 는 속성 이 존재 합 니 다.
(3) vnode 는 노드 설명 대상 으로 이해 할 수 있 고 실제 DOM 노드 를 어떻게 만들어 야 하 는 지 설명 한다.예 를 들 어 tag 는 요소 노드 의 이름 을 나타 내 고 text 는 텍스트 노드 의 텍스트 를 나타 내 며 children 은 하위 노드 를 나타 낸다.
(4) vnode 는 실제 DOM 요 소 를 표시 하고 모든 실제 DOM 노드 는 vnode 를 사용 하여 페이지 에 만 들 고 삽입 합 니 다.(vnode = > DOM = > 보기)
(5) vnode 와 보 기 는 일일이 대응 합 니 다.우 리 는 vnode 를 자바 script 대상 버 전의 DOM 요소 로 이해 할 수 있다.
(6) 보 기 를 렌 더 링 하 는 과정 은 먼저 vnode 를 만 든 다음 에 vnode 를 사용 하여 실제 DOM 요 소 를 만 들 고 마지막 으로 페이지 렌 더 링 보 기 를 삽입 하 는 것 입 니 다.
2. VNode 의 역할
(1) 렌 더 링 보 기 를 만 들 때마다 vnode 를 만 든 다음 에 실제 DOM 을 만들어 페이지 에 삽입 하기 때문에 지난번 렌 더 링 보 기 를 만 들 때 만 든 vnode 를 캐 시 할 수 있 습 니 다. 그 다음 에 보 기 를 다시 렌 더 링 해 야 할 때마다 새로 만 든 vnode 와 지난번 캐 시 된 vnode 를 비교 하여 어떤 차이 점 이 있 는 지 확인 할 수 있 습 니 다.이런 다른 점 을 찾아내 고 이 를 바탕 으로 진실 한 DOM 을 수정 합 니 다.
(2) Vue. js 는 현재 상태 에 대한 수사 전략 에 중간 입 도 를 사용 하고 있다.상태 가 바 뀌 었 을 때 구성 요소 단계 만 알려 주 고 구성 요소 에 가상 DOM 을 사용 하여 보 기 를 렌 더 링 합 니 다.
(3) 어떤 상태 가 바 뀌 었 을 때 이 상태의 구성 요소 만 알려 줍 니 다.
(4) 구성 요소 가 사용 하 는 여러 상태 중 하나 가 변화 하면 전체 구성 요 소 는 다시 렌 더 링 해 야 합 니 다.
3. Vnode 의 유형
(1) vnode 의 종류
주석 노드
텍스트 노드
원소 노드
구성 요소 노드
함수 식 구성 요소
클론 노드
(2) vnode 는 Javascript 중의 한 대상 으로 서로 다른 유형의 vnode 간 에는 속성 만 다 를 뿐 정확하게 말 하면 유효 속성 이 다르다.VNode 클래스 를 사용 하여 vnode 를 만 들 때 인 자 를 통 해 속성 을 설정 할 때 잘못된 속성 은 기본적으로 undefined 나 false 로 할당 되 기 때 문 입 니 다.vnode 에 잘못된 속성 은 무시 하면 됩 니 다.
export const createEmptyVNode = text =>{
const node = new VNode();
node.text = text;
node.isComment = true;
return node
}(1) 하나의 주석 노드 는 두 개의 유효한 속성 만 있 습 니 다. - text 와 isComment, 나머지 속성 은 모두 기본 undefined 또는 false 입 니 다.
//
// vnode ：
{
text:" ",
isComment:true
}export function createTextVNode(val){
return new VNode(undefined,undefined,undefined,String(val))
}(1) 텍스트 형식의 vnode 가 생 성 되 었 을 때 text 속성 만 있 습 니 다.
// vnode
{
text:"Hello Berwin"
}(2) 역할: 정적 노드 와 슬롯 노드 (slot node) 를 최적화 합 니 다.
(3) 정적 노드 를 예 로 들 면 구성 요소 안의 어떤 상태 가 변 하면 현재 구성 요 소 는 가상 DOM 을 통 해 보 기 를 다시 렌 더 링 합 니 다. 정적 노드 는 내용 이 변 하지 않 기 때문에 처음으로 렌 더 링 함 수 를 실행 하여 vnode 를 가 져 오 는 것 을 제외 하고 후속 업 데 이 트 는 렌 더 링 함 수 를 실행 하여 vnode 를 다시 생 성 할 필요 가 없습니다.따라서 이 때 는 클론 노드 를 만 드 는 방법 으로 vnode 를 복제 하고 클론 노드 를 사용 하여 렌 더 링 합 니 다.이렇게 하면 렌 더 링 함 수 를 다시 실행 하여 새로운 정적 노드 의 vnode 를 생 성하 여 어느 정도 의 성능 을 향상 시 킬 필요 가 없다.
export function cloneVNode(vnode,deep){
const cloned = new VNode(
vnode.tag,
vnode.data,
vnode.children,
vnode.text,
vnode.elm,
vnode.context,
vnode.componentOptions,
vnode.asyncFactory
)
cloned.ns = vnode.;
cloned.isStatic = vnode.isStatic;
cloned.key = vnode.key;
cloned.isComment = vnode.isComment;
cloned.isCloned = true;
if(deep&&vnode.children){
cloned.chlidren = cloneVNodes(vnode.children);
}
return cloned;
}(4) 기 존 노드 를 복제 할 때 기 존 노드 의 속성 을 모두 새 노드 에 할당 하면 됩 니 다.
(5) 복제 노드 와 복 제 된 노드 간 의 유일한 차 이 는 isCloned 속성 이다. 복제 노드 의 isCloned 는 true 이 고 복 제 된 원시 노드 의 isCloned 는 false 이다.
(2) 예
실제 요소 노드
HelloBerwin
대응 하 는 vnode
{
children:[VNode,VNode],
context:{...},
data:{...},
tag:"p",
....
}(2) 예
구성 요소 노드
대응 하 는 vnode 는 다음 과 같 습 니 다.
{
componentInstance:{...},
componentOptions:{...},
context:{...},
data:{...},
tag:"vue-component-1-child",
....
}(2) 보통 함수 식 구성 요소 의 vnode 는 아래 모양 입 니 다.
{
functionalContext:{...},
functionalOptions:{...},
context:{...},
data:{...},
tag:"div",
....
}총화
(1) vnode 는 하나의 클래스 로 서로 다른 유형의 vnode 인 스 턴 스 를 생 성 할 수 있 으 며, 서로 다른 유형의 vnode 는 서로 다른 유형의 실제 DOM 요 소 를 표시 합 니 다.
(2) Vue. js 가 구성 요소 에 대해 가상 DOM 을 사용 하여 보 기 를 업데이트 하기 때문에 속성 이 변 할 때 전체 구성 요 소 를 다시 렌 더 링 하 는 작업 을 해 야 합 니 다. 그러나 구성 요소 내 에 모든 DOM 노드 가 업데이트 되 어야 하 는 것 은 아 닙 니 다. 따라서 vnode 캐 시 를 현재 새로 생 성 된 vnode 와 지난번 캐 시 된 oldVnode 를 비교 합 니 다.업데이트 가 필요 한 부분 만 DOM 작업 을 하면 많은 성능 을 향상 시 킬 수 있다.
(3) vnode 는 여러 가지 유형 이 있 는데 이들 은 본질 적 으로 Vnode 류 인 스 턴 스 에서 화 된 대상 이 고 유일한 차 이 는 속성 만 다르다.
좋은 웹페이지 즐겨찾기
