vue的virtualDOM的create diff patch过程

VirtualDOM

而 Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点，所以它比创建一个 DOM 的代价要小很多。

2. virtual DOM和真实DOM的区别？

virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构。比如dom是这样的：
<div>
    <p>123</p>
</div>
复制代码对应的virtual DOM（伪代码）：
var Vnode = {
    tag: 'div',
    children: [
        { tag: 'p', text: '123' }
    ]
};

Vnode

在 Vue.js 中，Virtual DOM 是用 VNode 这么一个 Class 去描述，它是定义在 src/core/vdom/vnode.js 中的。

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; // rendered in this component's scope
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node

解释

tag: 当前节点的标签名

data: 当前节点的数据对象，具体包含哪些字段可以参考vue源码types/vnode.d.ts中对VNodeData的定义
children: 数组类型，包含了当前节点的子节点

text: 当前节点的文本，一般文本节点或注释节点会有该属性

elm: 当前虚拟节点对应的真实的dom节点

ns: 节点的namespace

context: 编译作用域


functionalContext: 函数化组件的作用域

key: 节点的key属性，用于作为节点的标识，有利于patch的优化

componentOptions: 创建组件实例时会用到的选项信息

child: 当前节点对应的组件实例

parent: 组件的占位节点

raw: raw html

isStatic: 静态节点的标识

isRootInsert: 是否作为根节点插入，被<transition>包裹的节点，该属性的值为false

isComment: 当前节点是否是注释节点

isCloned: 当前节点是否为克隆节点

isOnce: 当前节点是否有v-once指令

补充下vnodeData在 flow/vnode.js

(tag class on show)

declare interface VNodeData {
  key?: string | number;
  slot?: string;
  ref?: string;
  is?: string;
  pre?: boolean;
  tag?: string;
  staticClass?: string;
  class?: any;
  staticStyle?: { [key: string]: any };
  style?: Array<Object> | Object;
  normalizedStyle?: Object;
  props?: { [key: string]: any };
  attrs?: { [key: string]: string };
  domProps?: { [key: string]: any };
  hook?: { [key: string]: Function };
  on?: ?{ [key: string]: Function | Array<Function> };
  nativeOn?: { [key: string]: Function | Array<Function> };
  transition?: Object;
  show?: boolean; // marker for v-show

  };
};

createElement

Virtual DOM 除了它的数据结构的定义，映射到真实的 DOM 实际上要经历 VNode 的 create、diff、patch 等过程。那么在 Vue.js 中，VNode 的 create 是通过之前提到的 createElement 方法创建的，我们接下来分析这部分的实现

_createElement 方法有 5 个参数，context 表示 VNode 的上下文环境，它是 Component 类型；tag 表示标签，它可以是一个字符串，也可以是一个 Component；data 表示 VNode 的数据，它是一个 VNodeData 类型，可以在 flow/vnode.js 中找到它的定义，这里先不展开说；children 表示当前 VNode 的子节点，它是任意类型的，它接下来需要被规范为标准的 VNode 数组；normalizationType 表示子节点规范的类型，类型不同规范的方法也就不一样，它主要是参考 render 函数是编译生成的还是用户手写的。

VNode可以理解为vue框架的虚拟dom的基类，通过new实例化的VNode大致可以分为几类

EmptyVNode: 没有内容的注释节点

TextVNode: 文本节点

ElementVNode: 普通元素节点

ComponentVNode: 组件节点

CloneVNode: 克隆节点，可以是以上任意类型的节点，唯一的区别在于isCloned属性为true

patch 函数在vdom.patch.js

patch函数接收