Vue 3 Composition API & Skript-Setup

Vue

Basierend auf Vue 3.5. Immer Composition API mit <script setup lang="ts"> verwenden.

Präferenzen

• TypeScript gegenüber JavaScript bevorzugen
• <script setup lang="ts"> gegenüber <script> bevorzugen
• Aus Performancegründen shallowRef gegenüber ref bevorzugen, wenn keine tiefe Reaktivität erforderlich ist
• Immer Composition API gegenüber Options-API verwenden
• Verwendung von reaktiven Props-Destructure vermeiden

Kern

Thema	Beschreibung	Referenz
Script Setup & Macros	<script setup>, 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

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

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

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

Wichtige Importe

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

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

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

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