vuejs源码之虚拟dom中的vnode

在虚拟dom中，vnode是比较重要的。

什么是vnode

在vuejs中，有一个Vnode类

使用它可以实例不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的dom元素。

例如dom元素有文本节点，元素节点，注释节点等。

constructor(
    tag?: string,
    data?: VNodeData,
    children?: Array<VNode> | null,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    。。。
  }

这是vnode的构造函数。他其实是一个js节点描述对象。描述了怎么样去创建真实的dom节点。

比如tag是表示一个元素节点的名称，text表示文本节点，children表示子节点。

vnode的作用

由于每次渲染视图都要先创建vnode，然后使用它创建真实dom，所以可以将上一次渲染创建的vnode缓存起来。之后每次需要重新渲染，将上一次缓存的和新创建的做对比，查看他们有哪些地方不一样，然后基于此修改dom。

vuejs目前当状态发生变化，通知到组件级别，然后组件内部使用虚拟dom来渲染视图。

也就是组件使用的状态有一个发生变化，那么整个组件就要重新渲染。

所以vnode做diff更新，只更新变化的节点就很重要。

vnode的类型

vnode的类型有以下几种：

• 注释节点
• 文本节点
• 元素节点
• 组件节点
• 函数式节点
• 克隆节点

patch

patch就是patching算法，将vnode渲染成真实dom。
通过它来对比新旧两个vnode有什么不同，然后根据对比结果找到需要更新的节点进行更新。

使用patching算法计算真正需要更新的节点，最大限度减少dom操作，从而显著提升性能。