[!info] related notes

• 所属 MOC: Vue MOC, React MOC
• 前置概念: Vue3 Proxy 响应式原理, React useState 内部原理
• 并列概念: Vue vs React 依赖收集机制对比
• 关系笔记: React 状态模型 vs Vue3 响应式模型

Vue vs React 触发更新对比

一句话结论

• Vue3：修改响应式数据 → 自动找到依赖的 effect → 精确触发
• React：调用 setState → 放入更新队列 → 重新渲染组件 → 整个子树重新计算

Vue3：精确触发

trigger 机制

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  
  const effects = depsMap.get(key)
  if (effects) {
    effects.forEach(effect => effect()) // 精确触发
  }
}

特点

• 精确：只触发依赖这个字段的 effect
• 同步/异步可控：effect 可以配合 scheduler 实现批量、异步更新
• 无组件级更新：更新的是 effect 函数，不直接是组件

组件更新链路

响应式数据变化 
  → trigger()
    → effect (组件渲染函数)
      → 虚拟 DOM 对比
        → patch 到真实 DOM

React：重新渲染组件

setState 流程

function setState(action) {
  queue.push(action)
  scheduleRender() // 安排渲染
}

function render() {
  // 处理队列，计算新 state
  // 重新执行组件函数
  // 生成新虚拟 DOM
  // Diff 对比
}

特点

• 粗粒度：组件级别的重新渲染
• 整棵树受影响：父组件渲染，子组件默认也要渲染
• 需要优化手段：React.memo、useMemo、useCallback 来避免不必要的渲染

组件更新链路

setState
  → 加入更新队列
    → scheduleRender()
      → 重新执行组件函数
        → 生成新虚拟 DOM
          → Diff 对比
            → patch 到真实 DOM

对比表

维度	Vue3	React
触发方式	响应式数据修改	调用 setState
更新粒度	字段级 effect	组件级
触发范围	精确到依赖的 effect	整个组件子树
是否需要手动优化	较少	常用 memo、useMemo
批量更新	自动 + scheduler	自动 batching
异步更新	可配置 scheduler	并发模式

最短记忆方式

• Vue：改数据 → 精确触发
• React：setState → 重新渲染

Related notes

• React MOC