vue为什么不用脏检查 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue不使用脏检查的主要原因是为了提高性能和减少不必要的计算。

脏检查是一种机制，用于检测数据的变动并做出相应的更新。它会通过遍历数据树来检查每个属性的值是否发生变化，如果有变化则会进行更新。这种机制的优点是简单易懂，适用于管理小规模的数据。

然而，随着应用程序规模的增大，脏检查可能会导致性能问题。因为每次数据发生变化时，都需要遍历整个数据树来检查变动的属性，这样的计算量会随着数据规模的增大而增加，造成性能上的瓶颈。

Vue采用的是基于依赖追踪的响应式系统。它会在数据发生变化时，通过跟踪数据的依赖关系来确定需要更新的部分。这样，只有与数据相关的部分才会被更新，大大提高了性能。Vue通过使用ES5的Object.defineProperty()方法来实现对数据的劫持，当数据发生变化时，会触发相应的更新。

此外，Vue还采用了虚拟DOM（Virtual DOM）技术，将页面的渲染过程抽象为一个虚拟的DOM树，并将其与实际的DOM树进行对比，只对有变化的部分进行更新。这种方法可以减少对实际DOM的操作，进一步提升了性能。

因此，Vue不使用脏检查是为了提高性能和减少不必要的计算。采用依赖追踪的响应式系统和虚拟DOM技术，能够更高效地更新数据和渲染页面，提供更好的用户体验。

1年前 0条评论

worktile

Worktile官方账号

Vue不使用脏检查的原因有以下几点：

基于数据劫持的响应式系统：Vue使用了响应式系统来追踪数据的变化并根据变化更新页面。它通过使用数据劫持技术，在对象被访问和修改时拦截并触发相应的更新。这种方式能够精确地追踪到数据的变化，减少了对整个数据集的扫描，提升了性能。
脏检查需要遍历全部数据：脏检查会周期性地遍历整个数据集，检查并更新变化的数据。这种方式在数据量较大时会带来性能问题。而Vue的响应式系统能够根据变化的数据自动更新页面，避免了遍历全部数据的性能开销。
脏检查无法处理大量的数据变化：当数据变化频繁且数据量较大时，脏检查的性能会受到很大的影响。因为脏检查需要遍历所有数据来检查变化，如果数据量较大，遍历的开销会很大。而Vue的响应式系统采用了更精确的变化追踪机制，只更新发生变化的数据，可以更高效地处理大量数据的变化。
脏检查难以追踪到嵌套数据的变化：脏检查通常只能追踪到对象的变化，对于嵌套在对象内部的数据变化，很难进行追踪。而Vue的响应式系统通过递归地劫持数据对象的各个属性，能够精确地追踪到嵌套数据的变化，并触发相应的更新。
脏检查的实现复杂度高：脏检查需要实现一个完整的观察者系统，包括数据的订阅和通知机制。这个系统的实现比较复杂，维护起来也比较困难。而Vue的响应式系统基于数据劫持，并结合了虚拟DOM和Diff算法等技术，实现起来更加简单并且高效。

综上所述，Vue不使用脏检查主要是因为其采用了基于数据劫持的响应式系统，能够精确追踪数据的变化并根据变化更新页面，提高了性能并且简化了实现。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue 不使用脏检查的主要原因是为了提高性能和响应速度。相比于脏检查，在数据变化时使用其他机制来追踪变化可以更加高效地更新视图。

脏检查是一种轮询机制，它会在每个事件循环中遍历所有的数据绑定，检查数据是否发生了变化，然后更新相应的视图。这种方式导致了大量的不必要的计算和 DOM 操作，对于大型的应用来说会产生性能问题。

Vue 使用了一种名为“响应式”的数据绑定机制，它通过使用数据劫持和观察者模式来追踪数据的变化，只有在数据真正发生改变时才会更新相关的视图。这种方式避免了不必要的计算和 DOM 操作，提高了性能。

下面是 Vue 不使用脏检查的具体方法和操作流程：

数据劫持：Vue 在初始化时会对数据对象进行劫持，即使用 Object.defineProperty 方法将对象的属性转换为 getter 和 setter。当访问或修改对象的属性时，会触发相应的 getter 和 setter 方法，在这里可以进行相应的操作，如依赖收集和派发更新。
依赖收集：当属性被访问时，会触发 getter 方法，Vue 会将正在执行的 Watcher 对象添加到一个依赖队列中。这个 Watcher 对象表示了一个将要更新的视图，它会在数据变化时去更新相关的视图。
数据更新：当属性被修改时，会触发 setter 方法，setter 方法会通知依赖队列中的所有 Watcher 对象进行更新。这会使 Vue 能够精确地知道哪些视图需要被更新，而不是像脏检查那样遍历所有的数据绑定。
虚拟 DOM 更新：在数据更新时，Vue 使用虚拟 DOM 进行 diff 算法，找出真正需要被更新的部分，然后进行相应的 DOM 操作。这种方式减少了不必要的 DOM 操作，提高了性能。

总结：通过使用数据劫持、依赖收集和虚拟 DOM 等技术，Vue 实现了一种高效的响应式机制，避免了脏检查带来的性能问题。这使得 Vue 能够在数据变化时快速、准确地更新相关的视图，提高了应用的性能和响应速度。

1年前 0条评论