前端组件开发：React与Vue代码生成方案深度评测
提示词描述：
专为前端开发者设计的框架选型与代码生成提示词。通过对比React与Vue在特定组件开发中的优劣势，AI不仅能生成符合当前技术栈的高质量代码，还会提供另一种框架的实现案例对比，帮助团队在技术选型时做出更明智的决策，提升组件开发效率。
提示语关键词：
AI写前端代码,React组件生成,Vue代码生成,前端框架对比,AI编程提示词,前端开发效率工具
提示词内容：
【需求分析】
在进行前端组件开发时，开发者常面临框架选择的纠结。本次需求旨在为 {组件名称} 组件生成高质量代码，核心功能需实现 {核心功能}，当前团队技术栈偏好为 {技术栈偏好}。我们需要一个能直接落地、包含最佳实践的代码方案。
【方法对比】
方案A（React生成）：采用Hooks和函数式编程，状态管理灵活，适合复杂交互。优势在于代码复用性高，自定义Hook能极大提升效率；劣势是闭包陷阱等心智负担较重。
方案B（Vue生成）：采用Composition API，模板语法直观，上手极快。优势在于响应式系统优雅，代码组织更符合直觉；劣势是在极复杂组件中响应式丢失问题需额外处理。
【推荐方案】
综合评估，若团队追求极致性能和复杂状态流转，推荐React方案；若追求开发速度和代码可读性，推荐Vue方案。本提示词将让AI根据您填写的偏好自动输出最优代码，并在末尾附带“如果改用另一种框架”的核心代码差异案例，帮助开发者拓宽思路。
【使用步骤】
1. 复制本提示词至AI对话框。
2. 将 {组件名称} 替换为实际名称（如：动态数据表格）。
3. 将 {核心功能} 替换为具体功能（如：支持列拖拽、分页和实时搜索）。
4. 将 {技术栈偏好} 替换为 React 或 Vue（可指定版本如 Vue3+TS）。
5. 发送提示词，获取定制化代码及对比案例。
【效果展示】
AI将输出结构清晰的组件代码，包含完整的TypeScript类型定义、状态管理逻辑。以React为例，会展示一个使用 useMemo 优化渲染的具体案例；以Vue为例，会展示 computed 与 watch 的最佳实践。代码附带详细注释，确保开箱即用，大幅减少调试时间。