本资料是一份 Vue.js 3 开发技能指南，用于构建采用 Composition API 的现代 Vue.js 应用。
一、用途 适用于构建新的 Vue.js 3 应用、从 Vue 2 Options API 迁移到 Composition API、实现 Pinia 状态管理、创建可复用 composables、使用 Nuxt 3 进行全栈开发，以及使用 Vitest 测试 Vue 组件。
二、技术栈概览 资料列出的工具与版本参考包括：Vue 3（核心框架，3.4+）、TypeScript（类型安全，5.0+）、Vite（构建工具，5.0+）、Pinia（状态管理，2.1+）、Vue Router（路由，4.2+）、Nuxt 3（全栈框架，3.10+）、Vitest（测试，1.0+）。
三、主要能力
- Composition API 与 script setup：包含基础组件结构，如使用 TypeScript 定义 Props（withDefaults、defineProps）与 Emits（defineEmits）、ref 响应式状态、computed、方法、onMounted 生命周期、模板与样式写法。
- 响应式模式：基本类型使用 ref()（通过 .value 访问）、对象与数组使用 reactive()（直接访问）、computed 计算值、watch 监听特定值及其选项（deep、immediate）、watchEffect 自动依赖追踪。
- Composables（可复用逻辑）：约定以 use 前缀命名（如 useFetch、useAuth、useLocalStorage、useDebounce），存放于 src/composables/；示例 useFetch 支持 MaybeRefOrGetter 输入、返回 data/error/loading/refetch，并在 URL 变化时自动重新获取；最佳实践包括接受 refs、getters 或普通值，返回含 refs 的普通对象，在 onUnmounted 中清理，使用 toValue() 处理灵活输入。
- Pinia 状态管理：Composition 风格的 defineStore 定义 State、Getters（computed）、Actions；在组件中使用 storeToRefs 解构 state/getters 以保持响应性，actions 可直接解构；以及带持久化的 Store 示例（从 localStorage 初始化并 watch 持久化）。
- 组件模式：Provider/Inject 模式（使用 InjectionKey 与 provide/inject，示例包含 useAuth 消费钩子及上下文缺失时的报错）；Smart/Dumb（容器/展示）组件划分示例。
- Nuxt 3 全栈：项目结构说明（pages 文件路由、components 与 composables 自动导入、server 下 Nitro API 路由、layouts、middleware、nuxt.config.ts）；API 路由示例（defineEventHandler、getMethod、readBody、getRouterParam）；数据获取（useFetch 服务端 SSR、useLazyFetch 客户端懒加载、带参数请求）。
- 使用 Vitest 测试：vitest.config.ts 配置（globals、jsdom 环境、setupFiles）与 setup 文件；组件测试示例（@testing-library/vue 的 render/screen/fireEvent、断言渲染内容与 emitted 事件）；composable 测试示例（stubGlobal fetch、flushPromises、断言 loading/data/error）。
四、反模式 资料列出需避免的反模式：复杂组件使用 Options API、直接修改 props、用 $refs 保存状态、深层嵌套 watchers、使用 mixins、未使用 storeToRefs() 解构 Pinia。
五、相关资源 资料给出 Vue.js 官方文档（https://vuejs.org/）、Pinia 文档（https://pinia.vuejs.org/）、Nuxt 3 文档（https://nuxt.com/）、VueUse composables（https://vueuse.org/）、Vue Test Utils（https://test-utils.vuejs.org/）等外链。
六、限制 资料未提供该技能的收费、价格、平台支持范围或运行环境要求等信息；上述内容均来自资料本身，未做补充推测。