Vue3 渲染性能优化有哪些？
先理解原理和示例，再练习完整口述与追问。
回答要点
理解编译器如何利用静态内容、Patch Flags、Block 等信息减少更新工作；运行时 keyed diff 会复用节点，并在特定路径用最长递增子序列减少移动。业务优化还包括稳定输入、拆分组件和列表虚拟化。
原理拆解
先通过性能记录确认瓶颈，再减少必须执行的工作。Vue3 编译器可以借助静态提升、patch flag 和 block 等信息缩小运行时比较范围，响应式调度也可合并更新，但一万个真实 DOM 节点仍有浏览器布局与绘制成本。业务层更有效的措施往往是稳定 props、避免无意义新引用、列表虚拟化、按需加载和减少深度追踪。
示例与推演
大表格每次输入都重新构造全部行对象，会使子行得到新引用；先分析是否可把筛选计算缓存、将编辑状态按行隔离。十万行数据用虚拟列表只渲染窗口附近，后台分页减少传输；大型只读数据可评估 shallowRef 与不可变替换。每项改动比较交互延迟、渲染次数和内存，而非仅看 bundle 大小。
易错点
不要默认给所有地方加深比较或缓存，比较本身也有成本。Vue3 不是永远不阻塞，长同步计算仍需拆分或 Worker。
参考回答可直接练习口述
Vue3 既利用运行时响应式，也利用模板编译结果减少更新范围。编译器能识别静态内容和动态部分，并通过 Patch Flags、Block 等信息减少不必要比较；keyed 子节点更新的部分路径用最长递增子序列减少移动。实际业务还要看节点数量、组件计算和数据转换成本，不能只靠框架 diff。
面试官可能继续问追问与完整解答展开收起
追问
知道 diff 原理后，为什么大列表依然卡？v-once、v-memo 适用于什么边界，何时会造成内容不更新？Vue3 官方性能指南
追问回答
大列表即使比较高效，创建、布局和绘制上万节点仍贵，应评估分页或虚拟化。v-once 固定一次渲染内容，v-memo 按声明依赖跳过子树更新；如果内容实际会变却遗漏依赖，就会把该更新的 UI 留在旧状态。