vue 之 虚拟DOM和key属性作用

一、jquery时代

jquery帮助简化了我们访问dom的api，我们可以很快的获取DOM，并为其绑定事件，可以方便我们去操作更新DOM。

但是当我们的事件变得多起来的时候会出现类似下图的效果，会使的我们必须小心翼翼，处理好我们的DOM操作。

二、Vue的出现

Vue的出现解决了上诉痛点。

此时我们只需要去通过事件操作我们的state数据，数据的更新会自动更新到视图。（我们不在直接操作DOM而是由数据去响应视图变化）

DOM的更新也是很消耗性能的，如何能高效的复用和更新DOM，引入了虚拟DOM。

数据加模版会生成一个虚拟DOM，如下：

鉴于我们很少去跨层级的添加和删除结点，我们的虚拟DOM的更新使用的是同层级的比对算法（diff算法）。

我们通过如下案例可以分析diff的比对算法

案例1

我们只需要交换位置即可

案例2

删除C结点，在第三层添加C，第四层店家E、F

案例3

删除C结点，添加G结点以及E、F结点。

案例4：无key

原地复用，B1更新为B2，B2更新为B1.

案例5：有key

存在key的情况下，直接交换位置。

案例6：有key

直接插入新的结点。