10|理解虚拟 DOM 及 KEY 属性的作用

1.JQuery

JQuery简化了操作DOM的API。通过JQuery绑定事件，然后通过事件来操作DOM。
随着系统越来越复杂，事件也越来越多，不同的事件操纵不同或相同的DOM，变得越来越乱。

2.Vue

虚拟DOM

Vue引入一个数据中间层来避免直接操纵DOM。
我们不再关注DOM元素，需要关注的仅仅是数据State。
所有的事件最后操纵的对象都是数据，然后由Vue底层将数据映射到DOM上。
数据变化导致DOM的更新，DOM的高兴非常耗性能。为了数据变化后减少DOM的更新，提出了虚拟DOM。

数据不是反应到真实的DOM节点上，而是通过数据和template生成一个类似DOM树的结构（JSON对象）——虚拟DOM。通过算法计算出老的DOM树和需要更新的DOM树之间的不同，尽可能减少更新。

虚拟DOM的比对

原本的时间复杂度O(n3)
只对同层级比较——O(n)。

比对场景

（1）移动


（2）删除重建

（3）删除新建

（4）更新删除新建（无key）——不会移动B1和B2

同类型

（5）移动（有key）

（6）插入（有key）

key

key不要用index

<todo-item @delete="handlerDelete" v-for="item in list" :key="item.title">
</todo-item>