15-什么是Virtual Dom

Posted 2022-02-26 romantic-blood

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会更简单。