虚拟 DOM 和 DOM diff

虚拟DOM

一个能代表DOM树的对象，通常包含标签名、标签上的属性、事件监听、子元素，以及其他属性

虚拟DOM的优点

• 能减少不必要的DOM操作
• 能跨平台渲染
• 记住：虚拟DOM和实际DOM的操作，作比较时，要有具体的例子。实际上实际的DOM操作并不慢，但是很多教科书和资料介绍说DOM操作慢，这个说法太片面

虚拟DOM的缺点

需要额外的创建函数，如createElement或h,但是可通过JXS来简化XML写法

DOM diff

• 虚拟DOM的对比算法
• 把虚拟DOM想象成树型
• 举例一

<div :class="x">
    <span v-if="y">{string1}</span>
    <span>{string2}</span>
</div>

• 当数据变化，x从red变为green
  

• 此时DOM diff发现：

  1. div标签类型没变，只需要更新div对应的DOM的属性。
  2. 子元素没变不更新

• 举例二
  当数据变化，y从true变为false
  
  DOM diff发现：
  div没变，不用更新。
  子元素1标签没变，但是children变了，更新DOM 内容
  子元素2不见了，删除对应的DOM

DOM diff优点

• 进行同级比较
• 可以跨平台

DOM diff缺点

• 同级比较存在bug
• 解决方案：用Key值进行区分。