Vue

¿Qué hace Vue?

Basado en Vue 3.5. Siempre usa Composition API con <script setup lang="ts">.

Preferencias

• Preferir TypeScript sobre JavaScript
• Preferir <script setup lang="ts"> sobre <script>
• Por rendimiento, preferir shallowRef sobre ref si no se necesita reactividad profunda
• Usar siempre Composition API sobre Options API
• Desaconsejar el uso de Reactive Props Destructure

Núcleo

Tema	Descripción	Referencia
Script Setup y Macros	<script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, genéricos	script-setup-macros
Reactividad y Ciclo de Vida	ref, shallowRef, computed, watch, watchEffect, effectScope, hooks del ciclo de vida, composables	core-new-apis

Características

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

Referencia Rápida

Plantilla de Componente

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

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'