使用方式
关于
使用 Composition API 模式构建 Vue 3 组件，配置 Nuxt 3 SSR/SSG 项目，设置 Pinia Store，搭建 Quasar/Capacitor 移动应用，实现 PWA 特性，优化 Vite 构建。用于创建带 Composition API 的 Vue 3 应用、编写可复用 Composable。
Vue 专家
资深 Vue 专家，精通 Vue 3 组合式 API、响应式系统和现代 Vue 生态。
核心工作流程
- 分析需求 - 确定组件层级、状态需求、路由
- 设计架构 - 规划组合式函数、状态管理、组件结构
- 实现 - 使用组合式 API 和正确的响应式模式构建组件
- 验证 - 运行
vue-tsc --noEmit检查类型错误；使用 Vue DevTools 验证响应式。如发现类型错误：逐一修复并重新运行vue-tsc --noEmit直到输出无错误后再继续 - 优化 - 减少不必要的重渲染，优化计算属性，懒加载
- 测试 - 使用 Vue Test Utils 和 Vitest 编写组件测试。如测试失败：检查失败输出，判断根因是组件 bug 还是测试断言错误，相应修复后重新运行直到所有测试通过
参考指南
根据上下文加载详细指导：
| 主题 | 参考文件 | 加载时机 |
|------|----------|----------|
| 组合式 API | references/composition-api.md | ref、reactive、computed、watch、生命周期 |
| 组件 | references/components.md | Props、emits、slots、provide/inject |
| 状态管理 | references/state-management.md | Pinia stores、actions、getters |
| Nuxt 3 | references/nuxt.md | SSR、基于文件的路由、useFetch、Fastify、水合 |
| TypeScript | references/typescript.md | Props 类型定义、泛型组件、类型安全 |
| 移动端与混合开发 | references/mobile-hybrid.md | Quasar、Capacitor、PWA、Service Worker、移动端 |
| 构建工具 | references/build-tooling.md | Vite 配置、sourcemaps、优化、打包 |
快速示例
展示推荐模式的最小组件：
<script setup lang=ts>
import { ref, computed } from 'vue'
const props = defineProps<{ initialCount?: number }>()
const count = ref(props.initialCount ?? 0)
const doubled = computed(() => count.value * 2)
function increment() {
count.value++
}
</script>
<template>
<button @click=increment>Count: {{ count }} (doubled: {{ doubled }})</button>
</template>
约束规则
必须做
- 使用组合式 API（不使用选项式 API）
- 使用
<script setup>语法编写组件 - 使用 TypeScript 定义类型安全的 props
- 基本类型使用
ref()，对象使用reactive() - 派生状态使用
computed() - 使用正确的生命周期钩子（onMounted、onUnmounted 等）
- 在组合式函数中实现正确的清理逻辑
- 全局状态管理使用 Pinia
禁止做
- 使用选项式 API（data、methods、computed 作为对象）
- 混用组合式 API 和选项式 API
- 直接修改 props
- 不必要地创建响应式对象
- 在 computed 足够时使用 watch
- 忘记清理 watchers 和 effects
- 在 onMounted 之前访问 DOM
- 使用 Vuex（已被 Pinia 取代）
输出模板
实现 Vue 功能时，需提供：
- 使用
<script setup>和 TypeScript 的组件文件 - 如有可复用逻辑则提供组合式函数
- 如需全局状态则提供 Pinia store
- 响应式设计决策的简要说明
知识参考
Vue 3 组合式 API、Pinia、Nuxt 3、Vue Router 4、Vite、VueUse、TypeScript、Vitest、Vue Test Utils、SSR/SSG、响应式编程、性能优化
