首页

Skill

网页开发

vue

antfu/skills

使用带有 TypeScript 的组合式 API 编写 Vue 3 单文件组件，涵盖 script setup 宏、响应式系统、内置组件以及生命周期钩子。

...展开全部

更新时间 2026-09-06

# typescript # vue # composition api # reactivity # script setup # single file components # vue 3

Vue

基于 Vue 3.5。始终使用带有 `` 的组合式 API。

偏好设置

优先使用 TypeScript 而非 JavaScript
优先使用 而非
出于性能考虑，如果不需要深层响应性，优先使用 shallowRef 而非 ref
始终使用组合式 API 而非选项式 API
不鼓励使用响应式 Props 解构

核心

主题	描述	参考
脚本设置与宏	``, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, 泛型	script-setup-macros
响应性与生命周期	ref, shallowRef, computed, watch, watchEffect, effectScope, 生命周期钩子, 组合式函数	core-new-apis

功能

主题	描述	参考
内置组件与指令	Transition, Teleport, Suspense, KeepAlive, v-memo, 自定义指令	advanced-patterns

快速参考

组件模板


import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps()

const emit = defineEmits()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {
  console.log('标题已更改:', newVal)
})

onMounted(() => {
  console.log('组件已挂载')
})


<template>
  {{ title }} - {{ doubled }}
</template></string>

关键导入

// 响应性
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// 监听器
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// 生命周期
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// 工具函数
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

在 GitHub 上查看

---
name: vue
description: Write Vue 3 Single-File Components using Composition API with TypeScript, covering script setup macros, reactivity system, built-in components, and lifecycle hooks.
---

# Vue

> Based on Vue 3.5. Always use Composition API with `<script setup lang="ts">`.

## Preferences

- Prefer TypeScript over JavaScript
- Prefer `<script setup lang="ts">` over `<script>`
- For performance, prefer `shallowRef` over `ref` if deep reactivity is not needed
- Always use Composition API over Options API
- Discourage using Reactive Props Destructure

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Script Setup & Macros | `<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | [script-setup-macros](references/script-setup-macros.md) |
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |

## Quick Reference

### Component Template

```vue
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {
  console.log('Title changed:', newVal)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>
```

### Key Imports

```ts
// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'
```

所有文件

0 个文件

安装 vue

将技能文件下载并解压至你的 .claude/skills/ 目录。

下载ZIP

克隆仓库并复制技能文件到您的项目中。

git clone https://github.com/antfu/skills/tree/main/skills/vue # Copy SKILL.md to your .claude/skills/ directory

复制

快速设置: 将技能文件夹复制到 .claude/skills/ 目录。Claude 将自动检测并使用该技能。

仓库 antfu/skills

vue

Vue