虚拟DOM

优点

1. 减少DOM操作

• 虚拟DOM可以将多次操作合并为一次操作，比如你添加1000个节点，却是一个接一个操作
• 虚拟DOM借助DOM diff可以把多余的操作省掉，比如你添加1000个节点，其实只有10个是新增的

2. 跨平台

• 虚拟DOM不仅可以变成DOM，还可以变成小程序、ios应用、安卓应用，因为虚拟DOM本质上是一个JS对象

缺点

• 需要额外的创建函数，如createElement或h，但可以通过JSX来简化成XML写法

如何创建虚拟DOM

1. React

<div className="red" onClick={}>
    <span>span1</span>
    <span>span2</span>
</div>

通过babe1转为createElement形式 2. Vue Template

<div class="red" @click="fn">
    <span>span1</span>
    <span>span2</span>
</div>

通过vue-loader转为h形式

DOM diff

新旧虚拟DOM对象的差异对比算法，最后只把变化的部分重新渲染，提高渲染效率的过程

DOM diff 大概逻辑

1. Tree diff

• 将新旧两棵树逐层对比，找出哪些节点需要更新
• 如果节点是组件就看Component diff
• 如果节点是标签就看Element diff

2. Component diff

• 如果节点是组件，就先看组件类型
• 类型不同直接替换（删除旧的）
• 类型相同则只更新属性
• 然后深入组件做Tree diff（递归）

3. Element diff

• 如果节点是原生标签，则看标签名
• 标签名不同直接替换，相同则只更新属性
• 然后进入标签后代做Tree diff（递归）

优点

• 直接比较新旧DOM的差异，只渲染变化部分，提高渲染效率

缺点

//伪代码
    <span>我是1<span>
    <span>我是2<span>
    <span>我是3<span>
    -----------------//删除后 显示界面
    <span>我是1<span>
    <span>我是2<span>

1.问题

• 当Tree的下标为默认的index时，删除第二个span时
• 第三个span的index会变为2，导致第三个span删除
• 不符合人类正常的思维 2.解决
• 在每个span节点添加key:id，记住每个span谁是谁