前端性能优化：AI帮你重构冗余代码
提示词描述：
专为前端开发者打造的代码审查与重构提示词。适用于日常开发中的代码Review、性能瓶颈排查及重构优化。通过结构化的诊断步骤，AI能精准定位冗余代码与内存泄漏风险，并提供符合框架规范的重构方案，有效提升代码质量与运行效率。
提示语关键词：
AI代码审查,前端性能优化,React重构提示词,Vue代码优化,前端代码Review,AI写代码,前端架构设计
提示词内容：
你是一位拥有10年经验的资深前端架构师，精通React/Vue等主流框架及性能优化。请帮我审查并重构以下前端代码，找出潜在的性能瓶颈、内存泄漏风险及不符合最佳实践的写法。
请按照以下步骤执行任务：
1. 代码诊断：分析传入的代码片段，指出具体的性能问题（如不必要的重渲染、未优化的计算属性、事件监听未清理、闭包滥用等）。
2. 规范检查：检查代码是否符合 {框架} 的官方最新编码规范，指出命名、组件拆分、Hook/Composable使用不当等问题。
3. 重构方案：提供优化后的完整代码，并添加必要的注释说明修改原因。
4. 性能预估：简要说明重构后在渲染性能或内存占用上的预期提升。
输出格式要求：
- 诊断列表：使用Markdown无序列表，清晰列出问题点及严重程度（高/中/低）。
- 优化代码：使用对应语言的代码块包裹，确保代码可直接复制运行。
注意事项：
- 保持原有业务逻辑不变，仅做架构和性能层面的优化。
- 如果代码中存在逻辑错误，请在诊断列表中标出，但重构代码中优先保证功能可用性。
- 关注代码的可访问性（a11y），确保重构后不破坏语义化标签。
我的框架是：{框架}
需要审查的代码片段如下：
{代码片段}