Heim

Skill

Webentwicklung

vue

antfu/skills

Erstellen Sie Vue 3 Single-File Components unter Verwendung der Composition API mit TypeScript, einschließlich Script-Setup-Makros, Reaktivitätssystem, integrierte Komponenten und Lifecycle-Hooks.

...Alle erweitern

Zeit aktualisiert 6. September 2026

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

Vue

Basierend auf Vue 3.5. Verwenden Sie stets die Composition API mit ``.

Einstellungen

Bevorzugen Sie TypeScript gegenüber JavaScript
Bevorzugen Sie gegenüber
Bevorzugen Sie für die Leistung shallowRef gegenüber ref, wenn keine tiefe Reaktivität erforderlich ist
Verwenden Sie stets die Composition API anstelle der Options API
Verwenden Sie Reactive Props Destructure nicht

Kern

Thema	Beschreibung	Referenz
Script Setup & Macros	``, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, Generics	script-setup-macros
Reaktivität & Lebenszyklus	ref, shallowRef, computed, watch, watchEffect, effectScope, Lebenszyklus-Hooks, Composables	core-new-apis

Funktionen

Thema	Beschreibung	Referenz
Eingebaute Komponenten & Direktiven	Transition, Teleport, Suspense, KeepAlive, v-memo, benutzerdefinierte Direktiven	advanced-patterns

Schnellreferenz

Komponentenvorlage


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('Titel geändert:', newVal)
})

onMounted(() => {
  console.log('Komponente eingebunden')
})


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

Wichtige Importe

// Reaktivität
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

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

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

// Hilfsfunktionen
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

Auf GitHub ansehen

---
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'
```