Vue.js前端框架Skill vue

名称	vue
描述	Vue.js渐进式JavaScript框架。适用于构建Vue组件、处理响应式（ref、reactive、computed、watch）或实现Vue组合式API模式。 metadata:
作者	Anthony Fu
版本	“2026.1.28” source: 生成自 https://github.com/vuejs/docs，脚本位于 https://github.com/antfu/skills

Vue

本技能基于 Vue 3.5+，生成于 2026-01-28。

Vue 是一个用于构建用户界面的渐进式JavaScript框架。它基于标准的HTML、CSS和JavaScript，提供了直观的API和世界级的文档。使用组合式API配合 <script setup> 和 TypeScript 是构建Vue应用的推荐方式。

核心参考

主题	描述	参考链接
响应式系统	ref、reactive、computed、watch 和 watchEffect	核心-响应式

组件

主题	描述	参考链接
Props	使用TypeScript声明和验证组件属性	组件-属性
事件 (Emits)	从组件发射自定义事件	组件-事件
插槽	向子组件传递模板内容	组件-插槽
v-model	在自定义组件上实现双向绑定	组件-v-model
生命周期钩子	在组件生命周期的特定阶段运行代码	组件-生命周期

特性

Script Setup 与 TypeScript

主题	描述	参考链接
Script Setup	用于单文件组件(SFC)的组合式API语法糖	特性-script-setup
TypeScript	使用组合式API实现类型安全的Vue组件	特性-typescript

可复用性

主题	描述	参考链接
组合式函数	封装和复用有状态的逻辑	特性-组合式函数
自定义指令	底层的DOM操作指令	特性-指令
模板引用	直接访问DOM和组件实例	特性-模板引用

高级

主题	描述	参考链接
Provide/Inject	跨组件树的依赖注入	高级-提供注入
异步与Suspense	顶层await的陷阱、异步组件、Suspense	高级-异步与Suspense

关键建议

• 对所有组件使用 <script setup lang="ts">
• 声明状态时优先使用 ref() 而非 reactive()
• 使用基于接口的类型化属性声明
• 使用 defineModel() 实现 v-model (3.4+)
• 响应式地解构属性 (3.5+) 以获得更简洁的代码
• 提取组合式函数 以复用有状态的逻辑