Vue3 的 SFC 编译优化之 CacheHandler 事件缓存

事件缓存是 Vue3 编译阶段针对事件处理函数的一项重要优化。当模板中存在内联事件处理器时，传统的每次渲染都会创建新函数实例，而缓存机制通过编译时静态分析避免不必要的函数重建。

1. 问题背景：内联事件处理器的性能开销

<template>
  <button @click="count++">Click me</button>
</template>

每次组件更新时，@click="count++" 会被编译为新的函数：

() => count++

这会造成：

• 不必要的函数内存分配
• 子组件因 props 变化而重新渲染
• 阻碍更高效的更新优化

2. 编译时识别与缓存标记
编译器遇到内联事件时会进行双重判断：

• 检查表达式是否为纯表达式（无局部变量依赖）
• 确认无副作用且可安全缓存

优化后的编译结果：

// 编译前
@click="count++"

// 编译后（无缓存）
{ onClick: () => count++ }

// 编译后（有缓存）
{ onClick: _cache[0] || (_cache[0] = () => count++) }

3. 缓存存储机制
编译器会在渲染函数外创建缓存数组：

import { openBlock, createBlock } from 'vue'

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("button", {
    onClick: _cache[0] || (_cache[0] = () => _ctx.count++)
  }, "Click me"))
}

缓存数组 _cache 按顺序存储：

• 索引 0：第一个内联事件处理器
• 索引 1：第二个内联事件处理器
• 以此类推...

4. 缓存失效条件
编译器会智能判断缓存有效性：

<template>
  <!-- 可缓存：静态表达式 -->
  <button @click="count++">Button1</button>
  
  <!-- 不可缓存：依赖动态参数 -->
  <button @click="handleClick(id)">Button2</button>
  
  <!-- 不可缓存：包含局部变量 -->
  <button v-for="item in list" @click="select(item)">Button3</button>
</template>

5. 与 PatchFlag 的协同优化
当结合 PatchFlag 时，可实现更精确的更新：

{
  onClick: _cache[0] || (_cache[0] = () => _ctx.count++),
  // PatchFlag 8 表示只需比较 PROPS
  patchFlag: 8
}

这样更新阶段只需比较：

• 缓存函数引用是否变化
• 避免完整的 props diff

6. 运行时性能对比
未优化时的更新流程：

• 创建新函数实例
• 全量 props 比对
• 强制子组件更新

优化后的更新流程：

• 直接读取缓存函数
• 跳过 props 比对（因 PatchFlag）
• 避免子组件不必要的重渲染

这种编译时优化使得事件处理在重复渲染时保持稳定的函数引用，既减少了内存分配开销，又通过与 PatchFlag 的配合实现了更高效的更新机制。