Maison

Skill

Développement Web

vue

antfu/skills

Écrivez des composants Vue 3 en fichier unique en utilisant l'API de composition avec TypeScript, en couvrant les macros script setup, le système de réactivité, les composants intégrés et les cycles de vie.

...Développer tout

Heure mise à jour 6 septembre 2026

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

Vue

Basé sur Vue 3.5. Utilisez toujours l'API de Composition avec <script setup>.

Préférences

Préférez TypeScript à JavaScript
Préférez <script setup> à <script>
Pour les performances, préférez shallowRef à ref si une réactivité profonde n'est pas nécessaire
Utilisez toujours l'API de Composition plutôt que l'API des Options
Déconseillez l'utilisation de la déstructuration des propriétés réactives (Reactive Props Destructure)

Fondamentaux

Sujet	Description	Référence
Script Setup & Macros	`	script-setup-macros
Réactivité & Cycle de vie	ref, shallowRef, computed, watch, watchEffect, effectScope, hooks de cycle de vie, composables	core-new-apis

Fonctionnalités

Sujet	Description	Référence
Composants et directives intégrés	Transition, Teleport, Suspense, KeepAlive, v-memo, directives personnalisées	advanced-patterns

Référence rapide

Modèle de composant


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('Titre modifié :', newVal)
})

onMounted(() => {
  console.log('Composant monté')
})


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

Importations clés

// Réactivité
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

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

// Cycle de vie
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

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

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