v-memo 是运行时条件记忆化指令，依赖数组浅相等时直接复用 vnode 子树，跳过创建、diff 和 patch；适用于长列表、父组件高频更新但子区域稳定、含重型子组件的静态区块等场景。
v-memo 不是缓存“结果值”，而是运行时跳过整棵子树的 VNode 创建、diff 和 patch 过程——只要依赖数组中所有值浅相等（===），Vue 就直接复用上一次生成的 vnode 子树，不新建、不比对、不更新 DOM。
明确适用场景：哪些地方值得加 v-memo
它不是万能开关，只在以下情况收益明显：
- 长列表渲染（如 500+ 条数据），但每次更新仅少数项实际变化（例如仅选中状态、排序标记）
- 父组件频繁响应式更新（如全局 loading、搜索关键词、时间刷新），而子区域数据实际未变
- 包含重型子组件或复杂插槽的静态区块，仅个别 prop 动态绑定（如
:status或:id） - 仪表盘中局部卡片、表单区块，主体内容固定，只有一两个字段可编辑或切换
正确写法：依赖数组必须精准且稳定
依赖数组决定“什么变才重绘”。错误声明会导致该更新的不更新，或不该跳过的被跳过：
- 只放基础类型或已响应式的引用（
item.id、user.status、computedFlag），避免非响应式对象或函数调用 - 数组长度必须固定，不能动态增减；Vue 按索引逐项
===比较，不深比较对象 - 包裹元素必须带
key（尤其配合v-for时），否则复用逻辑可能错位 - 空数组
v-memo="[]"等效于v-once：首次渲染后永久跳过，慎用
典型用法示例
比如渲染用户列表，仅 selectedId 变化时才需更新对应项：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
<div v-for="user in users" :key="user.id">
<div v-memo="[user.id, user.status, selectedId === user.id]">
<usercard :user="user"></usercard><statusbadge :status="user.status"></statusbadge><span :class="{ active: selectedId === user.id }">{{ user.name }}</span>
</div>
</div>
当 selectedId 改变，只有匹配的那一项依赖数组变化，其余项直接复用旧 vnode；整个子树（含子组件生命周期、指令执行、属性 patch）全部跳过。
和 v-once、KeepAlive 的关键区别
别混用或误替代：
-
v-once：编译期冻结，只渲染一次，后续任何变化都不响应 -
v-memo：运行时按依赖判断，变则更新，不变则跳过，仍保持响应式连接 -
<keepalive></keepalive>：缓存整个组件实例（含状态、DOM、生命周期），适用于路由或 tab 切换，开销大、内存占用高
v-memo 是轻量级、局部、无状态的 diff 跳过机制，不保留组件实例，也不影响内部响应式逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
