⚡

Vue.js前端框架Skill vue

Vue.js前端开发技能，专注于使用Vue 3构建现代化、响应式的Web用户界面。核心内容包括Vue 3组合式API、响应式系统（ref, reactive, computed, watch）、单文件组件(SFC)、TypeScript集成、组件通信（props, emits, slots, v-model）、生命周期管理以及高级特性如组合式函数、依赖注入和异步处理。适用于开发高效、可维护的前端应用。 关键词：Vue.js, Vue 3, 前端开发, 组合式API, 响应式编程, TypeScript, 单文件组件, 组件化开发, Web开发, JavaScript框架

前端开发 27 次安装 522 次浏览 更新于 3/1/2026

name: vue description: Vue.js渐进式JavaScript框架。适用于构建Vue组件、处理响应式（ref、reactive、computed、watch）或实现Vue组合式API模式。 metadata: author: Anthony Fu version: “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+) 以获得更简洁的代码
  • 提取组合式函数 以复用有状态的逻辑