Vue3 不需要时间分片的原因 • glownight

Vue3 不需要时间分片的原因#

// React：不知道谁变了，必须遍历整棵树
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <A />      // 必须检查
      <B />      // 必须检查
      <C count={count} />  // 只有这里变
    </div>
  ); // 更新路径：App → A → B → C（全走一遍）
}

// Vue3：精确追踪，只更新用到的
<template>
  <A />        <!-- 不更新 -->
  <B />        <!-- 不更新 -->
  <C :count="count" />  <!-- 只有这里更新 -->
</template>

// 响应式系统建立依赖图谱
count: [C组件]  // 只通知C

javascript

核心对比#

	React	Vue3
更新粒度	组件级（粗）	依赖级（细）
遍历范围	整棵树	仅订阅组件
时间分片	需要（遍历可能阻塞）	不需要（路径极短）

Vue3 的异步批处理（足够用了）#

const state = reactive({ count: 0 });

state.count++;  // 加入队列
state.count++;  // 合并
state.count++;  // 合并

// 微任务阶段：只渲染一次
Promise.resolve().then(() => {
  // 批量更新 DOM
});

javascript

React 遍历成本高 → 需要中断
Vue3 更新成本天然低 → 无需中断