Vue 3 单文件组件中怎么使用 v-memo 优化长列表的渲染性能-Vue.js-PHP中文网

v-memo 是 Vue 3.2+ 的轻量级运行时优化指令，用于长列表局部稳定场景，依赖未变时复用 VNode 跳过 diff 和 patch；须配合 v-for 与显式 :key 使用，推荐 key 与 v-memo 依赖一致（如 item.id），避免对象引用或计算值；搭配 shallowRef 可进一步减少响应式开销；可通过 Paint flashing、console.log 或 Performance 面板验证效果。

vue 3 单文件组件中怎么使用 v-memo 优化长列表的渲染性能

v-memo 是 Vue 3.2+ 提供的轻量级运行时优化指令，专为长列表这类高频更新但局部稳定的场景设计。它不阻止父组件更新，而是在虚拟 DOM 更新阶段“按需跳过”：当依赖项未变时，直接复用上一次的 VNode，省去 diff、patch 和节点重建开销。

适用长列表的典型结构

必须配合 v-for 使用（Vue 3.4+ 已强制要求），且需显式声明 :key。常见写法如下：

每行加 v-memo，依赖选该行唯一且稳定的基础字段，如 item.id、item.status
:key 值建议与 v-memo 依赖一致，例如都用 item.id，避免 Vue 3.4+ 警告失效
避免用 item（对象引用每次都不等）或 item.name.toUpperCase()（计算结果不可缓存）

正确写法示例

假设渲染一个用户列表，仅当用户 ID 或状态变化时才重绘整行：

<div v-for="user in users" :key="user.id" v-memo="[user.id, user.status]">
  <span>{{ user.name }}</span>
  <span>{{ user.email }}</span>
  <status-badge :status="user.status"></status-badge>
</div>

点击按钮修改全局计数器 count++ 时，只要 user.id 和 user.status 不变，所有行都不会触发重新渲染；只有调用 updateUserStatus(id, newStatus) 时，对应行才更新。