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 数组变化而可能更新”，于是整个 <li> 或 <div v-for> 被打包进同一个 Block。即使 <code>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不变，整个<li>内部就不会 diff - 对内部状态控件单独包裹：
<button v-memo="[item.isDisabled]" :disabled="item.isDisabled">操作</button>，让按钮仅响应自身禁用态 - 避免写
v-memo="[item]"——对象引用总变，等同于没 memo
用 template + v-for 拆分语义块
当列表项结构复杂（含多个可独立更新区域），可用 <template v-for></template> 替代元素级 v-for，配合 v-memo 实现更精细控制。
- 把头像、标题、操作栏分别用独立
<template v-for></template>渲染，每个 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 绑定等方式间接驱动
