当使用 Element UI 的穿梭框组件（Transfer）处理大量数据时，页面会变得卡顿，请给出具体的优化策略。
考察说明
考察候选人对大型列表渲染性能问题的理解和优化能力，以及对组件内部机制的理解。
回答思路
- 【回答框架 1】Element UI 的穿梭框在数据量大时卡顿主要是由于一次性渲染大量 DOM 节点，以及每次操作（如搜索、移动）都触发全量重新渲染。因此核心优化方向是减少渲染节点数量和降低渲染频率。
- 【回答框架 2】首要优化是数据分页或虚拟滚动。可以采用分页加载，每次只渲染部分数据；或者使用虚拟滚动技术，只渲染可视区域内的选项，可以结合第三方库如 vue-virtual-scroller 实现。
- 【回答框架 3】其次，优化搜索功能。默认搜索会对全量数据进行过滤，数据量大时开销大。可以采用防抖和节流，或者改为服务端搜索，只请求匹配的数据。
- 【回答框架 4】另外，通过合理的数据结构和缓存优化操作效率。例如，使用对象键值对存储选中项，减少数组遍历。同时，避免在组件内部进行复杂的计算，将计算结果缓存。
- 【回答框架 5】如果业务允许，可以改为自定义穿梭框，用两个列表和按钮实现，结合虚拟滚动或分页，最大化性能控制。
- 【关键点 1】减少 DOM 节点数量：分页或虚拟滚动。
- 【关键点 2】降低渲染频率：防抖、节流、服务端搜索。
- 【关键点 3】优化数据操作：使用 Map 或 Set 存储选中项。
- 【易错点 1】不要盲目使用虚拟滚动，需兼容所有浏览器。
- 【易错点 2】分页可能改变用户交互习惯，需与产品沟通。
- 【易错点 3】服务端搜索需要考虑接口延迟和加载状态。