用途:面向 Vue 3 项目的开发规范技能,在编辑 .vue 文件、.tsx 或 .jsx 形式的 Vue 3 组件以及相关 .ts、.js 文件时必须使用,用于统一组件设计与代码风格。
核心原则:保持状态可预测,单一数据源,推导其余内容;数据流明确,属性向下传递、事件向上传递;避免巨型组件;合理使用计算属性与侦听器减少不必要重渲染;可读性优先。
技术栈:Vue 3.5(Composition API)+ 单文件组件 + setup 语法;TypeScript 6.x;SCSS 预处理。要求按指定技术栈使用最新可靠 API,不要沿用训练数据中的过时或废弃写法,例如 Vue 3.5 引入的 useTemplateRef 应优先于 ref 获取模板引用。
主要能力与规则:
- 组件拆分。禁止产生巨型组件,单组件 500-800 行可视为巨型组件信号。拆分方式包括分离 UI、使用 useXxx() 可组合函数、无状态无副作用逻辑做工具封装、状态提升到最近公共祖先或 Pinia。触发条件包括:同时拥有编排/状态逻辑与大量呈现标记、包含 3 个以上不同 UI 部分、存在重复使用的模板块。入口、根和路由视图组件应保持精简,只做布局、提供者连接和功能组合。
- 可读性。命名清晰、风格一致、避免过度抽象、在复杂逻辑处适度注释。
- 性能。重量级且不常用的组件用异步组件懒加载;避免高频事件、动画、定时器导致整个模板重渲染;列表渲染绑定 key;减少响应式开销,不需要响应式的属性用 shallowRef 或 shallowReactive;在 onUnmounted、onBeforeUnmount、onScopeDispose 中清理定时器、监听器等副作用,防止内存泄漏;除重置或确需副本的场景外,避免对响应式数据做拷贝中间操作。
限制:资料未提供安装命令、示例代码、收费模式、平台支持或效果数据,暂未提供。