Vue源码解析：虚拟节点是如何实现的？

本文共计2833个文字，预计阅读时间需要12分钟。

页面初始化时，所有状态都处于准备就绪状态。之后，下一步就是生成组件相应的虚拟节点——VNode。在组件初始化时，VNode 也会执行一次初始化，并存储创建好的虚拟节点对象。

页面初始化的所有状态都准备就绪之后，下一步就是要生成组件相应的虚拟节点—— VNode 。初次进行组件初始化的时候， VNode 也会执行一次初始化并存储这时创建好的虚拟节点对象。在随后的生命周期中，组件内的数据发生变动时，会先生成新的 VNode 对象，然后再根据与之前存储的旧虚拟节点的对比来执行刷新页面 DOM 的操作。页面刷新的流程大致上可以这样简单的总结，但是其实现路程是非常复杂的，为了深入地了解虚拟节点生成和更新的过程，首先来看看 VNode 类的具体实现。

VNode 类

VNode 类的实现是支持页面渲染的基础，这个类的实现并不复杂，但无论是创建Vue组件实例还是使用动态JS扩展函数组件都运用到了渲染函数 render ，它充分利用了 VNode 来构建虚拟DOM树。