一. 虚拟DOM:
1.本质就是一个个保存节点信息 属性和内容的 的 描述真实dom的js对象
2. 虚拟dom本质是一个js对象 通过对象来表示真实dom结构 tag用来描述标签 props用来描述属性 children用来表示嵌套层级关系
3.虚拟dom更新不会立即操作dom 而是会通过diff算法 找出需要更新的节点 按需更新 并将更新的内容保存为一个js对象 更新完成后再挂载到真实dom上 实现真实dom更新 通过虚拟dom 解决了操作真实dom的三个问题
(1) 无差别频繁更新导致dom频繁更新 造成性能问题
(2) 频繁回流与重绘
(3) 开发体验
优点:
1.小修改无需频繁更新DOM 框架的diff算法会自动比较 分析出需要更新的节点 按需更新
2. 更新数据不会造成频繁的回流与重绘
3. 表达能力更强 数据更新更加方便
4.保存的是js对象 具备跨平台能力
虚拟DOM实现原理:
1. 通过js建立节点描述对象
2.diff算法比较分析新旧两个虚拟DOM差异
3.将差异pathch到真实dom上实现更新
二. diff算法:
为了避免不必要的渲染 按需更新 虚拟DOM会采用diff算法进行虚拟DOM节点比较 比较节点差异 从而确定需要更新的节点 再进行渲染 Vue采用的是深度优先 同层比较的策略
新节点与旧节点的比较主要是围绕三件事达到渲染目的
- 创建新节点
- 删除废节点
- 更新已有节点
1. 先同层级根元素比较 如果跟元素变化 那么不考虑复用 整个dom树删除重建
先同层级根元素比较 如果根元素不变 对比出属性的变化更新 并考虑往下递归复用
2.对比同级兄弟元素时 , 默认按照下标进行对比复用
对比同级兄弟元素时 如果指定了 key 就会按照相同 key 的元素来进行对比
diff的算法如何比较新旧虚拟dom
1.同层级根元素先比较
(1)如果根元素变了 删除重建doM数
(2)如果根元素没变 对比属性 并考虑往下递归复用=
2.兄弟元素比较
(1)默认按照下标 进行对比复用
(2)如果设置了key 就会按照相同key元素进行复用