Vue3 架构师必备：复杂组件状态管理与性能调优提示词模板
提示词描述：
专为Vue3进阶开发者打造的架构级提示词。通过精准定义业务场景与性能瓶颈，引导AI输出包含Pinia状态拆分、响应式API深度调优及渲染树优化的专业级代码方案，有效解决复杂中后台项目的渲染卡顿与状态管理混乱问题。
提示语关键词：
Vue3提示词, ChatGPT写代码, Vue性能优化, 前端架构设计提示词, Pinia状态管理模板, AI代码生成
提示词内容：
【模板说明】
本模板专为Vue3大型复杂应用设计，旨在解决深层组件状态穿透、高频更新导致的渲染卡顿等性能瓶颈。结合Pinia状态管理与组合式API（Composition API）的深度特性，利用AI生成具备高内聚低耦合特征的架构级代码方案。
【使用场景】
适用于中后台复杂表单联动、实时数据可视化大屏、多标签页状态持久化等需要细粒度响应式控制和极致渲染性能的前端工程化场景。
【模板正文】
你是一位资深Vue3前端架构师。请为我设计一个基于Vue3.3+和Pinia的组件状态管理与性能优化方案。
业务背景：{填写具体业务场景，如：包含50个动态表单项的复杂审批流}
核心状态：{填写需要全局或跨组件共享的核心状态，如：用户权限树、表单草稿数据}
性能瓶颈点：{填写当前遇到的性能问题，如：输入框失焦时全量重渲染、计算属性执行耗时过长}
要求：
1. 给出Pinia Store的模块化拆分策略与持久化配置。
2. 提供使用 computed、watchEffect 及 shallowRef 进行性能优化的具体代码实现。
3. 说明如何通过 v-memo 或 defineAsyncComponent 进一步优化渲染树。
【填写指南】
1. 业务背景需明确组件的复杂度层级（如嵌套深度、数据量级）。
2. 性能瓶颈点尽量提供具体的Lighthouse指标或现象描述（如“列表滚动掉帧”、“首屏FCP>2s”）。
3. 若涉及第三方重型库（如ECharts），请在背景中注明，以便AI提供针对性的按需引入与实例复用策略。
【效果示例】
AI将输出包含Store结构定义、基于 shallowRef 的深层对象优化代码片段，以及利用 v-memo 锁定非响应式列表项渲染的模板代码，并附带针对该场景的Vue Devtools性能排查建议与内存泄漏防范指南。