Actualización de Vue 3.4: una sintaxis v-bind más sencilla y mejor rendimiento

1. Introducción a Vue 3.4 «Slam Dunk»

A comienzos de 2024, el equipo de Vue publicó la versión 3.4, cuyo nombre en clave es «Slam Dunk». Aunque no es una versión tan revolucionaria como la 3.0, incorpora mejoras importantes en dos áreas clave: la optimización interna del rendimiento y la mejora de la experiencia de desarrollo.

Los cambios más destacados incluyen la reescritura del sistema reactivo, la estabilización de la API defineModel y una sintaxis de v-bind más concisa.

2. Reescritura del sistema reactivo

Vue 3.4 incluye una importante reescritura de su sistema reactivo central. El objetivo principal de este trabajo es mejorar la eficiencia de las propiedades calculadas con computed.

En versiones anteriores, una propiedad calculada podía volver a evaluarse innecesariamente aunque sus dependencias no hubieran cambiado realmente. Gracias a un seguimiento de dependencias más inteligente, la nueva versión garantiza que el cálculo solo se active cuando sea verdaderamente necesario, reduciendo los rerenderizados innecesarios de componentes.

Para la mayoría de quienes desarrollan, esto es una «comida gratis»: no hay que modificar el código y basta con actualizar a la versión 3.4 para obtener automáticamente la mejora de rendimiento.

3. defineModel: enlace bidireccional elegante para componentes

Antes de la versión 3.4, implementar en un componente un enlace bidireccional similar a v-model exigía bastante código repetitivo:

Antes 👎:

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

// 通常需要一个计算属性来包装
const value = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})
</script>

<template>
  <input v-model="value" />
</template>

Vue 3.4 lleva la API defineModel de la fase experimental a una versión estable. Ahora, el mismo comportamiento solo requiere una línea de código:

Ahora (Vue 3.4) 👍:

<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

La macro defineModel registra automáticamente la prop modelValue y el evento update:modelValue, y devuelve un ref que se puede leer y escribir directamente. Esto simplifica enormemente el desarrollo de componentes compatibles con v-model.

4. Forma abreviada de v-bind para nombres iguales

Otra mejora sintáctica de la experiencia de desarrollo es la forma abreviada de v-bind cuando los nombres coinciden. Si la prop que se pasa a un componente tiene el mismo nombre que una variable definida en <script setup>, ahora se puede omitir el valor del atributo.

Antes 👎:

<script setup>
const id = 'my-id'
const title = 'Hello Vue'
</script>

<template>
  <MyComponent :id="id" :title="title" />
</template>

Ahora (Vue 3.4) 👍:

<script setup>
const id = 'my-id'
const title = 'Hello Vue'
</script>

<template>
  <MyComponent :id :title />
</template>

Este pequeño cambio hace que el código de las plantillas sea más limpio y fácil de leer.

Conclusión

Vue 3.4 es una iteración sólida. Mediante optimizaciones de rendimiento en las capas internas y la simplificación de las API de alto nivel, refuerza la filosofía de Vue como framework «progresivo»: ofrece sólidas garantías de rendimiento para aplicaciones grandes y, al mismo tiempo, ventajas prácticas para el trabajo diario. Destaca especialmente la estabilización de defineModel, que resuelve un problema persistente al encapsular componentes y es el aspecto más elogiable de esta actualización.