v-memo 通过依赖数组跳过未变子树的 diff 和 patch，适用于单条渲染成本高、数据源稳定、仅局部状态变化的静态列表；依赖项须为不可变基础类型或稳定引用，且需与 :key 一致。
用 v-memo 优化静态列表，核心是让 Vue 在依赖未变时跳过整块子树的 diff 和 patch，而不是盲目加指令。它不减少首次渲染开销，只降低后续更新中重复计算的成本。
适合用 v-memo 的静态列表特征
这类列表通常满足三个条件：单条渲染成本高（含图片、嵌套组件、复杂样式）、整体数据源稳定、仅局部状态（如选中、展开）偶发变化。比如后台管理系统的用户表格、商品卡片流、日志条目列表——它们内容本身很少刷新，但父组件可能因搜索框输入、分页切换或全局状态而频繁重渲染。
v-memo 依赖项怎么写才安全
依赖数组必须反映真正影响该节点渲染结果的值，且只能是基础类型或稳定引用：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- ✅ 推荐：
v-memo="[item.id, item.status, item.updatedAt]"—— 字段独立、不可变、语义明确 - ❌ 避免：
v-memo="[item]"—— 对象引用每次都不等，缓存永远失效 - ❌ 避免：
v-memo="[item.name.toUpperCase()]"—— 每次执行返回新字符串，无法命中缓存 - ⚠️ 注意：
v-memo="[]"等价于v-once，不是“智能缓存”，而是彻底冻结，慎用
配合 v-for 使用的关键细节
在循环中使用 v-memo 必须同步声明 :key，且 key 值建议与 memo 依赖一致：
立即学习“前端免费学习笔记（深入）”；
<div v-for="item in list" :key="item.id" v-memo="[item.id, item.status]">{{ item.name }}</div>- Vue 3.4+ 会检测 key 与 memo 依赖不一致的情况并警告，导致优化失效
- 不要把整个 v-for 容器包在一层 v-memo 下（如
<div v-memo="[list]"> <div v-for="...">），这会让依赖变成数组引用，失去意义 <h3>怎么确认优化起作用了</h3> <p>不用跑压测也能快速验证：</p> <ul> <li>打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，触发父组件更新，观察 v-memo 区域是否不闪红</li> <li>在组件 setup 中加 <code>console.log('rendering')，滚动或切换筛选后看日志是否明显减少 - 对比 Timeline 中 “Render” 阶段耗时：相同操作下应有可测量下降（尤其列表超过 200 行时效果显著）
