vue

用途 Vue 3 是用于构建用户界面的渐进式 JavaScript 框架。本技能围绕 Vue 3 的 Composition API，提供从项目创建到组件开发的用法参考，用于构建响应式 UI、编写可复用逻辑和组织状态管理。

快速开始 资料给出创建项目的方式：

npm create vue@latest my-app
cd my-app
npm install
npm run dev

主要能力 资料覆盖以下能力：单文件组件（SFC），使用 <script setup lang="ts">、<template> 与 <style scoped> 组织组件；响应式，包括 ref（原始值）、reactive（对象）、computed（派生状态，含可写 computed）、watch 与 watchEffect（副作用）；组件通信，包括 Props（defineProps 与 TypeScript 接口、withDefaults 默认值）、Events（defineEmits）与 v-model（defineModel，含具名 v-model）；插槽，包括默认插槽、具名插槽与作用域插槽；生命周期钩子，如 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted；模板引用（ref 绑定 DOM）；Provide/Inject 跨层级传值；组合式函数（composables），含异步组合式函数（如 useFetch）；指令，包括内置指令（v-if、v-show、v-for、绑定、事件、v-model 修饰符）与自定义指令；Transition 过渡动画。

使用方式 常用模式包括：在逻辑中使用 ref 需通过 .value 访问，在模板中自动解包；computed 用于派生状态，watch/watchEffect 用于副作用；组件间通过 Props 传入数据、通过 Events 向父组件通知；用 defineModel 实现 v-model；用插槽自定义组件内容；将可复用有状态逻辑抽取为组合式函数。资料给出的最佳实践包括：使用 Composition API 以获得更好的 TypeScript 支持和逻辑复用；抽取 composable；为 props 和 emits 添加类型；使用 defineModel 简化 v-model；优先使用 ref 而非 reactive。常见错误与修正也一并列出，例如忘记 .value、直接解构 reactive（应使用 toRefs()）、ref 与 reactive 类型用错、v-for 缺少唯一 :key、直接修改 props（应通过事件通知父组件）。

适用场景 资料适用于创建 Vue 应用、构建响应式界面、编写组件与复用状态逻辑，并包含 TypeScript 模式相关参考（如 references/composition-api.md、references/reactivity.md、references/typescript.md）。

限制 资料未提供运行环境要求、浏览器兼容范围、性能指标、收费与授权信息，也未说明该技能自身的安装或调用方式，这些内容暂未提供。