Vue 19: El Modelo Mental de <script setup>
easy⏱ 5 mincoursevue
Sintaxis real de <script setup> en un SFC
Esto es Vue moderno genuino e idiomático — la sintaxis que escribirás en cada archivo .vue real. Nunca se ejecuta en este sandbox del navegador (aquí no hay compilador de SFC), pero es exactamente de lo que defaultCode de abajo fue compilado a mano, sentencia por sentencia.
<script setup lang='ts'>
import { ref, computed } from 'vue';
const props = defineProps<{ name: string }>();
const emit = defineEmits<{ greeted: [count: number] }>();
const count = ref(0);
const shout = computed(() => props.name.toUpperCase() + '!');
function greet() {
count.value++;
emit('greeted', count.value);
}
// No return -- count, shout, and greet are top-level bindings,
// automatically exposed to the template below.
</script>
<template>
<div class='card'>
<h2>{{ shout }}</h2>
<p>Greeted {{ count }} times</p>
<button @click='greet'>Greet</button>
</div>
</template>
Los macros del compilador no necesitan import
Nota que el SFC nunca importa defineProps ni defineEmits de 'vue' — eso de hecho sería un error. Están disponibles globalmente SOLO dentro de <script setup> porque el compilador de Componentes de Archivo Único los trata como caso especial en tiempo de compilación y los elimina del JavaScript final, reemplazándolos con la maquinaria plana de props/emit que ves en defaultCode.
Mapea el azúcar al código real
Alinea el defineProps<{ name: string }>() del SFC con el props: { name: String } de defaultCode, y defineEmits<{ greeted: [count: number] }>() con emits: ['greeted']. Haz clic en Greet varias veces y confirma que el console log del padre recibe el conteo emitido.