VNode是一个类,可以生成不同类型的vnode实例,而不同类型的vnode表示不同类型的真实DOM元素。
VNode类的代码如下:
export default class VNode{
constructor(tag,data,children,text,elm,context,componentOptions,asyncFactory){
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.functionalOptions=undefined
this.functionalScopeId=undefined
this.key=data&&data.key
this.componentOptions=componentOptions
this.componentInstance=undefined
this.parent=undefined
this.raw=false
this.isStatic=false
this.isRootInsert=false
this.isComment=false
this.isCloned=false
this.isOnce=false
this.asyncFactory=asyncFactory
this.asyncMeta=undefined
this.isAsyncPlaceHolder=false
}
get child(){
return this.componentInstance
}
}
vnode表示一个真实的DOM元素,所有真实的DOM节点都使用vnode创建并插入到页面中。
由于Vue.js对组件采用了虚拟DOM来更新视图,当属性发生变化时,整个组件都要进行重新渲染的操作,但组件内并不是所有DOM节点都需要更新,所以讲vnode缓存并将当前生成的vnode和上一次缓存的oldVnode进行比较,只对需要更新的部分进行DOM操作。
因此,VNode的作用:
- 创建DOM节点
- 对比缓存中的旧节点,只更新发生变化的节点,提高性能。