Vue 3.5 Versioned Reactivity.

在 3.5 重构之前，Vue 响应式采用「依赖集合 + 全局调度队列」模型，我们先梳理原生架构无法规避的性能短板，理解版本化重构的设计必要性。

初代响应式基础执行流程回顾

1. 依赖收集 track响应式变量被读取时，将当前激活副作用 effect 存入变量对应的 dep 集合；
2. 更新派发 trigger响应式变量修改时，遍历 dep 内全部 effect，推入全局异步更新队列；
3. 队列刷新 flushJobs微任务阶段遍历队列执行所有副作用，执行前清空队列防止重复执行。

四大底层性能缺陷

Vue 3.5 为每一个响应式对象、每一条副作用链路引入单调递增版本号，用版本对比替代全量依赖遍历，从底层解决初代架构的遍历冗余问题，整套重构覆盖 ref/reactive/computed/effect/watch 全 API。

核心基础概念：版本号与脏校验

1. Target Version（目标版本）每一个被 Proxy 代理的响应式对象（ref、reactive、数组）维护一个数字 version，初始值为 0；每次触发 trigger 派发更新时，该对象 version += 1，作为数据变更的唯一凭证。
2. Effect Track Version（副作用追踪版本）每一个副作用（组件渲染 effect、computed、watch）内部存储 trackVersions 映射表：key 为响应式 target，value 为上一次执行时读取到的 target 版本号。
3. 版本对比脏检查逻辑副作用执行前，遍历自身所有依赖 target，对比 trackVersions[target] 和当前 target.version：若二者相等，依赖数据未发生变更，直接跳过本次副作用执行；若 target.version > trackVersions[target]，数据已更新，执行副作用并同步更新 trackVersions 内存储的版本号。

重构后完整响应式执行链路

配套底层优化（3.5 同步落地）

1. Dep 集合轻量化改造初代 Dep 使用 Set 存储 effect，3.5 改为数组结构，降低集合增删哈希开销，搭配版本校验后 Dep 仅做依赖关联，不再参与更新遍历。
2. computed 计算属性版本隔离计算属性新增独立 version 字段，形成双层版本校验：底层响应式数据版本变更 → computed 版本自增 → 依赖 computed 的组件再做二次版本对比，彻底杜绝重复计算。
3. 调度队列分层优先级区分组件渲染 effect、computed、watch、watchEffect 四层队列，版本校验按优先级顺序执行，高优先级渲染逻辑优先完成。
4. 弱引用缓存依赖使用 WeakMap/WeakSet 存储 target 与 dep 的映射，无手动销毁时自动回收废弃依赖，大幅降低长页面内存泄漏风险。

执行逻辑对比表

核心代码逻辑示例对比

下面是新旧两套架构 trigger 与副作用执行的简化源码对照：

function trigger(target, type, key) {
  const depsMap = targetMap.get(target)
  const deps = depsMap.get(key)
  // 强制遍历所有依赖副作用
  for (const effect of deps) {
    if (effect !== activeEffect) {
      queueJob(effect)
    }
  }
}

↓ 无论数据是否真的影响对应 effect，都要遍历整个依赖集合

function trigger(target) {
  // 仅做版本自增，无遍历操作
  target.version++
  const depsMap = targetMap.get(target)
  for (const effect of depsMap.values()) {
    queueJob(effect)
  }
  // 遍历仅做入队，真实校验延迟到 flushJobs
}

// 队列刷新时版本校验逻辑
function runEffect(effect) {
  let needRun = false
  // 对比存储的版本与当前 target 版本
  for (const [target, lastVer] of effect.trackVersions) {
    if (target.version > lastVer) {
      needRun = true
      break
    }
  }
  if (!needRun) return // 版本无变化，直接跳过
  // 执行副作用并更新版本快照
  effect.run()
  updateTrackVersions(effect)
}

所有无效更新在执行前通过版本对比快速截断，规避无意义渲染与计算。

拆分细粒度响应式对象，缩小版本影响范围

将巨型 reactive 大对象拆分为多个独立小对象，不同业务模块使用单独响应式变量：单个字段修改仅自增对应小对象版本，不会触发全局版本校验，版本对比时可跳过绝大多数组件。

// 差：单一超大响应式对象
// 任意字段修改全局版本 +1
const pageState = reactive({
  form,
  table,
  chart,
  modal,
  filter
})

// 优：拆分独立模块
// 修改仅影响单一对象版本
const formState = reactive({})
const tableState = reactive({})
const chartState = reactive({})

大量派生数据优先使用 computed，利用分层版本隔离

复杂页面派生计算逻辑全部抽离 computed，依靠双层版本校验截断无关更新；避免在模板中直接书写复杂表达式，减少组件渲染 effect 的依赖数量，降低版本对比循环次数。

虚拟列表场景隔离可视区与非可视区数据

长列表使用虚拟滚动时，将可视区域条目数据与缓存条目数据拆分为两套响应式集合，滚动仅更新可视区对象版本，缓存条目版本不变，版本校验直接跳过，极致降低滚动开销。

规避同一帧高频无意义重复赋值

虽然版本化架构对重复赋值做了优化，但高频循环内重复赋值依然会持续自增版本号，增加校验次数；循环内不变数据提前提取至循环外部，减少 trigger 触发次数。

升级兼容注意事项（无破坏性变更）