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]"> <li>❌ 错误：<code><div v-for="item in list" :key="index" v-memo="[item.id]">（索引不是稳定标识） <li>❌ 错误：<code><div v-for="item in list" :key="item.id" v-memo="[list]">（依赖父级整个数组，一动全动） <h3>依赖数组要“拆解到字段级”，避免对象引用变化</h3> <p>v-memo 对依赖项做浅层严格相等（<code>===）比对。若传入整个响应式对象（如item），每次渲染都会生成新引用，导致缓存始终失效：
vue-composition-api-best-practicesVue 3 组合式 API 与
更多热门下载
更多相关下载
更多精品课程
相关推荐/热门推荐/最新课程更多最新文章
