前端模式 VD， 脏检查 MVVM ,数据收集 MVVM 所使用的场合

VD 虚拟DOM

数据变化，先修改虚拟DOM层，然后通过虚拟DOM树的对比检查获取出最小的修改量进行对真实DOM树进行修改。虚拟DOM模式只是在DOM层的检查，所以初始渲染速度非常快。在细小修改的大量数据修改都是速度也不错的。因为只是在虚拟DOM层的计算对比，然后得出最小的修改操作对真实DOM进行修改。

脏检查

脏检查MVVM是检查数据的变化，保留对真实节点的操作。脏检查机制是对所有固定 watcher count
进行计算变化，所有在小修改变化中慢。但是在全部数据发生更新时候速度远远快于其他模式

依赖收集

数据收集每一个组件都存在自己的 viewModel 实例， 每个 viewModel
实例存在对数据监听和真实DOM树的操作、自己的数据作用域。当数据发生修改时候只会触发自身作用域下的变动。所以在细小地方进行占的优势大，但是初始渲染，和大部分数据更新时候就比较慢，因为创建大量的
viewModel 实例需要消耗的性能是一定的，所以现在大部分 MVVM
依赖收集模式框架需要的面对的问题就是如何复用之前创建的viewModel

如何进行MVVM模式的列表渲染进行优化？

在angular 和 vue 中我们可以用 :key=“index” （旧版本用使用 track-by=“index”）等方式提示框架这是一个可以复用的 viewModel 实例，框架就会知道当前viewModel 实例只是数组数据的内容发生改变，DOM结构并没有发生改变。直接根据数据里的位置进行复用修改显示数据。

性能比较

在比较性能的时候，要分清楚初始渲染、小量数据更新、大量数据更新这些不同的场合。Virtual DOM、脏检查 MVVM、数据收集 MVVM 在不同场合各有不同的表现和不同的优化需求。Virtual DOM 为了提升小量数据更新时的性能，也需要针对性的优化，比如 shouldComponentUpdate 或是 immutable data。

• 初始渲染：Virtual DOM > 脏检查 >= 依赖收集
• 小量数据更新：依赖收集 >> Virtual DOM + 优化 > 脏检查（无法优化） > Virtual DOM 无优化
• 大量数据更新：脏检查 + 优化 >= 依赖收集 + 优化 > Virtual DOM（无法/无需优化）>> MVVM 无优化