review-vue

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Review Vue

技能：Vue代码审查

Purpose

用途

Review Vue 3 code for framework conventions only. Do not define scope (diff vs codebase) or perform security/architecture analysis; those are handled by scope and cognitive skills. Emit a findings list in the standard format for aggregation. Focus on Composition API and

<script setup>

, reactivity (ref/reactive, computed/watch), component boundaries and props/emits, state (Pinia/store), routing and guards, performance (e.g. v-memo), and accessibility where relevant.

仅针对Vue 3代码的框架规范进行审查。无需定义审查范围（与代码库的差异对比）或执行安全/架构分析；这些工作由范围类和认知类技能负责。以标准格式输出问题清单用于汇总。重点关注Composition API与

<script setup>

、响应式（ref/reactive、computed/watch）、组件边界与props/emits、状态（Pinia/store）、路由与守卫、性能（如v-memo）以及相关可访问性内容。

Use Cases

适用场景

Orchestrated review: Used as the framework step when review-code runs scope → language → framework → library → cognitive for Vue projects.
Vue-only review: When the user wants only Vue/frontend framework conventions checked.
Pre-PR Vue checklist: Ensure Composition API usage, reactivity, and component contracts are correct.

When to use: When the code under review is Vue 3 and the task includes framework quality. Scope is determined by the caller or user.

协同审查：在review-code针对Vue项目按范围→语言→框架→库→认知的流程执行时，作为框架环节的步骤使用。
仅Vue审查：当用户仅需检查Vue/前端框架规范时使用。
PR前Vue检查清单：确保Composition API使用、响应式处理和组件契约的正确性。

适用时机：当待审查代码为Vue 3且任务包含框架质量检查时。审查范围由调用方或用户确定。

Behavior

行为规范

Scope of this skill

本技能的审查范围

Analyze: Vue 3 framework conventions in the given code scope (files or diff provided by the caller). Do not decide scope; accept the code range as input.
Do not: Perform scope selection, security review, or architecture review; do not review non-Vue files for Vue rules unless in scope (e.g. mixed repo).

分析内容：在给定代码范围（调用方提供的文件或差异内容）内的Vue 3框架规范。无需自行决定审查范围；接受输入的代码范围即可。
禁止操作：不得执行范围选择、安全审查或架构审查；除非明确在审查范围内（如混合仓库），否则不得针对非Vue文件应用Vue规则进行审查。

Review checklist (Vue framework only)

审查检查清单（仅针对Vue框架）

Composition API and script setup: Prefer
```
<script setup>
```
and Composition API; correct use of defineProps, defineEmits, defineExpose; lifecycle hooks (onMounted, onUnmounted, etc.).
Reactivity: Correct use of ref vs reactive; computed vs watch; avoid mutating props; deep reactivity and unwrapping in templates.
Component boundaries: Clear props/emits contracts; avoid prop drilling where a store or provide/inject is appropriate; single responsibility per component.
State (Pinia/store): Appropriate use of Pinia (or Vuex) stores; avoid duplicating server state in multiple places; actions vs direct mutation.
Routing and guards: Vue Router usage; navigation guards and lazy loading; route params and query handling.
Performance: v-memo where list rendering is expensive; avoid unnecessary re-renders; key usage in lists.
Accessibility: Semantic HTML and ARIA where relevant; form labels and focus management.

Composition API与script setup：优先使用
```
<script setup>
```
和Composition API；正确使用defineProps、defineEmits、defineExpose；生命周期钩子（onMounted、onUnmounted等）。
响应式：正确区分使用ref与reactive；computed与watch的合理使用；避免直接修改props；模板中的深度响应式与自动解包。
组件边界：清晰的props/emits契约；在适合使用store或provide/inject的场景避免props透传；组件遵循单一职责原则。
状态管理（Pinia/store）：合理使用Pinia（或Vuex）状态库；避免在多个位置重复存储服务端状态；区分actions与直接修改状态的使用场景。
路由与守卫：Vue Router的正确使用；导航守卫与懒加载；路由参数与查询参数的处理。
性能优化：在列表渲染开销较大的场景使用v-memo；避免不必要的重渲染；列表中正确使用key。
可访问性：相关场景下使用语义化HTML和ARIA；表单标签与焦点管理。

Tone and references

语气与引用规范

Professional and technical: Reference specific locations (file:line or component name). Emit findings with Location, Category, Severity, Title, Description, Suggestion.

专业且技术化：引用具体位置（文件:行号或组件名称）。输出的问题清单需包含位置、类别、严重程度、标题、描述、建议。

Input & Output

输入与输出

Input

输入

Code scope: Files or directories (or diff) containing Vue 3 code (.vue, .ts with Vue APIs). Provided by the user or scope skill.

代码范围：包含Vue 3代码的文件或目录（或差异内容），文件格式为.vue或使用Vue API的.ts文件。由用户或范围类技能提供。

Output

输出

Emit zero or more findings in the format defined in Appendix: Output contract.
Category for this skill is framework-vue.

输出零个或多个问题项，格式遵循附录：输出契约中的定义。
本技能对应的类别为framework-vue。

Restrictions

限制条件

Do not perform scope selection, security, or architecture review. Stay within Vue 3 framework conventions.
Do not give conclusions without specific locations or actionable suggestions.
Do not review non-Vue code for Vue-specific rules unless explicitly in scope.

禁止执行范围选择、安全审查或架构审查。仅聚焦Vue 3框架规范。
禁止在未提供具体位置或可执行建议的情况下给出结论。
禁止针对非Vue代码应用Vue特定规则进行审查，除非明确将其纳入审查范围。

Self-Check

自我检查

Was only the Vue framework dimension reviewed (no scope/security/architecture)?
Are Composition API, reactivity, components, state, routing, and performance covered where relevant?
Is each finding emitted with Location, Category=framework-vue, Severity, Title, Description, and optional Suggestion?
Are issues referenced with file:line or component?

是否仅审查了Vue框架维度（未涉及范围/安全/架构）？
是否覆盖了相关的Composition API、响应式、组件、状态、路由和性能内容？
每个输出的问题项是否包含位置、类别=framework-vue、严重程度、标题、描述以及可选的建议？
是否通过文件:行号或组件名称引用问题？

Examples

示例

Example 1: Mutating props

示例1：修改props

Input: Component that assigns to a prop in script or template.
Expected: Emit a finding (major/minor) for prop mutation; suggest local state or emit to parent. Category = framework-vue.

输入：在脚本或模板中对prop进行赋值的组件。
预期输出：输出一个关于修改prop的问题项（严重程度为主要/次要）；建议使用本地状态或向父组件触发事件。类别=framework-vue。

Example 2: Missing key in v-for

示例2：v-for缺少key

Input: v-for without :key or with non-stable key (e.g. index).
Expected: Emit finding for list identity and performance; suggest stable unique key. Category = framework-vue.

输入：v-for未使用:key或使用非稳定key（如index）。
预期输出：输出一个关于列表标识与性能的问题项；建议使用稳定的唯一key。类别=framework-vue。

Edge case: Vue 2 Options API

边缘案例：Vue 2 Options API

Input: Legacy Vue 2 Options API in a mixed codebase.
Expected: Review for Vue 2 patterns (data, methods, lifecycle) if the skill is extended to Vue 2; otherwise note "Vue 3 Composition API preferred" where migration is feasible. For this skill, focus on Vue 3; note Vue 2 only if explicitly in scope.

输入：混合代码库中的遗留Vue 2 Options API。
预期输出：若本技能扩展支持Vue 2，则针对Vue 2模式（data、methods、生命周期）进行审查；否则在可迁移的场景下标注“推荐使用Vue 3 Composition API”。本技能仅聚焦Vue 3；仅当明确纳入审查范围时才处理Vue 2相关内容。

Appendix: Output contract

附录：输出契约

Each finding MUST follow the standard findings format:

Element	Requirement
Location	`path/to/file.vue` or `.ts` (optional line or range).
Category	`framework-vue` .
Severity	`critical` \| `major` \| `minor` \| `suggestion` .
Title	Short one-line summary.
Description	1–3 sentences.
Suggestion	Concrete fix or improvement (optional).

Example:

markdown

- **Location**: `src/components/UserList.vue:18`
- **Category**: framework-vue
- **Severity**: major
- **Title**: v-for missing stable key
- **Description**: Using index as key can cause incorrect reuse and state bugs when list order changes.
- **Suggestion**: Use a unique stable id (e.g. user.id) as :key.

每个问题项必须遵循标准问题格式：

元素	要求
位置	`path/to/file.vue` 或 `.ts` （可选行号或范围）。
类别	`framework-vue` 。
严重程度	`critical` \| `major` \| `minor` \| `suggestion` 。
标题	简短的单行摘要。
描述	1–3句话。
建议	具体的修复或改进方案（可选）。

示例：

markdown

- **Location**: `src/components/UserList.vue:18`
- **Category**: framework-vue
- **Severity**: major
- **Title**: v-for missing stable key
- **Description**: Using index as key can cause incorrect reuse and state bugs when list order changes.
- **Suggestion**: Use a unique stable id (e.g. user.id) as :key.