第五章、VNode

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的作用：

1. 创建DOM节点
2. 对比缓存中的旧节点，只更新发生变化的节点，提高性能。

查看专栏详情 立即解锁全部专栏