WatchEffect 调试日志怎么使用 watchEffect 的 onTrack 和 onTrigger 回调进行深度调试-Vue.js-PHP中文网

ontrack 和 ontrigger 是 watcheffect 专用于开发模式调试的回调函数：ontrack 在依赖被读取收集时触发，ontrigger 在依赖变更导致副作用重执行时触发，二者均接收 debuggerevent 参数并仅在开发环境生效。

watcheffect 调试日志怎么使用 watcheffect 的 ontrack 和 ontrigger 回调进行深度调试

onTrack 和 onTrigger 是 watchEffect 专用于开发阶段调试的两个回调函数，仅在开发模式（process.env.NODE_ENV === 'development'）下生效，生产环境会被忽略。它们不改变逻辑，但能帮你看清响应式依赖是如何被收集和触发的。

onTrack：看依赖是怎么被“盯上”的

每当某个响应式属性被读取、并被当前 watchEffect 收集为依赖时，onTrack 就会执行一次。它告诉你：“这个值正在被监听”。

参数 e 是一个 DebuggerEvent 对象，关键字段包括：

target：被访问的对象（比如 reactive 的对象）
type：操作类型，常见值有 'get'（读取属性）、'has'（in 操作）、'iterate'（for...in / Object.keys 等遍历）
key：触发依赖收集的具体键名（如 'count'），对 ref 是 undefined（因为 ref 本质是通过 .value 触发 get）

示例：观察 reactive 对象中某属性何时被追踪

```ts
const state = reactive({ count: 0, name: 'vue' })
watchEffect(() => {
  console.log(state.count) // 只读 count → onTrack 只会为 count 触发
}, {
  onTrack(e) {
    console.log('tracked:', e.key, 'on', e.target, 'type:', e.type)
  }
})
```

onTrigger：看依赖变化后谁“动了手”

当某个已被追踪的依赖发生变更（set/delete），导致 watchEffect 重新执行时，onTrigger 被调用。它回答：“为什么这次又跑了？”

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

参数 e 同样是 DebuggerEvent，但关注的是变更行为：

target：被修改的对象
type：变更类型，如 'set'、'delete'、'clear'（Map/Set）
key：被修改的键（如 'count'），对 ref 是 'value'
newValue / oldValue：仅在 set 类型中存在，便于对比

示例：点击按钮修改 count，观察触发源头

```ts
const state = reactive({ count: 0 })
watchEffect(() => {
  console.log('effect run:', state.count)
}, {
  onTrigger(e) {
    if (e.type === 'set' && e.key === 'count') {
      console.log('✅ count changed from', e.oldValue, 'to', e.newValue)
    }
  }
})
// 在模板中：
```