pythonrender函数_Render函数

Render函数

Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点，提升渲染性能。

虚拟DOM

React和Vue2都使用了虚拟DOM技术，虚拟DOM并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，在状态发生变化时，虚拟DOM会进行Different运算，来更新只需要被替换的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 是否作为根节点插入，被包裹的节点，该属性的值为false。

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

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

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

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

TextVNode 文本节点。

ElementVNode 普通元素节点。

ComponentVNode 组件节点。

EmptyVNode 没有内容的注释节点。

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

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

See the Pen Vue-render函数 by whjin (@whjin) on CodePen.