Lar

Skill

Desenvolvimento Web

vue

antfu/skills

Escreva Componentes de Arquivo Único do Vue 3 usando a API de Composição com TypeScript, abrangendo macros do script setup, sistema de reatividade, componentes embutidos e ganchos de ciclo de vida.

...Expandir tudo

Tempo atualizado 6 de Setembro de 2026

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

Vue

Baseado no Vue 3.5. Sempre use a API de Composição com ``.

Preferências

Prefira TypeScript sobre JavaScript
Prefira sobre
Para desempenho, prefira shallowRef sobre ref se a reatividade profunda não for necessária
Sempre use a API de Composição sobre a API de Opções
Desencoraje o uso da Destruição de Props Reativas

Core

Tópico	Descrição	Referência
Script Setup & Macros	``, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics	script-setup-macros
Reatividade & Ciclo de Vida	ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables	core-new-apis

Funcionalidades

Tópico	Descrição	Referência
Componentes e Diretivas Integrados	Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives	advanced-patterns

Referência Rápida

Modelo de Componente


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>

Importações Principais

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

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

// Ciclo de Vida
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilitários
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'

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