当使用 Vue 渲染海量数据时，你会采取哪些优化策略？请从数据层、渲染层和虚拟滚动等角度出发，阐述可行的优化手段及其适用场景。
考察说明
考查候选人在 Vue 中处理大数据渲染时的性能优化意识和技术方案。
回答思路
- 【回答框架 1】数据层优化：使用 Object.freeze 冻结数据以避免 Vue 对每个属性进行响应式绑定；对于非响应式数据可使用普通变量或 ref 但避免深层监听。分页或分批加载数据，减少单次渲染的数据量。
- 【回答框架 2】渲染层优化：合理使用 v-if 和 v-show 控制渲染条件，避免不必要的 DOM 创建；利用 computed 缓存计算结果，减少重复计算；使用 v-for 时务必绑定 key，提高 diff 效率。
- 【回答框架 3】虚拟滚动：对于长列表，采用虚拟滚动（如 vue-virtual-scroller）只渲染可视区域内的节点，大幅降低 DOM 数量和渲染负担。适用于数据量巨大且列表项高度固定或可动态计算的场景。
- 【回答框架 4】异步与批量更新：使用 nextTick 在数据更新后执行 DOM 操作，减少同步阻塞；可将渲染任务拆分为多个时间片（如 requestIdleCallback）避免长时间占用主线程。
- 【回答框架 5】组件粒度与函数式组件：将列表项拆分为独立组件，配合 memo 或函数式组件减少不必要的更新；利用 v-once 和 v-memo 减少静态内容的重复渲染。
- 【关键点 1】使用 Object.freeze 冻结数据可减少响应式开销。
- 【关键点 2】虚拟滚动是长列表的首选方案，能显著降低 DOM 数量。
- 【关键点 3】v-for 必须绑定 key 以保证高效复用和更新。
- 【关键点 4】computed 和 v-memo 能减少不必要的计算与渲染。
- 【易错点 1】过度使用 Object.freeze 可能导致数据无法动态更新。
- 【易错点 2】虚拟滚动不适用于高度不固定的复杂列表，需自定义测量。
- 【易错点 3】盲目拆分组件可能增加通信开销，需结合性能分析。