什么是虚拟 dom 为什么要有虚拟 dom
- 什么是虚拟 dom 虚拟 dom 是对真实的 dom 的映射,它就是一个普通的 js 对象 比如
<h1 id="abc">hello</div>{tagName:'h1',attrs:{id:'abc'},children:['hello']} - 为什么要有虚拟 dom 真实的 DOM 对象身上有一堆的属性和方法,操作起来性能慢 而且直接操作真实的 DOM 每操作一次就会导致一次重绘和回流 所以不太好 频繁操作虚拟 dom 不存在性能问题 等数据全部更新完之后,只会更新真实 DOM 树需要改变的地方,而且渲染新的真实的 dom,只会有一次重绘和回流
- 组件初始化的时候会在 的时候创建一个虚拟 dom 树,当数据有更新的时候,会生成一棵新的虚拟 dom 树,接下来会对新旧 dom 树按照是广度优先、同层进行比较(时间复杂度是 O(n) 线性复杂)