Vue03/虚拟DOM和diff算法

一. 虚拟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. 创建新节点
2. 删除废节点
3. 更新已有节点 

1. 先同层级根元素比较 如果跟元素变化 那么不考虑复用 整个dom树删除重建 

先同层级根元素比较 如果根元素不变 对比出属性的变化更新 并考虑往下递归复用

2.对比同级兄弟元素时 , 默认按照下标进行对比复用

对比同级兄弟元素时 如果指定了 key 就会按照相同 key 的元素来进行对比

diff的算法如何比较新旧虚拟dom

1.同层级根元素先比较

（1）如果根元素变了 删除重建doM数

（2）如果根元素没变 对比属性 并考虑往下递归复用=

2.兄弟元素比较

（1）默认按照下标 进行对比复用

（2）如果设置了key 就会按照相同key元素进行复用