onRenderTriggered 是 Vue 3 定位高频渲染的调试钩子，可捕获触发渲染的响应式依赖（effect）、目标对象（target）及操作类型（type），助力快速识别未缓存函数、错误 key、计算属性依赖缺失等问题。
页面反复渲染，通常不是“页面整体刷新”，而是组件或 DOM 片段在无预期情况下高频重绘、重排或重新执行 patch（虚拟 DOM 差分更新）。Vue 3 提供的 onRenderTriggered 钩子，正是专为定位这类问题设计的调试工具——它会在响应式依赖触发组件重新渲染时，精准捕获“谁变了、为什么变、在哪被读取”，帮你跳过盲目 console.log，直击根源。
onRenderTriggered 能告诉你什么
该钩子接收一个 DebuggerEvent 对象，包含三个关键字段：
- effect：触发本次渲染的响应式副作用函数（即组件的 render 函数）
- target：被访问/修改的响应式对象（如 reactive({ count: 1 })）
- type：操作类型，常见值有 'get'（读取）、'set'（赋值）、'clear'（清空 Map/Set）、'add'（新增键）等
例如，你在 setup 中写 console.log('count:', state.count)，只要 state.count 被读取，且该读取发生在 render 函数内，onRenderTriggered 就会触发并告诉你：是哪个响应式对象的哪个属性，在哪次渲染中被 get 了。
快速定位高频 patch 的典型场景
以下情况极易引发不必要 patch，配合 onRenderTriggered 可秒级识别：
-
模板中调用未缓存的方法：如
{{ formatTime(new Date()) }}，每次渲染都新建 Date 实例并执行函数，触发多次 get/set -
计算属性未正确声明依赖：比如用了
computed(() => obj.a + obj.b)，但obj是从 props 解构而来且未标记为响应式，导致 Vue 无法追踪，反而在父组件更新时连带触发子组件 rerender - v-for 列表 key 不稳定：key 使用了 Math.random()、index 或对象引用，导致 Vue 认为节点全部变化，强制全量 patch
-
响应式对象深层属性未正确代理：对
reactive({ user: {} })直接赋值user = { name: 'a' }，新对象丢失响应性，但其父对象仍被监听，造成无效触发
实战排查三步法
在疑似组件中加入调试逻辑，无需额外依赖：
- 第一步：在
setup()或onBeforeMount后添加onRenderTriggered((e) => console.log('RENDER TRIGGERED:', e)) - 第二步：交互操作（如点击、输入），观察控制台输出。重点关注
type: 'get'的频次和target是否指向你不期望监听的对象（如全局 store、未 memo 的函数） - 第三步：结合
onRenderTrack（记录依赖收集过程）对比使用，确认是否“收集了不该收的”或“没收集到该收的”
比 onRenderTriggered 更进一步的优化建议
找到原因后，修复要落在响应式建模本身，而非掩盖日志：
- 模板中所有函数调用，必须用
computed或useMemo（组合式 API）封装，确保返回值稳定 - 避免在模板中解构响应式对象，改用
toRefs或直接访问state.xxx - 列表渲染严格使用唯一、持久的 key，禁止用 index 或随机数
- 对大型嵌套对象，优先用
shallowRef+ 手动触发triggerRef，减少无谓依赖追踪
