review-vue

技能：审查 Vue

用途

仅审查 Vue 3 代码的框架约定。不要界定范围（差异内容还是整个代码库），也不要进行安全或架构分析；这些工作由范围分析和认知技能负责。按照标准格式输出问题列表，以便汇总。重点关注组合式 API 和 <script setup>、响应式（ref/reactive、computed/watch）、组件边界和 props/emits、状态（Pinia/store）、路由和守卫、性能（例如 v-memo），以及相关的无障碍性。

---

核心目标

主要目标：针对给定代码范围，生成涵盖组合式 API 用法、响应式正确性、组件边界、状态管理、路由、性能和无障碍性的 Vue 3 框架问题列表。

成功标准（必须全部满足）：

1. ✅ 仅限 Vue 3 框架范围：只审查了 Vue 3 框架约定；未进行范围选择、安全分析或架构分析
2. ✅ 涵盖全部七个 Vue 维度：组合式 API/script setup、响应式（ref/reactive/computed/watch）、组件边界/props/emits、状态（Pinia）、路由/守卫、渲染性能，以及相关的无障碍性
3. ✅ 兼容问题列表格式：每条问题都包含 findings-list §5.1 要求的所有要素，且类别为 framework-vue
4. ✅ 组件/文件引用：每条问题都指向具体的文件:行号或组件名称
5. ✅ 排除非 Vue 代码：除非非 Vue 文件明确属于范围，否则不对其应用 Vue 专属规则

验收测试：输出是否包含以 Vue 3 为中心的问题列表，涵盖每个相关框架维度并附有组件/文件引用，且未进行安全、架构或范围分析？

---

范围边界

此技能负责：

• 组合式 API 和 <script setup> 的正确用法（defineProps、defineEmits、defineExpose、生命周期钩子）
• 响应式正确性（ref 与 reactive、computed 与 watch、修改 prop、深层响应式）
• 组件边界设计（props/emits 契约、prop 逐层传递、provide/inject）
• 状态管理（Pinia/Vuex：区分 action 和直接修改，避免重复存储服务端状态）
• 路由（Vue Router、导航守卫、懒加载、路由参数/查询参数处理）
• 性能（v-memo、v-for key 稳定性、不必要的重新渲染）
• 无障碍性（语义化 HTML、ARIA、表单标签、焦点管理）

此技能不负责：

• 范围选择——范围由调用方确定
• 安全分析（XSS、注入风险）——使用 review-security
• 架构分析——使用 review-architecture
• 语言/运行时（JavaScript/TypeScript）约定——使用通用 JS/TS 分析，或将其作为单独问题指出
• 完整的编排式审查——使用 orchestrate-code-review

交接点：输出所有 Vue 问题后，将工作交接给 orchestrate-code-review 进行汇总。对于 XSS 风险（误用 v-html、未清理内容），请予以指出并建议使用 review-security。

---

使用场景

• 编排式审查：当 orchestrate-code-review 对 Vue 项目按范围 → 语言 → 框架 → 库 → 认知的顺序运行时，将其用作框架审查步骤。
• 仅审查 Vue：用户只想检查 Vue/前端框架约定时使用。
• PR 前 Vue 检查清单：确认组合式 API 用法、响应式和组件契约正确。

使用时机：待审查代码使用 Vue 3，且任务涉及框架质量时。范围由调用方或用户确定。

---

行为

此技能涵盖的内容

• 分析：给定代码范围（调用方提供的文件或 diff）内的 Vue 3 框架约定。此技能不决定范围，而是将代码范围作为输入。
• 不做：不执行范围选择、安全审查或架构审查；除非非 Vue 文件包含在范围内（例如混合仓库），否则不对其应用 Vue 规则。

审查清单（仅限 Vue 框架）

1. Composition API 和 script setup：优先使用 <script setup> 和 Composition API；正确使用 defineProps、defineEmits、defineExpose；正确使用生命周期钩子（onMounted、onUnmounted 等）。
2. 响应性：正确使用 ref 与 reactive；正确使用 computed 与 watch；避免修改 props；正确处理深层响应性以及模板中的自动解包。
3. 组件边界：明确 props/emits 契约；适合使用 store 或 provide/inject 时，避免逐层传递 props；每个组件只负责一项职责。
4. 状态（Pinia/store）：适当地使用 Pinia（或 Vuex）store；避免在多个位置重复存储服务器状态；区分使用 actions 与直接修改状态。
5. 路由和守卫：正确使用 Vue Router；正确使用导航守卫和懒加载；正确处理路由参数和查询参数。
6. 性能：对开销较大的列表渲染使用 v-memo；避免不必要的重新渲染；正确使用列表中的 key。
7. 无障碍：在适当情况下使用语义化 HTML 和 ARIA；正确设置表单标签并管理焦点。

语气和参考资料

• 专业且技术性强：引用具体位置（文件:行号或组件名称）。输出的每条发现都必须包含 发现列表 §5.1 要求的所有要素。

---

输入和输出

输入

• 代码范围：包含 Vue 3 代码的文件或目录（或 diff）（.vue，或使用 Vue API 的 .ts）。由用户或范围技能提供。

输出

• 按 specs/findings-list.md 定义的格式输出零条或多条发现，其 Category 为 framework-vue。
• 此技能的类别为 framework-vue。

---

限制

严格边界

• 不要执行范围选择、安全审查或架构审查。仅遵循 Vue 3 框架约定。
• 不要在没有具体位置或可执行建议的情况下给出结论。
• 除非非 Vue 代码明确包含在范围内，否则不要对其应用 Vue 特定规则。

技能边界

不要执行以下工作（由其他技能负责）：

• 不要选择或定义代码范围——由调用方或 orchestrate-code-review 设置范围
• 不要执行安全分析（XSS、注入）——使用 review-security
• 不要执行架构分析——使用 review-architecture

何时停止并移交：

• 输出所有 Vue 相关发现后，将其移交给 orchestrate-code-review 汇总
• 遇到 XSS 风险时（例如不安全地使用 v-html），请注明并建议使用 review-security
• 用户要求进行完整审查（范围 + 语言 + 认知）时，转交给 orchestrate-code-review

---

自检

核心成功标准

• 仅限 Vue 3 框架范围：只审查了 Vue 3 框架约定；未执行范围选择、安全或架构分析
• 涵盖全部七个 Vue 维度：Composition API/script setup、响应性（ref/reactive/computed/watch）、组件边界/props/emits、状态（Pinia）、路由/守卫、渲染性能，以及适用情况下的无障碍
• 发现格式符合要求：每条发现均包含 发现列表 §5.1 要求的所有要素，类别为 framework-vue
• 组件/文件引用：每条发现都指向具体的文件:行号或组件名称
• 排除非 Vue 代码：除非明确包含在范围内，否则不对非 Vue 文件应用 Vue 特定规则

流程质量检查

• 是否只评审了 Vue 框架相关维度（不涉及范围、安全性或架构）？
• 是否涵盖了相关的 Composition API、响应式、组件、状态、路由和性能方面？
• 每条发现是否都包含 findings-list §5.1 要求的所有要素，并且 category=framework-vue？
• 每个问题是否都关联到文件:行号或组件？

验收测试

输出是否包含以 Vue 3 为中心的发现列表，涵盖每个相关框架维度并引用组件/文件，同时不进行安全性、架构或范围分析？

---

示例

示例 1：修改 props

• 输入：某个组件在脚本或模板中给 prop 赋值。
• 预期：针对 prop 修改发出一条发现（major/minor）；建议使用本地状态或向父组件 emit。category=framework-vue。

示例 2：v-for 缺少 key

• 输入：v-for 没有 :key，或使用了不稳定的 key（例如数组索引）。
• 预期：针对列表标识和性能发出一条发现；建议使用稳定且唯一的 key。category=framework-vue。

边缘情况：Vue 2 Options API

• 输入：混合代码库中存在旧版 Vue 2 Options API。
• 预期：如果该技能扩展到 Vue 2，则评审 Vue 2 模式（data、methods、生命周期）；否则，在可行的迁移场景下注明“使用 Vue 3 Composition API”。此技能应专注于 Vue 3；仅在明确将 Vue 2 纳入范围时才提及 Vue 2。