Vue.js 의 VNode 사용

VNode 가 뭐야?
vue.js 에 VNode 클래스 가 존재 합 니 다.이 를 사용 하면 서로 다른 유형의 vnode 인 스 턴 스 를 예화 할 수 있 고,서로 다른 유형의 vnode 인 스 턴 스 는 각각 다른 유형의 DOM 요 소 를 표시 합 니 다.
예 를 들 어 DOM 요 소 는 요소 노드,텍스트 노드,주석 노드 등 이 있 고 vnode 인 스 턴 스 도 요소 노드 와 텍스트 노드 와 주석 노드 에 대응 합 니 다.
VNode 클래스 코드 는 다음 과 같 습 니 다.

 export default class VNode {
    constructor(tag, data, children, text, elm, context, componentOptions, asyncFactory) {
       this.tag = tag
        this.data = data
        this.children = children
        this.text = text
        this.elm = elm
        this.ns = undefined
        this.context = context
        this.functionalContext = undefined
        this.functionalOptions = undefined
        this.functionalScopeId = undefined
        this.key = data && data.key
        this.componentOptions = componentOptions
        this.componentInstance = undefined
        this.parent = undefined
        this.raw = false
        this.isStatic = false
        this.isRootInsert = true
        this.isComment = false
        this.isCloned = false
        this.isOnce = false
        this.asyncFactory = asyncFactory
        this.asyncMeta = undefined
        this.isAsyncPlaceholder = false
    }
    get child() {
        return this.componentInstance
    }
 }
 

위의 코드 를 통 해 알 수 있 듯 이 vnode 는 하나의 이름 일 뿐 본질 적 으로 는 일반적인 JavaScript 대상 이 고 VNode 류 에서 예화 된 대상 이다.이 자 바스 크 립 트 대상 으로 실제 DOM 요 소 를 설명 하면 이 DOM 요소 의 모든 속성 은 VNode 라 는 대상 에 대응 하 는 속성 이 존재 합 니 다.
쉽게 말 하면 vnode 는 노드 설명 대상 으로 이해 할 수 있 고 그 는 진실 한 DOM 노드 를 어떻게 만들어 야 하 는 지 설명 했다.
예 를 들 어 tag 는 요소 노드 의 이름 을 표시 하고 text 는 텍스트 노드 의 텍스트 를 표시 하 며 children 은 하위 노드 를 표시 합 니 다.vnode 는 실제 DOM 요 소 를 표시 합 니 다.모든 실제 DOM 노드 는 vnode 로 만 들 고 페이지 에 삽 입 됩 니 다.
VNode 에서 DOM 을 만 들 고 보기 에 삽입 하기

그림 은 vnode 를 사용 하여 실제 DOM 을 만 들 고 보기 로 렌 더 링 하 는 과정 을 보 여 줍 니 다.vnode 와 보 기 는 일일이 대응 한 다 는 것 을 알 수 있 습 니 다.우 리 는 vnode 를 자 바스 크 립 트 대상 버 전의 DOM 요소 로 이해 할 수 있다.
보 기 를 렌 더 링 하 는 과정 은 vnode 를 만 든 다음 vnode 를 사용 하여 실제 DOM 요 소 를 만 들 고 마지막 으로 페이지 렌 더 링 보기 에 삽입 하 는 것 입 니 다.
VNode 의 역할
보 기 를 렌 더 링 할 때마다 vnode 를 먼저 만 든 다음 에 만 든 실제 DOM 을 페이지 에 삽입 하기 때문에 지난번 렌 더 링 보 기 를 먼저 만 든 vnode 를 먼저 캐 시 할 수 있 습 니 다.그 다음 에 보 기 를 다시 렌 더 링 해 야 할 때마다 새로 만 든 vnode 와 지난번 캐 시 된 vnode 를 비교 하여 그들 사이 에 어떤 다른 점 이 있 는 지 확인 할 수 있 습 니 다.다른 점 을 찾아내 고 이 를 바탕 으로 진실 한 DOM 을 수정 합 니 다.
Vue.js 는 현재 상태 에 대한 수사 전략 에 중간 입 도 를 채택 하고 있다.상태 가 바 뀌 었 을 때 구성 요소 단계 만 알려 주 고 구성 요소 에 가상 DOM 을 사용 하여 보 기 를 렌 더 링 합 니 다.
그림 에서 보 듯 이 어떤 상태 가 변 했 을 때 이 상태의 구성 요소 만 사용 했다 고 알려 줍 니 다.즉,구성 요소 가 사용 하 는 여러 상태 중 하나 가 변화 하면 전체 구성 요 소 는 다시 렌 더 링 해 야 한 다 는 것 이다.

만약 에 구성 요소 가 한 노드 만 변화 가 생 긴 다 면 전체 구성 요소 의 모든 노드 를 다시 과장 하면 큰 성능 낭 비 를 초래 할 수 있 습 니 다.따라서 vnode 각성 캐 시 에 대해 서 는 지난번 캐 시 와 현재 만 든 vnode 를 비교 하여 차이 가 있 는 노드 만 업데이트 하 는 것 이 중요 합 니 다.이것 도 vnode 의 가장 중요 한 역할 이다.
VNode 의 종류
vnode 는 다양한 유형 이 있 습 니 다.다음 과 같은 몇 가지 가 있 습 니 다.
주석 노드
텍스트 노드
요소 노드
구성 요소 노드
함수 식 노드
클론 노드
앞에서 소개 한 vnode 는 자 바스 크 립 트 대상 으로 서로 다른 유형의 vnode 간 의 실제 속성 이 다 르 고 정확하게 말 하면 유효 속성 이 다르다.VNode 클래스 를 사용 하여 vnode 를 만 들 때 인 자 를 통 해 속성 을 설정 할 때 잘못된 속성 은 기본적으로 undefined 나 false 로 설정 되 기 때 문 입 니 다.vnode 의 잘못된 속성 에 대해 서 는 무시 하면 됩 니 다.
1.주석 노드
주석 노드 를 만 드 는 과정 이 매우 간단 하기 때문에 코드 를 통 해 어떤 속성 이 있 는 지 직접 소개 합 니 다.

    export const createEmptyVNode = text => {
        const node = new VNode()
        node.text = text;
        node.isComment = true;
        return node
    }

하나의 주석 노드 는 두 개의 유효 속성 text 와 isComment 만 있 습 니 다.나머지 속성 은 모두 기본 undefined 또는 false 입 니 다.
예 를 들 어 실제 주석 노드 에 대응 하 는 vnode 는 아래 의 모습 입 니 다.

// <!--      -->
{
    text: "    ",
    isComment: true
}

2.텍스트 노드
텍스트 노드 의 생 성 과정 도 매우 간단 합 니 다.코드 는 다음 과 같 습 니 다.

    export function createTextVNode(val) {
        return new VNode(undefined, undefined, undefined, String(val))
    }

텍스트 형식의 vnode 가 생 성 되 었 을 때 text 속성 만 있 습 니 다:

{
    text: "    "
}
 

3.복제 노드
복제 노드 는 기 존 노드 의 속성 을 새 노드 에 할당 하여 새로 만 든 노드 와 복 제 된 노드 의 속성 을 일치 시 켜 복제 효 과 를 실현 한다.정적 노드 와 슬롯 노드(slot node)를 최적화 하 는 역할 을 합 니 다.
정적 노드 를 예 로 들 면 구성 요소 안의 어떤 상태 가 변 하면 현재 구성 요 소 는 가상 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.ns
        cloned.isStatic = vnode.isStatic
        cloned.key = vnode.key
        cloned.isComment = vnode.isComment
        cloned.isCloned = true
        if (deep && vnode.children) {
            cloned.children = cloneVNodes(vnode.children)
        }
        return cloned
    }

기 존 노드 를 복제 하려 면 기 존 노드 의 속성 을 모두 새 노드 에 할당 해 야 합 니 다.
복제 노드 와 복 제 된 노드 의 위치 이동 의 차 이 는 isCloned 속성 이 고 복제 노드 는 true 이 며 복 제 된 원시 노드 는 false 이다.
4.원소 노드
요소 노드 는 보통 다음 과 같은 4 가지 유효 속성 이 존재 합 니 다.
4.567917.tag:tag 는 하나의 노드 의 이름 이다.예 를 들 어 p,ul,li 와 div 등 이다4.567917.data:속성 변경 은 일부 노드 의 데 이 터 를 포함 하 는데 예 를 들 어 attrs,class 와 style 등 이다children:현재 노드 의 하위 노드 목록 입 니 다현재 구성 요소 의 Vue.js 인 스 턴 스 입 니 다실제 요소 노드 입 니 다.vnode 에 대응 하 는 것 은 다음 과 같 습 니 다.

    // <p><span>Hello</span><span>World</span></p>
    {
        children: [VNode, VNode],
        context: {...},
        data: {...},
        tag: "p",
        ...
    }
 

5.구성 요소 노드
구성 요소 노드 와 요소 노드 가 유사 하고 다음 과 같은 두 가지 독특한 속성 이 있 습 니 다.
componentOptions:구성 요소 노드 의 옵션 매개 변 수 는 propsData,tag,children 등 정 보 를 포함 합 니 다.
componentInstance:구성 요소 의 인 스 턴 스,즉 Vue.js 의 인 스 턴 스 입 니 다.사실 Vue.js 에 서 는 구성 요소 마다 Vue.js 인 스 턴 스 가 있 습 니 다.
vnode 에 대응 하 는 구성 요소 노드 는 다음 과 같 습 니 다.

    // <child></child>
    {
        componentInstance: {...},
        componentOptions: {...},
        context: {...},
        data: {...},
        tag: "vue-component-1-child",
        ...    
    }

6.함수 식 노드
함수 식 노드 는 구성 요소 노드 와 유사 합 니 다.그 는 두 개의 독특한 속성 functionalContext 와 functionalOptions 를 가지 고 있 습 니 다.
보통 함수 식 노드 의 vnode 는 다음 과 같 습 니 다.

     {
        functionalContext: {...},
        functionalOptions: {...},
        context: {...},
        data: {...},
        tag: "div"
      }

총결산
VNode 는 하나의 클래스 로 서로 다른 유형의 vnode 인 스 턴 스 를 생산 할 수 있 으 며,서로 다른 유형의 인 스 턴 스 는 서로 다른 유형의 실제 DOM 을 표시 합 니 다.
Vue.js 는 구성 요소 에 대해 가상 DOM 을 사용 하여 보 기 를 업데이트 하기 때문에 속성 이 변 할 때 전체 구성 요 소 를 다시 렌 더 링 하 는 작업 을 해 야 합 니 다.그러나 구성 요소 내 에 모든 DOM 노드 가 업데이트 되 어야 하 는 것 은 아 닙 니 다.따라서 vnode 캐 시 를 하고 현재 새로 생 성 된 vnode 와 캐 시 된 vnode 를 비교 하여 업데이트 해 야 할 부분 만 DOM 작업 을 하면 많은 성능 을 향상 시 킬 수 있 습 니 다.
vnode 는 여러 가지 유형 이 있 는데 이들 은 본질 적 으로 Vnode 인 스 턴 스 화 된 대상 이 고 유일한 차 이 는 속성 이 다르다 는 것 이다.
Vue.js 의 VNode 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 VNode 사용 에 관 한 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!