说说 Vue.js 中的 Virtual DOM 技术

Virtual DOM 不是 DOM ，它是一个轻量级的 JavaScript 对象，当状态发生变化时， Virtual DOM 会进行 Diff 运算，只更新那些需要真正被替换的 DOM 。

因为 Virtual DOM 只是基于 JavaScript 进行计算，所以相对于 DOM 来说，性能更高，开销更小。

Vue.js 2 中的 Virtual DOM 是通过 VNode 来实现的，每个 DOM 元素或组件都会对应一个 VNode 对象：

var VNode = function VNode (
        tag,
        data,
        children,
        text,
        elm,
        context,
        componentOptions
    ) {
        this.tag = tag;
        this.data = data;
        this.children = children;
        this.text = text;
        this.elm = elm;
        this.ns = undefined;
        this.context = context;
        this.functionalContext = undefined;
        this.key = data && data.key;
        this.componentOptions = componentOptions;
        this.componentInstance = undefined;
        this.parent = undefined;
        this.raw = false;
        this.isStatic = false;
        this.isRootInsert = true;
        this.isComment = false;
        this.isCloned = false;
        this.isOnce = false;
    };

参数	类型	说明
tag	string	当前节点标签名。
data	VNodeData	当前节点数据对象。
children	Vnode[]	当前节点的子节点数组。
text	string	当前节点文本。
elm	Node	当前节点所对应的 DOM 节点。
ns	string	当前节点命名空间。
context	Vue	编译作用域。
functionalContext	-	函数化组件作用域。
key	string 或 number	节点的 key。
componentOptions	VnodeCopmonentOptions	组件的 option 选项。
componentInstance	Vue	当前节点所对应的组件实例。
parent	VNode	当前节点的父节点。
raw	boolean	是否为原生 HTML，innerHTML 为 true，textContent 时为 false。
isStatic	boolean	是否为静态节点。
isRootInsert	boolean	是否做为根节点被插入。
isComment	boolean	是否为注释节点。
isCloned	boolean	是否为克隆节点。
isOnce	boolean	是否有 v-once 指令。

VNode 分为以下类型：

类型	说明
TextVNode	文本节点。
ElementVNode	元素节点。
ComponentVNode	组件节点。
EmptyVNode	注释节点。
CloneVNode	以上任意类型的拷贝节点，区别就是它的 isCloned 为 true。

说说 Vue.js 中的 Virtual DOM 技术

猜你喜欢