v-for 优化需编译期确保 key 稳定唯一（如 :key="item.id"），避免用 index；运行时可结合 v-memo 缓存子树、虚拟滚动处理大数据、v-once 固化静态列表。
v-for 是 Vue 编译器在高性能渲染场景中最常被深度定制的指令，它本身不是“可配置插件”，但其行为可通过编译阶段介入、运行时策略配合与语法约束实现定向优化。
编译期关键约束：key 必须稳定且唯一
Vue 编译器在解析 v-for 时，会将 :key 作为节点复用的核心依据。若 key 不稳定（如用 Math.random()、index 或 computed 属性中未响应式依赖的值），编译器无法正确追踪节点身份，导致 DOM 更新错乱或强制重绘。
- ✅ 推荐写法：
:key="item.id"（id 来自后端或持久化数据） - ⚠️ 避免写法：
:key="index"（插入/删除项时索引偏移，引发无谓 patch） - ? 特殊场景如静态列表（仅读、无增删），可用
:key="index"，但需显式注释说明
运行时协同：v-memo 与 v-for 组合降载
Vue 3.2+ 引入的 v-memo 可对 v-for 内部子树做条件缓存，编译器据此跳过整个 vnode 子树的 diff。它不改变 v-for 本身，但让编译器生成带记忆标记的渲染函数。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 适用场景：列表项结构固定、仅部分字段更新（如仅 status 变，其余文本/样式不变）
- 写法示例：
<div v-for="item in list" v-memo="[item.id, item.status]" :key="item.id">... - 注意：v-memo 的依赖数组必须是浅层值，不能含对象引用或未冻结对象
大规模列表：虚拟滚动需绕过原生 v-for
当数据量 > 500 条，直接 v-for 渲染会触发大量 vnode 创建与 diff，编译器无法自动降级。此时需用 <VirtualList> 等组件替代 v-for，本质是用 render 函数 + 手动 slot 分发，绕过编译器对 v-for 的常规处理路径。
立即学习“前端免费学习笔记（深入）”；
- 原理：只渲染可视区域的 10–20 个节点，滚动时动态更新 offset 和 slice 范围
- 工具推荐：
vue-virtual-scroller或@vueuse/components中的UseVirtualList - 关键点：模板中不再写 v-for，而是用
v-for在虚拟容器内部循环 slice 后的数据
静态内容固化：v-once + v-for 的边界用法
对完全不更新的列表（如文档目录、配置枚举），可在 v-for 容器上加 v-once，让编译器标记整块 vnode 为“一次性渲染”。后续响应式变化不会触发该节点及其子节点更新。
- 效果：跳过该节点所有响应式依赖收集与 patch 流程，减少内存占用与 diff 开销
- 限制：整个列表必须真正静态；若其中某 item 后续需局部响应，此方式不可行
- 典型用例：后台管理系统的菜单栏（权限初始化后即锁定）
