Vue 3 在事件绑定为纯标识符（如@click="handleClick"）、函数为响应式上下文顶层属性且未禁用时自动启用cacheHandlers优化，缓存内联事件处理器以避免重复依赖追踪和VNode更新。
Vue 3 默认会对 @click 这类事件监听器做动态绑定处理，每次渲染都重新读取 _ctx.handleClick，即使函数本身没变，也会触发依赖追踪和 VNode 更新。启用 cacheHandlers 后，编译器会在首次渲染时生成一个内联函数并缓存它，后续直接复用，跳过重复追踪和更新逻辑。
什么时候会自动启用 cacheHandlers？
Vue 3 的模板编译器在满足以下条件时，默认开启该优化：
- 事件绑定使用的是纯标识符（如
@click="handleClick"），不是表达式（如@click="handleClick(id)"或@click="() => handleClick(id)"） - 绑定的函数是响应式上下文中的顶层属性（即
this.handleClick或setup()中直接返回的函数） - 未显式禁用编译选项（如
compilerOptions.cacheHandlers: false）
手动确认是否生效的方法
可通过查看编译后的 render 函数代码验证：
Rydberg Agent Node
下载
使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r
- 未启用时：事件属性写为
{ onClick: _ctx.handleClick }，每次渲染都从_ctx取值 - 启用后：生成类似
const _cache = []，并在render中调用cache[1] || (cache[1] = ($event) => _ctx.handleClick($event)) - 实际项目中可运行
vue-cli-service build --report查看生成的 render 函数片段
哪些写法会破坏 cacheHandlers 生效？
以下常见写法会让编译器放弃缓存，退回到动态绑定：
- 带参数的内联调用：
@click="handleClick(item.id)" - 箭头函数包装：
@click="() => handleClick()" - 访问嵌套属性：
@click="obj.handler"（obj是响应式对象） - 使用计算属性返回的函数：
@click="computedHandler"
配合其他优化效果更佳
单独使用 cacheHandlers 已有收益，但与以下机制协同更能放大性能优势：
- 静态提升（Static Hoisting）：让包裹事件节点的父容器也避免重建，减少整个子树 VNode 开销
- PatchFlags 标记：事件处理器缓存后，对应节点的
PATCH标志位可能降为PROPS或更低，跳过部分 diff 步骤 -
v-once：对完全静态且含事件的区域（如仅初始化一次的按钮组），可进一步跳过响应式追踪
