Vue内部渲染视图的机制是怎样的？

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

1. 虚拟DOM+基于M的命令式操作DOM：使用jQuery操作DOM节点，随着状态的增加，DOM的操作会越来越频繁，程序的维护难度也越大。现在主流框架都采用声明式操作DOM。

1.什么是虚拟DOM

• 以前M的命令式操作DOM即使用jQuery操作DOM节点，随着状态的增多，DOM的操作就会越来越频繁，程序的状态也越难维护，现在主流的框架都是采用声明式操作DOM，将操作DOM的方法封装起来，我们只要更改数据的状态，框架本身会帮我们操作DOM。
• 虚拟DOM根据状态建立一颗虚拟节点树，新的虚拟节点树会与旧的虚拟节点树进行对比，只渲染发生改变的部分，如下图:

2.引入虚拟DOM的目的

• 把渲染过程抽象化，从而使得组件的抽象能力也得到提升，并且可以适配DOM以外的渲染目标；
• 可以更好地支持SSR、同构渲染等；
• 不再依赖HTML解析器进行模板解析，可以进行更多的AOT(预编译)工作提高运行时效率，还能将Vue运行时体积进一步压缩。

VNode的定义 Vue中定义了VNode的构造函数，这样我们可以实例化不同的vnode 实例如：文本节点、元素节点以及注释节点等。