onrendertracked用于追踪响应式依赖收集，onrendertriggered用于追踪依赖触发更新；二者仅在开发环境生效，配合vue devtools可精准定位无效渲染、依赖未收集等调试问题。
在 Vue 3 的响应式调试中，onRenderTracked 和 onRenderTriggered 是两个专用于追踪组件渲染过程中依赖收集与触发的调试钩子。它们不会影响运行时行为，只在开发环境生效，配合 Vue Devtools 可精准定位响应式依赖异常（比如无效更新、过度更新或依赖未收集）。
什么时候该用这两个钩子
当你遇到以下情况时，它们特别有用：
- 组件明明没改数据，却反复重新渲染（怀疑依赖被意外触发）
- 修改了某个 ref 或 reactive 数据，但视图没更新（怀疑依赖没被正确收集）
- 使用了
computed、v-for、watch等复杂响应式逻辑，想确认哪些值真正参与了依赖追踪 - 排查性能问题，看一次渲染到底追踪了多少响应式属性
基本用法：在 setup 中直接调用
两个钩子必须在 setup() 或 beforeCreate/created 钩子中使用（推荐 setup），且仅在开发模式下执行。它们接收一个参数：event，结构如下：
{
effect: ReactiveEffect, // 当前追踪/触发所关联的副作用函数（通常是渲染函数）
target: object, // 被访问/修改的目标对象（如 reactive({ count: 1 })）
type: 'get' | 'set' | 'has' | 'iterate' | 'clear' | ...,
key: string | symbol | number, // 触发操作的属性名（如 'count'）
newValue / oldValue: any, // 仅 set/clear 等类型有
}
示例：
import { defineComponent, ref, onRenderTracked, onRenderTriggered } from 'vue'
export default defineComponent({
setup() {
const count = ref(0)
const list = ref([1, 2, 3])
onRenderTracked(({ key, target, type }) => {
console.log('[tracked]', { key, type, target })
})
onRenderTriggered(({ key, target, type }) => {
console.log('[triggered]', { key, type, target })
})
return () => (
<div>
<p>Count: {count.value}</p>
<ul>{list.value.map(i => <li key="{i}">{i}</li>)}</ul>
</div>
)
}
})
典型调试场景与解读
场景 1：为什么修改 list.length 没触发更新？
如果你写了 list.value.length++，onRenderTriggered 不会记录 —— 因为 length 是数组的非响应式属性，Vue 不会追踪它。真正被追踪的是 list.value 的读取（type: 'iterate'）和其中每个元素的访问（type: 'get'）。要让长度变化可响应，得用 list.value.push() 或 list.value = [...list.value]。
场景 2：为什么改了一个深层属性，整个对象都重渲染？
假设你有 const user = reactive({ profile: { name: 'Alice' } })，并在模板中用了 {{ user.profile.name }}。onRenderTracked 会显示 key: 'profile'（type: 'get'），因为访问 user.profile 就触发了对 profile 的依赖收集；后续修改 user.profile.name 会触发 type: 'set' + key: 'name'，但 Vue 渲染系统会通知整个 user 的 effect 更新（因为 profile 是响应式对象，其内部变化会触发外层 effect）。这不是 bug，是设计使然 —— 你可以用 shallowRef 或计算属性隔离粒度。
配合 Vue Devtools 效果更佳
单独靠 console 日志容易淹没信息。开启 Vue Devtools 后：
- 在组件面板中勾选 “Trace reactivity”（v4.9+），它底层就依赖这两个钩子
- 点击“Reactivity”标签页，能看到每次 render 对应的 tracked keys 和 triggered keys 树形图
- 右键某个响应式对象 → “Debug track” 可临时插入
onRenderTracked日志
这样比手动加 console 更直观，尤其适合嵌套深、依赖多的组件。
