核心用法
Vue Skill 是一套面向 Vue 3 生态系统的综合技术指南与调试工具集,采用纯文档型设计,不包含可执行代码,专注于为开发者提供精准的问题诊断和最佳实践建议。其核心能力覆盖六大维度:
组件开发与审查:支持 <script setup>、组合式函数(Composables)和 Pinia 状态管理的代码编写与审查,涵盖 defineProps、defineEmits、defineModel 等宏的正确使用,以及组件通信模式(props、emits、provide/inject、模板引用)的选择决策。
响应式系统调试:针对 Vue 3 响应式机制的深度诊断,包括 ref 与 reactive 的选择策略、解构导致的响应式丢失、.value 遗漏、 watchers 循环触发("Maximum recursive updates exceeded")等高频问题的根因分析和修复方案。
路由与状态管理:Vue Router 配置审查、路由参数变化监听、导航守卫设计;Pinia/Vuex 状态库架构建议,包括 storeToRefs 的正确使用、模块作用域问题("getActivePinia() was called but there was no active Pinia")的排查。
性能优化指导:大列表虚拟滚动阈值配置(virtualize_threshold)、v-memo 应用时机、组件渲染优化、bundle 体积分析,以及图表/地图库(Chart.js、Leaflet 等)与 Vue 响应式系统的集成陷阱规避。
SSR 与 hydration:服务端渲染水合不匹配诊断、非确定性渲染问题定位、模块级状态共享导致的请求间数据泄露防护。
Vue 2 迁移支持:Options API 到 Composition API 的迁移策略、移除特性($on、filters、.sync)的替代方案、代码转换风险评估。
显著优点
权威性与完整性:由 Clawic 官方技能库维护,内容基于 Vue 3.2-3.5 完整版本链,覆盖从基础语法到高级模式的全部技术栈,包含 140+ 具体场景的快速参考表和诊断流程。
精准的问题定位:采用"症状→根因→修复"的三段式结构,例如针对"UI 不更新"问题,提供从响应式丢失表到具体代码改写的完整决策路径,大幅降低调试时间。
版本感知配置:通过 config.yaml 支持 vue_version、api_style、language、state_library 等 7 项用户偏好配置,自动适配代码示例和 API 建议,避免版本不兼容导致的运行时错误。
安全与性能并重:内置 Output Gates 检查清单,强制审查 XSS 风险(v-html 策略)、错误边界处理、异步状态三态(loading/error/empty)设计,从源头预防生产事故。
零依赖零风险:纯 Markdown 文档实现,无可执行代码、无第三方依赖、无网络请求,通过 S 级安全认证,企业环境可无条件部署。
潜在缺点与局限性
非自动化工具限制:作为文档型 Skill,无法自动检测代码中的 Vue 反模式,需开发者主动阅读并应用建议,对经验不足者存在认知负担。
技术栈边界明确:明确排除 Nuxt(SSR/路由/数据获取)、Vite(构建配置)、React/Svelte 支持,需配合其他 Skill 使用,增加多工具协调成本。
版本跟随延迟:vue_version: later 配置依赖人工检查 release notes,对于 Vue 3.5+ 新特性(如 onWatcherCleanup、useId)的采纳存在时间差。
中文本地化缺失:文档全文为英文,对中文开发者存在语言门槛,需结合翻译工具使用。
适合的目标群体
中高级 Vue 开发者:熟悉 Vue 基础语法,但在复杂场景(响应式丢失、性能优化、SSR 水合)需要系统化调试指南的工程师。
技术负责人与架构师:评估 Vue 3 技术选型、制定团队代码规范(ref vs reactive 风格统一)、规划 Vue 2 迁移策略的决策者。
全栈开发者:需要快速定位前后端协作问题(hydration mismatch、模块级状态泄露)的 Node.js/Python 背景开发者。
代码审查者:需要标准化审查清单(Output Gates)确保代码质量的前端技术委员会成员。
常规使用风险
配置漂移风险:用户偏好存储于 ~/Clawic/data/vue/config.yaml,若未正确迁移旧数据路径(~/vue/、~/clwic/vue/),可能导致版本适配建议错误。
版本判断失误:Skill 默认假设 vue >=3.5,若实际项目使用 3.2-3.4,盲目应用 defineModel()、useTemplateRef 等宏将导致编译或运行时错误,需严格校验 package.json。
性能建议误用:virtualize_threshold 默认为 200 行,若项目存在复杂渲染逻辑或低端设备用户,需结合实际 profiling 调整,避免过早优化或优化不足。
迁移风险评估不足:Vue 2 迁移建议中"稳定 CRUD 屏幕非技术债务"的判定依赖人工 context,自动化工具可能误判遗留代码的维护优先级。