집

Skill

웹 개발

vue

antfu/skills

TypeScript를 사용하여 Composition API로 Vue 3 단일 파일 컴포넌트를 작성하며, script setup 매크로, 반응형 시스템, 내장 컴포넌트 및 수명 주기 훅을 다룹니다.

...모든 것을 확장하십시오

업데이트 된 시간 2026년 9월 6일

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

Vue

Vue 3.5 기반. 반드시 ``와 함께 Composition API를 사용하십시오.

환경 설정

JavaScript보다 TypeScript를 선호합니다
를보다 선호합니다
성능상, 깊은 반응성이 필요하지 않은 경우 ref보다 shallowRef를 선호합니다
Options API보다 Composition API를 반드시 사용하십시오
반응형 속성 비구조화 사용은 권장하지 않습니다

핵심

주제	설명	참조
Script Setup 및 매크로	``, 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('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'
```