虚拟 DOM

React 和 Vue2 都使用了虚拟 DOM 技术更新 DOM 节点，提升渲染性能，虚拟 DOM 并不是真正意义上的 DOM，而是一个轻量级的 JavaScript 对象，在状态发生变化时，虚拟 DOM 会进行 diff 运算，来更新只需要被替换的 DOM，而不是全部重绘

与 DOM 操作相比，虚拟 DOM 是基于 JavaScript 计算的，所以开销会小很多

在 Vue2 中，虚拟 DOM 就是通过一种 VNode 类表达，每个 DOM 元素或组件对对应一个 VNode 对象

VNodeData节点解析：

• children 子节点，数组，也是 VNode 类型

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

• elm 当前虚拟节点对应的真实的 DOM 节点

• ns 节点的namespace
  

• content 编译作用域

• functionalContext 函数化组件的作用域

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

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

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

• parent 组件的占位节点

• raw 原始html
  

• isStatic 静态节点的标识

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

• isConment 当前节点是否是注释节点

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

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

VNode 主要可以分为以下几类：

• TextVNode 文本节点

• ElementVNode 普通元素节点

• ComponentVNode 组件节点

• EmptyVNode 没有内容的注释节点

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

Render 函数通过createElement参数来创建虚拟 DOM，结构精简。其中，访问slot的用法，使用场景集中在 Render 函数

CreateElement 用法

createElement构成了 Vue 虚拟 DOM 的模板，它有 3 个参数：

createElement(     //{String | Object | Function}     //一个HTML标签，组件选项，或一个函数     //必须return上面其中一个 'div'    //{Object} //一个对应属性的数据对象，可选     //可以在template中使用 //{String | Array}     //子节点(VNode)，可选     [         createElement('h1','hello world'),         createElement(MyComponent,{             props:{                 someProp:'foo'             }         }),        'bar'     ] );

第一个参数必选，可以是一个 HTML 标签，也可以是一个组件或函数；第二个是可选参数，数据对象，在template中使用。第三个是子节点，也是可选参数

之前在template中都是在组件的标签上使用v-bind:class、v-bind:style、v-on:click这样的指令，在 Render 函数都将其写在了数据对象中

约束

所有的组件树中，如果 VNode 是组件或含有组件的slot，nameVNode 必须唯一

在 Render 函数里创建了一个cloneVNode的工厂函数，通过递归将slot所有子节点都克隆了一份，并对 VNode 的关键属性也进行复制

在 Render 函数中，不再需要 Vue 内置的指令，比如v-if、v-for。无论要实现什么功能，都可以使用原生 JavaScript