vue js源码全方位深入9 virtual dom.pdfVIP

VirtualDOM

VirtualDOM

VirtualDOM这个概念相信大部分人都不会陌生，它产生的前提是浏览器中的

DOM是很“昂贵的，为了更直观的感受，我们可以简单的把一个简单的div

元素的属性都打印出来，如图所示：

imgsrc=../assets/dom.png

可以看到，真正的DOM元素是非常庞大的，因为浏览器的标准就把DOM设

计的非常复杂。当我们频繁的去做DOM更新，会产生一定的性能问题。

而VirtualDOM就是用一个原生的JS对象去描述一个DOM节点，所以它比

创建一个DOM的代价要小很多。在Vue.js中，VirtualDOM是用VNode这么

一个Class去描述，它是定义在src/core/vdom/vnode.js中的。

exportdefaultclassVNode{

tag:string|void;

data:VNodeData|void;

children:?ArrayVNode;

text:string|void;

elm:Node|void;

ns:string|void;

context:Component|void;//renderedinthiscomponentsscope

key:string|number|void;

componentOptions:VNodeComponentOptions|void;

componentInstance:Component|void;//componentinstance

parent:VNode|void;//componentplaceholdernode

//strictlyinternal

raw:boolean;//containsrawHTML?(serveronly)

isStatic:boolean;//hoistedstaticnode

isRootInsert:boolean;//necessaryforentertransitioncheck

isComment:boolean;//emptycommentplaceholder?

isCloned:boolean;//isaclonednode?

isOnce:boolean;//isav-oncenode?

asyncFactory:Function|void;//asynccomponentfactoryfunction

asyncMeta:Object|void;

isAsyncPlaceholder:boolean;

ssrContext:Object|void;

fnContext:Component|void;//realcontextvmforfunctionalnodes

fnOptions:?ComponentOptions;//forSSRcaching

fnScopeId:?string;//functionalscopeidsupport

constructor(

tag?:string,

data?:VNodeData,

children?:?ArrayVNode,

text?:string,

elm?:Node,

context?:Component,

componentOptions?:VNodeComponentOptions,

asyncFactory?:Function

){

this.tag=tag

this.data=data

this.children=children

this.text=text

this.elm=elm

this.ns=undefined

this.context=context

this.fnContext=undefined

this.fnOptions=undefined

this.fnScopeId=undefined

this.key=datadata.key

ponentOptions