v-memo 是 vue 3.2+ 针对长列表优化的实验性指令，通过显式声明不变依赖跳过子树 diff；仅当 v-memo 数组中所有响应式值未变时复用 vnode，需谨慎选键、避免嵌套与非响应式值。
v-memo 是 Vue 3.2+ 引入的实验性指令，专为优化长列表渲染性能而设计。它不是通用缓存方案，而是针对“静态子树 + 少量动态绑定”的场景做精准记忆，避免虚拟 DOM 的重复比对和重建，在滚动频繁、数据量大的列表中能显著减少 patch 开销。
v-memo 的核心作用：跳过整块子树的 diff
传统 v-for 渲染中，即使某项数据未变，只要父级响应式依赖更新（比如搜索过滤、排序切换、全局 loading 状态变化），Vue 仍会对每一项执行完整的 diff 流程。v-memo 通过显式声明“哪些值没变，这块就别动”，让 Vue 直接复用上次生成的 vnode 子树。
它接收一个数组参数，如 v-memo="[item.id, item.status]"，只有当数组中所有值与上一次完全相等时，才跳过该节点及其子树的更新。
- 数组元素必须是响应式数据（ref、reactive 属性等），不能是函数或 undefined
- 数组长度固定，顺序敏感；[a,b] 和 [b,a] 被视为不同键
- 若数组中任一值变化，整个 memo 块重新渲染，不支持部分更新
在长列表中正确使用 v-memo 的典型模式
适用于列表项结构稳定、仅局部字段更新的场景，例如消息列表、商品卡片、任务项等。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章