Hogar

Skill

Desarrollo web

vue

antfu/skills

Escribe componentes de archivo único de Vue 3 utilizando la API de composición con TypeScript, cubriendo las macros script setup, el sistema de reactividad, los componentes integrados y los ciclos de vida.

...Expandir todo

Tiempo actualizado 6 de septiembre de 2026

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

Vue

Basado en Vue 3.5. Utiliza siempre la API de Composición con ``.

Preferencias

Prefiere TypeScript sobre JavaScript
Prefiere sobre
Para el rendimiento, prefiere shallowRef sobre ref si no se necesita reactividad profunda
Utiliza siempre la API de Composición sobre la API de Opciones
Desaconseja el uso de la Desestructuración de Props Reactivas

Core

Tema	Descripción	Referencia
Script Setup & Macros	``, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics	script-setup-macros
Reactividad & Ciclo de vida	ref, shallowRef, computed, watch, watchEffect, effectScope, hooks de ciclo de vida, composables	core-new-apis

Características

Tema	Descripción	Referencia
Componentes y Directivas integradas	Transition, Teleport, Suspense, KeepAlive, v-memo, directivas personalizadas	advanced-patterns

Referencia rápida

Plantilla 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('Título cambiado:', newVal)
})

onMounted(() => {
  console.log('Componente montado')
})


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

Importaciones clave

// Reactividad
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'

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

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