Vue学习第二天：07理解虚拟DOM及key属性的作用

总结：

1. jQuery是通过事件直接操作DOM的，由于项目越来越大，事件和DOM的耦合度越来越大，项目维护和扩展不便，基于此，才诞生了Vue和React。
2. Vue和React都是引入了一个数据中间层（State），通过事件操作数据，Vue底层将数据映射到DOM上，避免了事件直接操作DOM。
3. Vue中数据的变化会影响DOM的更新，而DOM的更新是非常耗性能的，影响用户体验。数据的变化如何减少DOM的更新？基于此，有了虚拟DOM的概念。
4. 数据不会直接映射到DOM上，而是通过data+template形成一个DOM树（虚拟DOM）。即DOM树 = data+template。
5. 通过算法比对虚拟DOM和真实DOM，再通过算法尽可能复用已有的DOM。如下图（虚拟DOM和真实DOM的同层元素比对）
   
6. 真实DOM元素的移动、删除、新建是由于和虚拟DOM进行元素的同层比较导致的。
7. 不同类型的同层元素（比如div、p（p元素下有两个子节点i、span）、span在一层）：
   （1）若只是顺序变了，那这一层的DOM元素只是移动（具体如何移动我们不用去关心）；
   （2）若p（包括i、span）元素变为了div元素的子节点，由于同层比较的原因，算法会将p（包括p的子节点i、span）元素删除并在div元素下新增p元素，然后在p元素下新增两个子节点i和span；
   （3）若p（包括i、span）元素变为了h2（包括i、span）元素，由于同层比较的原因，算法会将p（包括p的子节点i、span）元素删除并在div元素和span元素之间新增一个h2元素，然后在h2元素下新增两个子节点i和span。
8. 相同类型的同层元素（比如div(class=“div1”)、div(class=“div2”)（div元素下有两个子节点i、span）、div(class=“div3”)在一层）：
   （1）无key情况下：若顺序变了，那这一层的DOM元素会进行更新、删除和新建；
   （2）有key情况下：若顺序变了，三个div通过key进行唯一标识，算法对这些DOM只会进行移动，而不再是更新、删除和新建；
   （3）有key情况下：div1和div2之间新增了一个div(class=“div4”)元素，由于key对同层元素进行了唯一标识，算法只会进行新建（没有key的话，就会是更新、新建操作）；
9. 通过key唯一标识了DOM，算法识别这些唯一的DOM减少DOM的操作，优化性能。
10. v-for中的数组若是动态变化的（增、删、排序等等），则不要写:key=“index”（不能保证index的唯一性）。