[Vue学习笔记]虚拟dom与diff算法

虚拟dom（Virual dom）

React先有，后Vue借鉴

若频繁地操作dom节点，代码运行的时间消耗太大，因此Vue推出了以对象实现虚拟dom再加以渲染实体dom节省代码运行时间

形成过程

1. 内存中生成一颗虚拟dom树

2. 将内存中的虚拟dom树初始化渲染成真实dom树

3. 当我们修改data中的数据的时候，将之前的虚拟dom树结合形成一个新的虚拟dom树

4. 将新的虚拟dom树与上一次旧的虚拟dom树进行对比（diff算法）

5. 将对比出来差异的部分进行重新实际dom结构渲染

当使用传统的操作dom的时候，浏览器会从构建dom树开始从头到尾执行下去，效率很低。而虚拟dom树通过形成js对象直接操作js数据，相比之下操作虚拟dom显得十分简便高效。虚拟dom和真实dom存在一层映射关系，很多操作dom的地方都会去操作虚拟dom，最后统一一次更新dom，因此可以提高性能

diff算法

当dom更新时，虚拟dom会进行diff算法（平层比较），来更新只需要替换的dom，而不是全部描绘

1. 如果根节点类型改变（如从div变为p），直接将旧节点卸载（将不再比较子节点，省些功夫），替换为新节点，旧节点下面所有子节点也将被卸载，但是如果只是根节点类型不一样而子节点全都一致时，这样是效率不是很高的一种情况。

2. 节点类型不变但属性或属性值发生改变，不会卸载节点，执行节点更新的操作

3. 文本改变，直接修改文本内容

4. 移动，增加，删除节点时：

   简单粗暴的做法是：卸载C，装载F，卸载D，装载C，卸载E，装载D，装载E，如下图：

   写代码时如果没给数组或枚举类型定义一个key，就会采用以上简单粗暴的算法，如果为元素添加key值，Vue就会根据key值直接操作，效率较高，如下图：

   在v-for里面添加key，一方面可提高性能，另一方面也可避免出错