Vue 3 默认将v-for嵌套结构编译为粗粒度动态块，导致任意依赖变化触发整项重渲染；应通过v-memo按需分块、template拆分语义区域、规范key与响应式更新规避Diff退化。

Vue 3 编译器对带 v-for 的嵌套结构，默认会将其整体编译为一个动态块（Dynamic Block），这看似合理，实则埋下性能隐患：只要循环内任意响应式依赖变化（比如某个 item.status 更新），整个列表项子树都会被强制重 patch——哪怕只有图标颜色变了，文本和按钮却跟着一起重渲染。这不是 Diff 算法“变慢”，而是它根本没机会局部介入，因为 Block 粒度太粗。

为什么 v-for 默认生成大 Block？

编译器扫描模板时，会将共享同一组响应式依赖的节点聚合成一个 Block。v-for 天然引入独立作用域，其内部所有绑定（{{ item.name }}、:class="item.cls"、@click="toggle(item)"）默认都被视为“随 items 数组变化而可能更新”，于是整个

或

被打包进同一个 Block。即使 item.isExpanded 是独立维护的状态，若未显式隔离，它也会被“拖进”这个大块里。

• 静态内容（如固定文案、无绑定 class）自动提升到父 Block，不参与子块更新
• 但凡存在一个 {{ item.xxx }}，就足以让整条列表项进入动态块
• 嵌套循环（如 v-for 套 v-for）会让 Block 层级加深，但不会自动拆细——外层循环 block 包含内层全部节点

用 v-memo 切出稳定子 Block

v-memo 是最直接干预 Block Tree 分块的方式。它不是运行时指令，而是一个编译提示：告诉编译器“这段 DOM 子树的更新，只取决于我列出的这些值；其余变化一律忽略”。它能强制在指定位置创建新的 Block 边界。

• 给单个列表项加 v-memo="[item.id, item.name]"，意味着只要 id 和 name 不变，整个
• 内部就不会 diff
• 对内部状态控件单独包裹：操作，让按钮仅响应自身禁用态
• 避免写 v-memo="[item]"——对象引用总变，等同于没 memo

用 template + v-for 拆分语义块

当列表项结构复杂（含多个可独立更新区域），可用 替代元素级 v-for，配合 v-memo 实现更精细控制。

• 把头像、标题、操作栏分别用独立 渲染，每个 template 可配不同 v-memo 依赖
• 例如头像只依赖 item.avatarUrl，操作栏依赖 item.canEdit, user.role，互不干扰
• 注意：template 本身不产生 DOM，不会增加冗余 wrapper，比用 div 包裹更干净

避开 Diff 退化的三个关键动作

所谓“Diff 退化”，是指本该 O(1) 局部更新，却因 Block 设计被迫走完整 patch 流程。规避核心在于“让变化收敛、让边界清晰”：

• 永远为 v-for 提供 key，且 key 必须是稳定唯一标识（不用 index），否则 Block 内部节点复用逻辑失效
• 避免在循环体内直接修改源数组（如 items.push()），改用响应式方法（ref([...items, newItem])）或 computed 衍生，防止触发整块重建
• 对频繁更新但不影响 UI 结构的字段（如 item.lastSeenAt），不要在模板中直接读取，改由 watch + class 绑定等方式间接驱动