Vue的diff算法（初始dom）

一、虚拟 DOM （virtual dom）

　　diff 算法首先要明确一个概念就是 diff 的对象是虚拟DOM（virtual dom），更新真实 DOM 是 diff 算法的结果。

　　注：virtual dom 可以看作是一个使用 JavaScript 模拟了 DOM结构 的树形结构，这个树结构包含整个DOM结构的信息

二、为什么使用 diff 算法？

　　1、页面结构庞大时，DOM 操作代价太高，可维护性差，因此要减少 DOM 操作；

　　2、虚拟 DOM 很轻量，对虚拟 DOM 操作快；

　　3、diff 算法 是找出本次 DOM 需要更新的节点进行更新，其余不更新，对 DOM 进行原地复用，减少 DOM 创建性能耗费，可以减少浏览器页面的重绘。

三.虚拟DOM中key的作用：

        key是虚拟DOM对象的标识，当状态数据发生变化，Vue会根据【新数据】生成新的虚拟DOM，随后【新的虚拟DOM】与【旧的虚拟DOM】的差异比较。

对比规则：

 1.旧虚拟DOM中找到了与新虚拟DOM相同的key：

         若虚拟DOM中的内容没变，直接使用之前的真实DOM

若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

  2.用index作为key可能会引发的问题：

         若对数据进行：逆序添加，逆序删除等破坏顺序操作：

  会产生没有必要的真实DOM更新 =>界面效果没问题，但效率低

  如果结构中还包含输入类的DOM：会产生错误的DOM更新 =》界面有问题

   3.开发中如何选择key？

1.每条数据使用唯一表示作为key，如 id ，手机号，身份证号，学号唯一值。

2.如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key的值是没有问题的