对虚拟DOM的理解

虚拟DOM是啥？

虚拟DOM自身就是一个JavaScript对象，通过不同属性去描述一个视图结构

有啥好处？

1. 将真实元素节点抽象成vnode，可以有效减少直接操作dom次数，提高程序性能

   • 一个真实元素有许多内容（log一个元素试试就知道可多了）虚拟dom只会放最关键的值（如tag、props、children）。
   • 操作dom是比较昂贵的，容易引起重绘和回流，通过操作虚拟dom，等所有操作结束再做批量操作进行diff算法减少操作dom次数
   • 方便实现跨平台

vdom与diff

• 原生DOM：render html string + 重新创建所有的DOM元素
• vdom：render virtual dom + diff + 必要的dom更新

vdom render + diff 基于纯js层面计算，比起DOM操作渲染效率要高。