v-memo是Vue 3.2+专为长列表优化的指令，需配合v-for和稳定key使用，依赖字段级浅比较，禁用对象引用和条件指令包裹，可显著减少patch开销。
v-memo 是 Vue 3.2+ 引入的实验性指令，专为长列表（尤其是 v-for）设计，它不阻止更新，而是让 Vue 在依赖未变时跳过整块子树的 diff 和 patch，从而显著降低虚拟 DOM 计算开销。用对了，性能提升明显；用错了，可能引发错位、状态不同步等隐蔽问题。
必须配合 v-for 和稳定 key 使用
v-memo 不能单独存在，必须嵌套在 v-for 项内部，且该项必须有明确、唯一、稳定的 :key（如 item.id）。key 不仅用于 DOM 复用，也与 v-memo 的缓存边界强绑定：
- ✅ 正确：
<div v-for="item in list" :key="item.id" v-memo="[item.id, item.status]"> - ❌ 错误：
<div v-for="item in list" :key="index" v-memo="[item.id]">（索引不是稳定标识） - ❌ 错误：
<div v-for="item in list" :key="item.id" v-memo="[list]">（依赖父级整个数组，一动全动）
依赖数组要“拆解到字段级”，避免对象引用变化
v-memo 对依赖项做浅层严格相等（===）比对。若传入整个响应式对象（如 item），每次渲染都会生成新引用，导致缓存始终失效：
- ✅ 推荐：只列真正影响该片段渲染的字段，例如
v-memo="[item.id, item.name, item.isRead]" - ✅ 更安全：用计算属性预处理，避免模板中调用函数（如
v-memo="[computedAvatarUrl]"） - ❌ 危险：
v-memo="[item]"或v-memo="[item.tags]"（tags 是数组或对象，引用易变） - ⚠️ 注意：
null、undefined、NaN会导致 v-memo 退化为“永不缓存”
不能放在 v-if / v-else 内部
v-memo 依赖编译时确定的渲染结构。若包裹在条件指令中，Vue 无法保证缓存上下文的一致性，可能导致子树复用错乱：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
<div v-if="show" v-memo="[item.id]">...</div> - ✅ 替代方案：把 v-memo 移到条件外层，或改用
v-show（保持 DOM 存在） - ✅ 合理写法：
<div v-show="show" v-memo="[item.id]">...</div>
验证是否生效：看 Devtools 的 patch 数量
开启 Vue Devtools 的 Performance 面板，触发一次局部更新（如点击某条消息标记已读），观察 patch 节点数：
- 优化前：1000 条列表中改 1 项，patch 数 ≈ 1000
- 优化后：仅 patch 1 个节点，其余直接复用缓存 VNode
- 若无下降，检查依赖项是否被解构丢失响应性（如
const { id } = item后传id，会断开响应追踪）
它不是银弹，但对消息流、商品墙、日志面板这类“结构固定、局部更新”的长列表，v-memo 是目前 Vue 生态中最轻量、最直接的渲染减负手段。
