虚拟DOM（vdom）真的很快吗

vdom

Virtual DOM，虚拟 DOM

用 JS 对象模拟 DOM 数据

是 React 最先提出来的概念，并推广使用

Vue React 等框架的存在价值

组件化

数据视图分离，数据驱动视图 —— 这是核心

只关注业务数据，而不用再关心 DOM 变化

数据视图分离，开发时只需要关注业务数据（React 的 state，Vue 的 data）即可，不用在实时的修改 DOM —— 这一点和 jQuery 有了本质区别。<br>

特别是对于大型的前端项目，将极大的降低开发复杂度，提高稳定性。

数据驱动视图，内部将如何实现呢？—— 借助于 vdom

对比 DOM 操作

下面两者，哪个更快？—— 很明显，前者更快。

- jquery 时代：直接修改 DOM

- 框架时代：生成 vdom ，进行 diff 运算 --> 修改 DOM

但凡事都要有一个业务背景。如果页面功能越来越复杂，直接操作 DOM 代码将会难以阅读和维护，大家更希望要“数据视图分离，数据驱动视图”。

在这个前提下，哪个更快？ —— 当然是后者。因为业务复杂、代码混乱，将会导致很多无谓的 DOM 操作 —— **DOM 操作是昂贵的**

- 直接修改 DOM

- 生成 vdom ，进行 diff 运算 --> 修改 DOM

而相比于昂贵的 DOM 操作，JS 运算非常快。所以 JS 多做事情（vdom diff）是更优的选择。<