Vue3中VDOM有哪些优化措施？

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

前言：Vue Next 对 Virtual DOM 的 patch 更新做了系列优化，以下内容供自己回顾，记录一些知识点。

1. 增加了 `block`，减少 VDOM 之间的比较次数。

2.使用 `hoisted` 操作减少内存的消耗。

前言

vue-next 对virtual dom的patch更新做了一系列的优化，从编译时加入了 block 以减少 vdom 之间的对比次数，另外还有 hoisted 的操作减少了内存的开销。本文写给自己看，做个知识点记录，如有错误，还请不吝赐教。

VDOM

VDOM的概念简单来说就是用js对象来模拟真实DOM树。由于MV**的架构，真实DOM树应该随着数据（Vue2.x中的data）的改变而发生改变，这些改变可能是以下几个方面：

• v-if
• v-for
• 动态的props（如:class，@click）
• 子节点的改变
• 等等

Vue框架要做的其实很单一：在用户改变数据时，正确更新DOM树，做法就是其核心的VDOM的patch和diff算法。

Vue2.x中的做法

在Vue2.x中，当数据改变后就要对所有的节点进行patch和diff操作。