Vue中如何提取watchEffect/watch回调里被追踪的响应式值？

Vue的watchEffect和watch会自动追踪副作用里的响应式依赖，但它们并没有直接暴露被追踪的依赖值列表。要实现你示例中提取追踪值的需求，可以参考以下两种方案：

方案一：手动收集依赖值（推荐） #

这种方式简单可控，完全基于Vue公开API，没有版本兼容风险。核心思路是在副作用回调里主动返回需要收集的响应式值，再传递给处理函数：

import { ref, watchEffect } from 'vue'

const foo = ref(0)
const bar = ref(true)

function customWatchEffect(effect, onValues) {
  return watchEffect(() => {
    // 执行副作用逻辑，同时让它返回要收集的值集合
    const trackedValues = effect()
    // 将收集到的值传给回调
    onValues(trackedValues)
  })
}

// 使用示例
customWatchEffect(
  () => {
    console.log(foo.value, bar.value)
    return [foo.value, bar.value] // 手动返回需要追踪的值
  },
  (values) => console.log(...values) // 输出：0, true
)

你可以根据需求调整返回值的格式，比如对象或数组，灵活性很高。

方案二：利用Vue内部追踪机制（进阶，不推荐生产环境） #

如果不想手动返回值，可以通过临时改写Vue内部的track函数来记录被访问的响应式依赖，再提取对应的值。但这种方式依赖Vue未公开的内部API，版本更新时可能失效，仅适合调试或特殊场景：

import { ref, effect, track } from 'vue'

const foo = ref(0)
const bar = ref(true)

function trackableEffect(effectFn, onTrackedValues) {
  const trackedDeps = new Set()
  // 保存原始track函数
  const originalTrack = track

  // 重写track函数，记录所有被追踪的依赖
  track = (target, type, key) => {
    trackedDeps.add({ target, key })
    originalTrack(target, type, key)
  }

  // 创建副作用函数
  const runner = effect(() => {
    effectFn()
    // 从记录的依赖中提取对应的值
    const values = Array.from(trackedDeps).map(item => item.target[item.key])
    onTrackedValues(values)
    // 清空记录，准备下次追踪
    trackedDeps.clear()
  })

  // 恢复原始track函数，避免影响其他逻辑
  track = originalTrack

  return runner
}

// 使用示例
trackableEffect(
  () => console.log(foo.value, bar.value),
  (values) => console.log(...values) // 输出：0, true
)

总结 #

• 优先选择手动收集的方案，稳定且可控；
• 内部API方案仅用于临时调试，生产环境避免使用，防止Vue版本迭代导致代码失效。

内容的提问来源于stack exchange，提问作者Craig Harshbarger