15-什么是Virtual Dom

Virtual Dom并不是真正意义上的Dom,而是一个轻量级的JavaScript对象,在状态发生变化的时候,Virtual Dom会进行Diff运算,来更新只需要被替换的DOM,而不是全部重绘。

与DOM操作相比,Virtual Dom是基于JavaScript计算的,所以开销会小很多。

用Virtual Dom创建的JavaScript对象一般会是这样:

var vNode= {

tag:"div",

attributes:{

id:"main"

},

children:[

//节点

]

}

vNode对象通过一些特定的选项描述了真实的DOM结构。

在Vue.js2中,Virtual Dom就是通过一种VNode类表达的,每个DOM元素或者组件都对应一个VNode对象,在Vue.js源码中是这样定义的:

export interface VNode{

tag?:string;

data?:VNodeData;

children?:VNode[];

text?:string;

elm?:Node;

ns?:string;

context?:Vue;

key?:string | number;

componentOptions?:VNodeComponentOptions;

componentInstance?:Vue;

parent?:VNode;

raw?:boolean;

isStatic?:boolean;

isRootInsert:boolean;

isComponent:boolean;

}

具体含义如下:

tag:当前节点的标签名

data:当前节点的数据对象

children:子节点,数组,也是VNode类型

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

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

ns:节点的namespace

context:编译作用域

functionalContext:函数化组件的作用域

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

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

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

parent:组建的占位节点

raw:原始html

isStatic:静态节点的标识

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

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

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

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

VNode主要分为以下几类:

TextVNode 文本节点

ElementVNode 普通元素节点

ComponentVNode 组件节点

EmptyVNode 没有内容的注释节点

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

使用Virtual Dom就可以完全发挥JavaScript的编程能力。在多数场合,我们使用template就足够了,但在一些特定的场景下,使用Virtual Dom会更简单。

猜你喜欢

转载自www.cnblogs.com/Romantic-Blood/p/11108160.html