虚拟Dom

一、什么是虚拟Dom？

虚拟Dom就是使用JS模拟真实Dom

 

二、为什么要使用虚拟Dom？

因为操作每一个真实Dom都数据量很大，如频繁操作会消耗内存与性能，并且每次操作Dom都会造成数据重复添加

比如，一个商品列表，需要做的是新增一个商品

使用真实Dom操作：渲染商品列表 -> 点击新增 -> 删除商品列表 -> 将新增商品加入商品列表中 -> 渲染列表   （ 在这个过程中页面会存在闪一下，有一瞬间是删除-新增的过程 ）

使用虚拟Dom操作：渲染商品列表 -> 点击新增 -> 在商品列表的基础上新增 ->  渲染列表 （整个过程只是其他商品列表不会改变，改变的只是新增的商品）

 

三、虚拟Dom的作用？

1. 维护视图和状态的关系 （用上一次状态与修改等状态进行对比，如果有差异，则更新）

2. 复杂视图情况下提升渲染性能

3. 除了渲染DOM以外，还可以实现 SSR  ( Nuxt.js / Next.js ), 原生应用 ( Weex / React Native ), 小程序  ( mpvue / uni-app ) 等

 

四、虚拟Dom库

Snabbdom：注重简单性，模块化，强大特性和性能的虚拟Dom库