Macros de Vue y propuestas de la comunidad
Biblioteca vue-macros, defineModel experimental, defineOptions y propuestas de setupSFC
Macros de Vue y propuestas de la comunidad es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Macros del compilador en script setup
En <script setup>, Vue ofrece macros del compilador: funciones como defineProps y defineEmits que se procesan en tiempo de compilación, no se importan en tiempo de ejecución. Vue 3.4 y versiones posteriores añadieron más macros, y el proyecto comunitario vue-macros experimenta con otras aún más avanzadas.
vue-macros: un espacio para la experimentación
vue-macros es una biblioteca comunitaria que ofrece macros experimentales antes que Vue (o que van más allá de las funciones del núcleo). Algunas ideas que tienen éxito terminan incorporándose al núcleo: defineModel comenzó aquí antes de convertirse en una función estable.
// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [VueMacros({ plugins: { vue: vue() } })]
})defineModel: la forma anterior
Antes de defineModel, implementar v-model en un componente implicaba declarar una prop modelValue y emitir manualmente update:modelValue, un proceso largo y propenso a errores.
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) {
emit('update:modelValue', e.target.value)
}
</script>defineModel: estable en Vue 3.4
defineModel se volvió estable en Vue 3.4. Devuelve un ref escribible que se conecta automáticamente a la prop y al evento de actualización. Al leerlo se obtiene el valor; al asignarle un valor se emite la actualización.
<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>
<template>
<input v-model="model" />
</template>defineModel con nombre y tipos
defineModel admite modelos con nombre (v-model:title) y opciones como required y un tipo, de forma similar a defineProps.
<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>Múltiples v-model de forma sencilla
Con los modelos con nombre, un componente puede exponer de forma clara varios enlaces bidireccionales, algo que antes requería numerosos pares de props/emits.
<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />
<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->defineOptions
defineOptions (estable desde Vue 3.3) permite establecer opciones del componente como name y inheritAttrs directamente dentro de <script setup>, sin necesidad de un segundo bloque <script>.
<script setup>
defineOptions({
name: 'UserCard',
inheritAttrs: false
})
</script>Por qué importan name e inheritAttrs
La opción name de un componente facilita el uso de las herramientas de desarrollo, la recursividad y las opciones include/exclude de <KeepAlive>. inheritAttrs: false detiene la propagación automática de atributos, para que pueda colocarlos en un elemento interno específico mediante v-bind="$attrs".
<script setup>
defineOptions({ inheritAttrs: false })
</script>
<template>
<div class="wrapper">
<input v-bind="$attrs" />
</div>
</template>Otras macros destacadas
Vue también ofrece defineExpose (controla a qué puede acceder un ref del componente padre), defineSlots (asigna tipos a los slots) y withDefaults (establece valores predeterminados para props basadas en tipos). Conocerlas completa el conjunto de herramientas de <script setup>.
<script setup lang="ts">
const props = withDefaults(
defineProps<{ size?: 'sm' | 'lg' }>(),
{ size: 'sm' }
)
defineExpose({ focus })
</script>Experimental frente a estable: elija con criterio
Las macros estables del núcleo (defineModel y defineOptions) son seguras para producción. Los experimentos de vue-macros resultan útiles para crear prototipos y adoptar funciones con antelación, pero sus API pueden cambiar; incorpórelos con cautela en aplicaciones que vaya a publicar.
Seguir las propuestas de la comunidad
Las nuevas ideas surgen como RFC y en vue-macros. Seguirlas le ayuda a anticipar hacia dónde se dirige el framework y le permite aportar comentarios antes de que las funciones se estabilicen.
Comprobación rápida
Compruebe su comprensión de las macros de Vue.
Resumen
Ha aprendido sobre las macros y las propuestas:
vue-macroscontiene macros experimentales; algunas pasan al núcleo- defineModel (estable desde la versión 3.4) simplifica el
v-modelde los componentes - Los modelos con nombre y tipados permiten varios enlaces bidireccionales claros
- defineOptions establece
name/inheritAttrsen<script setup> - Prefiera las macros estables en producción y trate los experimentos con cautela
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Macros de Vue y propuestas de la comunidad» es gratis?
Sí — el texto completo de «Macros de Vue y propuestas de la comunidad» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Macros de Vue y propuestas de la comunidad»?
Biblioteca vue-macros, defineModel experimental, defineOptions y propuestas de setupSFC Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Macros de Vue y propuestas de la comunidad»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Modo Vapor de Vue: optimización en tiempo de compilación
- Ecosistema de Vite: plugins y herramientas
- Macros de Vue y propuestas de la comunidad
- Cómo elegir el stack de Vue adecuado para 2025+