虚拟DOM

1. 什么是虚拟DOM

• 虚拟DOM是对真实DOM的抽象，本质上是一个JavaScript对象，这个对象就是更加轻量级的对真实DOM的描述

2. 虚拟DOM和真实DOM的区别
   1. 真实DOM
      • 准确来说，并不是html标签
      • 真实DOM是JavaScript中的一个特殊的对象，每个html标签都会在JavaScript中生成一个对应DOM对象
      • 当开发者修改DOM对象身上的属性时，会影响到html标签的显示效果
      • 总结：真实DOM和页面上的html标签具有映射关系，互相联动
      • 缺点：真实DOM体量较大，而且无用属性过多，直接修改真实DOM可能导致页面多次重绘，甚至重排
   2. 虚拟DOM
      • 只是一个普通的JavaScript对象，他并没有和页面上的某个标签存在直接映射关系
      • 优点：虚拟DOM体量较小，只记录关键数据
      • 缺点：通过虚拟DOM间接生成真实DOM，会额外创建一个虚拟DOM对象，浪费内存和代码计算速度
   3. 总结
      • 虚拟DOM实际上是对html标签的一个抽象化对象，当修改虚拟DOM，会影响到后续生成的真实DOM的结构，从而影响到页面的展示效果

diff算法

• 页面初次渲染不会进行diff算法，diff算法只存在于数据更新后，为了优化性能
• 在数据更新后会生成新的虚拟DOM，与旧的虚拟DOM比较
• 只会同级比较
• 比较后会出现四种情况：
  1. 此节点是否被移除 -> 添加新的节点
  2. 属性是否被改变 -> 旧属性改为新属性
  3. 文本内容被改变-> 旧内容改为新内容
  4. 节点要被整个替换 -> 结构完全不相同 移除整个替换
• 扩展:render后生成虚拟DOM，patch后生成真实DOM