摘要：在 Vue 2 中，Vue 依赖于Virtual DOM进行 diff 和更新，当组件数量庞大或者更新频率很高时，整个渲染过程可能会占用主线程过长时间，影响用户交互体验。因此，一些框架（比如 React）采用了时间切片（Time Slicing）技术来将渲染任
在 Vue 2 中，Vue 依赖于 Virtual DOM 进行 diff 和更新，当组件数量庞大或者更新频率很高时，整个渲染过程可能会占用主线程过长时间，影响用户交互体验。因此，一些框架（比如 React）采用了 时间切片（Time Slicing） 技术来将渲染任务拆分，避免阻塞主线程。
Vue 2 使用的是 Object.defineProperty 来劫持数据，但它无法监听新增/删除属性，也不能直接监听数组的变化，因此 Vue 2 需要 watcher 进行依赖收集，在数据变化时进行调度，这可能导致不必要的渲染。
Vue 3 使用 Proxy 实现响应式系统：
更精准的依赖追踪：只触发真正受影响的组件，而不会引发不必要的更新。避免 Vue 2 由于 watcher 机制导致的多次重复计算，减少性能开销，从根本上优化了渲染速度。**2. Vue 3 采用了基于 Fiber 的调度器（Scheduler）Vue 3 的更新机制采用了 调度器（Scheduler），它的调度策略使得：
批量合并任务，减少不必要的 DOM 操作。使用 Promise.then 和 queueJob 进行异步任务调度，让任务拆分到 微任务（Microtask）队列 执行，从而避免长时间阻塞主线程。Vue 3 在渲染过程中自动进行优先级管理，确保更重要的任务先执行。这一机制使 Vue 3 不需要像 React 那样手动进行时间切片，而是靠 智能调度 来提升性能。
在 Vue 3 中：
使用 reactive 和 ref 让 Vue 知道哪些状态变了，从而精确更新组件。组件级别的优化：Vue 3 会跟踪依赖关系，只更新真正需要更新的组件，而不会影响整个应用。跳过不必要的 diff 计算：Vue 3 在编译阶段会 静态提升（Static Hoisting），将不会变化的内容标记为静态节点，从而跳过这些部分的重新计算。相比之下，React 需要时间切片是因为：
React 需要进行 全量 Virtual DOM diff，而 Vue 3 只对必要的部分进行更新，避免了 React 可能遇到的长时间计算问题。React 在大型项目中需要 useMemo、useCallback 等手动优化，而 Vue 3 自动进行了依赖跟踪，不需要手动优化。Vue 3 在 模板编译阶段 就能确定哪些部分是静态的，哪些部分会发生变化：
静态提升（Hoist Static）：Vue 3 在编译时会将静态内容提升，避免每次重新创建相同的对象。缓存事件处理函数（Event Handler Caching）：Vue 3 在编译时会缓存事件处理函数，减少创建新函数的开销。Patch Flag（Patch Optimization）：Vue 3 通过 Patch Flag 标记哪些节点需要更新，从而 减少 Virtual DOM Diff 计算。这意味着 Vue 3 在运行时的工作量大大减少，进一步降低了 时间切片的必要性。
React：假设每次都可能发生变化 → 进行 Virtual DOM Diff → 使用时间切片避免主线程阻塞。Vue 3：精准追踪变化 → 只更新需要的部分 → 不需要时间切片。Vue 3 通过 Proxy、调度优化、编译时优化等方式，避免了 React 需要进行的昂贵的 Virtual DOM diff 操作，从而 不需要时间切片 来拆分计算任务。
Vue 3 之所以不需要时间切片，主要是因为：
响应式系统升级（Proxy 取代 Object.defineProperty）：让 Vue 3 能够精准追踪依赖，避免无意义的计算。智能调度（Scheduler）：Vue 3 使用 queueJob 和 Promise.then 进行任务调度，自动拆分任务，减少主线程阻塞。按需更新（Fine-grained Reactive Updates）：Vue 3 只更新受影响的组件，避免全局 diff 计算。编译优化（Static Hoisting & Patch Flag）：Vue 3 在编译时标记静态内容，避免不必要的 Virtual DOM diff 计算。因此，Vue 3 根本不需要时间切片，因为它从根本上减少了计算量，让整个渲染过程更高效！
来源：007王子
