Дом

Skill

Веб-разработка

vue

antfu/skills

Пишите одностраничные компоненты Vue 3 с использованием Composition API и TypeScript, включая макросы script setup, систему реактивности, встроенные компоненты и хуки жизненного цикла.

...Расширить все

Обновлено время 6 сентября 2026 г.

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

Vue

Основано на Vue 3.5. Всегда используйте Composition API с <script setup>.

Настройки

Предпочитайте TypeScript вместо JavaScript
Предпочитайте <script setup> вместо <script>
Для производительности предпочитайте shallowRef вместо ref, если глубокая реактивность не требуется
Всегда используйте Composition API вместо Options API
Не рекомендуется использовать деструктуризацию реактивных пропсов

Основные понятия

Тема	Описание	Ссылка
Script Setup и макросы	`	script-setup-macros
Реактивность и жизненный цикл	ref, shallowRef, computed, watch, watchEffect, effectScope, хуки жизненного цикла, composables	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('Title changed:', newVal)
})

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


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