Vue 性能、状态一致性与交付质量优化

## 任务目标 请完成选定 Vue 页面或模块的性能、状态一致性与交付质量优化，先测量问题，再落地代码并验证。指标未给出时先记录基线并提出与场景相符的目标，不虚构响应时间、提升比例或用户规模。 在现有授权范围内完成实际改动和验证；缺少外部条件时先完成可独立实现的部分，不能只停留在计划。 ## 输入信息（选填） 两项均可留空，也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表；能读取的内容由执行者补齐。 优化对象或现象： 工程或复现资料： ## 信息不完整时 先使用本次对话中已经说明的信息；用户留空、写“暂无／不清楚”或未替换输入标记，都按缺失处理，不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问，不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料，不为补齐输入擅自扩大操作范围。 ### 优先确认 - 核实 Vue 2/3、JS/TS、请求库、UI 库、路由缓存及现有 watcher 清理方式，不要求用户手填版本。 - 沿筛选、翻页和切换记录检查状态写入、请求取消、旧响应及 finally 的生效条件。 - 记录代表性操作的数据规模、模式、缓存、设备和网络条件，分开测量接口等待、重复请求、计算与组件更新。 - 检查模板循环、字典查找、资源导入、路由拆包和真实产物，确定优化影响范围。 ### 可采用的默认处理 - 未给性能指标时先采集可复查基线，以消除已证实浪费且业务不回归为目标，不承诺任意提速比例。 - 优先局部状态、纯 computed 与必要副作用清理；未证实瓶颈前不引入虚拟列表、全局缓存或 memo。 - 保留当前分页、选择及字典语义，写请求超时显示结果待确认，不把取消请求当作撤销业务。 ### 必须有依据的事项 - 优化涉及跨页选中、缓存失效或租户切换，而代码与接口无法确定需要保留的业务状态。 - 写操作结果未知且接口没有查单、幂等或补偿依据，不能自行重试并宣称提交成功。 只有缺口会改变业务结果、权限边界或关键实现，且无法从现有资料确认时，才集中提出最多 3 个关键问题；说明影响，并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定，不逐项等待确认。 ### 资料仍不足时的交付 - 无法运行页面时交付按代码证据排序的瓶颈候选、状态写入图和最小修正，另给同条件测量步骤。 - 没有代码时给出筛选竞态、重复提交、页面恢复的复现与验收用例，不填造耗时或包体数据。 ## 执行要求 关注用户操作结果和可复查证据，不为了使用优化技巧改动系统架构。 ### 读取工程并建立可比基线 确认目标目录、分支和 dirty 改动，保留原有内容，只改选定范围。核实 Vue 2/3、JS/TS、API 风格、构建框架、UI 库、store、路由、请求库和锁文件，保留选型，不默认升级或迁移。复现首屏、筛选、翻页、弹窗、切换记录等实际问题；记录数据规模、生产构建或开发模式、缓存状态、设备及网络。结合浏览器性能、网络、Vue DevTools 和构建分析，区分接口等待、重复请求、脚本计算、组件更新和资源加载；权限或数据错误优先于微小速度收益。 ### 定位结构与状态责任 页面编排流程，业务组件承接领域交互，通用组件负责稳定通用契约，composables/hooks 管理组合式逻辑和清理，API 层统一请求契约，store 管理必要共享状态，types 与 styles 各归其位；按问题整理现有模块，不建空目录。纯无副作用函数进入 util，领域规则集中在业务模块，真正共用的响应式能力才复用。不要把数据、权限、表单和所有展示塞进万能组件或 util，也不为性能把所有状态搬入全局。 ### 消除状态不同步 为查询条件、分页、选择项、表单和缓存分别确定唯一写入来源，派生值用 computed，props、事件载荷和 v-model 契约明确，不直接修改父级状态。检查路由返回、筛选重置、切换租户或记录、删除末页数据后的状态；分页和选择项的保留规则必须对应业务。编辑副本说明与源数据同步时机，避免双向 watch 相互回写。枚举和魔法值与服务端数据库码、权限及字典一致，已有字典继续复用，禁止复制另一套状态映射；失效缓存不得让旧权限或旧字典继续控制操作。未知或停用字典码保留原始值并作可识别提示，禁止映射为成功、首项或任意合法状态；编辑提交按真实接口契约处理，不为消除告警擅自改写原值。 ### 处理请求竞态和副作用 快速输入、连续翻页、切换弹窗记录会形成并发请求。按当前请求库取消可取消的旧请求，同时用序号或请求条件快照保护结果、错误和 finally，确保过期请求不能覆盖当前内容或解除新请求的 loading；不同业务请求分别维护状态。取消客户端请求不代表服务端业务已撤销，写操作超时不能直接自动重试。watch 只监听必要源，避免无边界 deep 和回写循环；清理失效请求、监听、定时器与订阅。Vue 3.5+ 的 onWatcherCleanup 必须同步注册，低版本使用其支持的清理机制和生命周期；离开、卸载及缓存页面停用时按实际行为处理。 ### 控制计算与渲染成本 v-for 采用稳定唯一的业务 key，排序和编辑列表不用索引、随机值或时间戳。将模板和循环中昂贵过滤、排序、格式化、字典查找移到有明确依赖的派生层；computed 保持纯计算，不夹带请求或状态修改。对重复查找按数据规模建立合适索引，注意索引随源数据更新。避免每项都发请求；优先真实可用的批量查询或服务端分页，没有接口时说明限制并控制并发，不伪造后端能力。检查 props 是否反复创建无意义新对象、组件是否无关更新；按证据减少渲染，不盲目 memo、深比较、shallow API 或缓存，防止失去必要更新。 ### 按场景优化列表与资源 根据实测 DOM 数量、交互延迟和数据规模选择分页或虚拟列表，核验行高、滚动定位、选择项、键盘操作与 UI 库能力，不用固定条数一刀切。测量实际生产包、关键路由资源和重复依赖，按既有构建能力优化导入、路由懒加载及重资源加载时机；确保首个操作不会因拆包失败失效。移除代码或依赖前核查自动导入、动态路由、按需组件与注册入口。缓存明确键、有效期、失效条件及身份边界，不用长期全局缓存掩盖接口问题。任何优化都要有前后相同场景的记录，不能以依赖宣传体积代替实际产物。 ### 完成可用的业务反馈 区分 loading、empty、error、成功及权限不足，失败不可显示成空数据，保留数据或清空数据按场景说明。正确区分 null、未提供、0、false 和空字符串。表单按输入、失焦与提交时机校验，错误就近展示并可纠正；服务端失败保留合理输入，弹窗关闭、重新打开不残留旧结果。提交时即时反馈并防重复点击，后端幂等键、唯一约束和事务仍由接口承担；没有后端能力时写明局限，不能把防抖当幂等。失败后给出真实可行的恢复路径，不吞错、不伪造成功。 ### 把优化纳入既有规范 保持政企中文界面的层级、对齐、间距、表格密度、主次操作和反馈一致，不添加非业务口号与技术说明。命名清楚，注释解释业务原因、接口限制和性能取舍，不逐行注释。使用兼容版本的 ESLint、eslint-plugin-vue，TS 工程配套 typescript-eslint，并保留 .vue 与脚本解析器分工；沿用 flat/legacy 模式和现有 ESLint 或 Prettier 格式方案。统一空格、缩进、换行、引号、分号、导入及文件区块顺序，对齐 .editorconfig；兼容配置只解决格式职责冲突，不降低质量门槛。零新增 lint 违规，不用 disable、扩大 ignore、any 或 ts-ignore 隐藏问题，不整仓格式化制造无关差异。 ## 交付与验收 ### 验证结果并完成交付 实际执行相关 lint、适用的 typecheck、生产 build 和关键交互验收；JS 工程无类型检查时说明不适用，工具或环境缺失则标记未执行。至少覆盖正常与空数据、未知与停用字典码、接口失败与恢复、快速筛选翻页、旧响应晚到、连续提交、切换记录、返回页面和权限变化；验证表单失焦、弹窗焦点、中文换行及新产生的控制台错误。只在隔离且获准的测试环境模拟网络故障，不影响真实业务。性能比较保持设备、数据、模式及缓存条件一致，多次记录波动，分别列包体积、请求量、渲染或交互指标；改善不能以业务回归为代价，未改善也如实报告。 输出：①问题、复现及基线；②已实现改动与关键路径，说明结构、状态和请求规则；③实际生效的检查与格式配置；④优化前后指标和测量条件；⑤验收项目、命令或操作、结果及未执行原因；⑥剩余限制和最小后续工作。保留历史失败与新增问题的区分，未跑不宣称通过，没有测量不宣称提速。完成已授权实现，不只提交建议，不生成无关 Markdown 文档。 ### 本条完成检查 - 记录问题、基线、实际修改和相同条件下的优化前后指标，未改善或未测量如实列明。 - 验收旧响应晚到、finally 竞态、快速分页、记录切换、权限变化及未知字典码，不以性能收益抵消业务错误。 - 执行相关 lint、适用类型检查、生产构建与关键交互，列出真实命令、结果和剩余限制。 按本条要求组织结果，使用简洁中文和一致的编号、术语、缩进及空行；已有项目格式优先。只说明实际完成的内容，将采用的假设、未完成项和缺少的条件写在相关位置，不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注，不宣称已通过或已有性能收益。 ## 参考资料与适用边界 官方依据：Vue 性能：https://vuejs.org/guide/best-practices/performance.html、Vue 监听清理：https://vuejs.org/guide/essentials/watchers.html、阿里前端规约：https://github.com/alibaba/f2e-spec、Vue 插件配置：https://eslint.vuejs.org/user-guide/、Prettier 与 Linter：https://prettier.io/docs/integrating-with-linters。 收录核验（2026-09-08）：已核对公开资料和本次项目要求的覆盖范围；尚未使用真实项目执行本模板或进行模型效果评测。具体改动、性能和回归结果须在目标工程中验证。