---
name: vue-component
when: >-
  Vue组件, Vue页面, vue, Vue开发, 组合式API, Composition API, setup, defineComponent,
  Vue3, 前端开发vue
scope:
  - frontend
products:
  - '*'
id: ka-pattern-vue-component
asset_kind: pattern
lifecycle_status: active
owner_mechanism_id: mc-frontend-pattern
authority: supporting
routes:
  - '*'
primary_triggers:
  - Vue组件
  - Vue页面
  - vue
  - Vue开发
  - 组合式API
  - Composition API
  - setup
  - defineComponent
  - Vue3
  - 前端开发vue
priority: P2
specificity: 3
version: 1.1.0
last_reviewed: '2026-06-01'
consumes: []
emits: []
secondary_triggers: []
negative_triggers: []
type: pattern
stages: ["联调验证"]
---

## 决策规则
- 必须使用 `<script setup lang="ts">` 组合式 API，禁止选项式 API 新写组件
- 组件超过 300 行必须拆分为子组件或 composables
- Props 必须通过 defineProps + interface 定义，禁止使用 any
- 禁止在组件中直接调用 axios，必须通过 service 层或 composable
- 禁止 reactive 和 ref 混用导致响应性丢失
- 组件必须使用 `<script setup>` + Composition API，禁止使用 Options API
- 组件 Props 必须使用 defineProps<T>() 类型声明，禁止使用运行时声明
- 组件 Emits 必须使用 defineEmits<T>() 声明，禁止未声明的 this.$emit
- 组件必须有 name 属性（通过 defineOptions 或文件名约定），便于 DevTools 调试
- 复用逻辑必须抽取为 Composable（use 前缀），禁止在组件间复制粘贴逻辑

## 验收项
- [AC-01] 使用 `<script setup lang="ts">` 组合式 API
- [AC-02] Props 通过 defineProps + interface 定义
- [AC-03] 组件不超过 300 行
- [AC-04] 数据请求通过 service 层或 composable
- [AC-05] 使用 script setup
- [AC-06] Props 类型声明
- [AC-07] 有 Composable 复用逻辑
