Vue源码阅读笔记(三) VNode

VNode的结构：

export interface VNode {
  tag?: string;
  data?: VNodeData;
  children?: VNode[];
  text?: string;
  elm?: Node;
  ns?: string;
  context?: Vue;
  key?: string | number;
  componentOptions?: VNodeComponentOptions;
  componentInstance?: Vue;
  parent?: VNode;
  raw?: boolean;
  isStatic?: boolean;
  isRootInsert: boolean;
  isComment: boolean;
}

 VNode 只是用来映射到真实 DOM 的渲染，简化了浏览器真实Dom的结构，所以非常轻量和简单。

Virtual DOM 除了它的数据结构的定义，映射到真实的 DOM 要经历 VNode 的 create、diff、patch 等过程。