在虚拟dom中，vnode是比较重要的。
什么是vnode
在vuejs中，有一个Vnode类
使用它可以实例不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的dom元素。
例如dom元素有文本节点，元素节点，注释节点等。
constructor(
tag?: string,
data?: VNodeData,
children?: Array<VNode> | null,
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions,
asyncFactory?: Function
) {
this.tag = tag
this.data = data
this.children = children
this.text = text
。。。
}
这是vnode的构造函数。他其实是一个js节点描述对象。描述了怎么样去创建真实的dom节点。
比如tag是表示一个元素节点的名称，text表示文本节点，children表示子节点。
vnode的作用
由于每次渲染视图都要先创建vnode，然后使用它创建真实dom，所以可以将上一次渲染创建的vnode缓存起来。之后每次需要重新渲染，将上一次缓存的和新创建的做对比，查看他们有哪些地方不一样，然后基于此修改dom。
vuejs目前当状态发生变化，通知到组件级别，然后组件内部使用虚拟dom来渲染视图。
也就是组件使用的状态有一个发生变化，那么整个组件就要重新渲染。
所以vnode做diff更新，只更新变化的节点就很重要。
vnode的类型
vnode的类型有以下几种：
- 注释节点
- 文本节点
- 元素节点
- 组件节点
- 函数式节点
- 克隆节点
patch
patch就是patching算法，将vnode渲染成真实dom。
通过它来对比新旧两个vnode有什么不同，然后根据对比结果找到需要更新的节点进行更新。文章来源：https://www.toymoban.com/news/detail-598924.html
使用patching算法计算真正需要更新的节点，最大限度减少dom操作，从而显著提升性能。文章来源地址https://www.toymoban.com/news/detail-598924.html
到了这里，关于vuejs源码之虚拟dom中的vnode的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
