1.1 Características principales de Vue.js

Vue incorpora diferentes características que facilitan el desarrollo de aplicaciones web.

• Componentes: Un componente representa una parte de la interfaz y puede reutilizarse en diferentes lugares de la aplicación. Una cabecera, menú de navegación, un formulario, lista de productos…
• Reactividad: La reactividad permite que la interfaz se actualice automáticamente cuando cambian los datos de los que depende. Esta característica es fundamental en las aplicaciones web modernas, donde la información de la pantalla cambia constantemente sin necesidad de recargar toda la página.
• Data Binding: Vue facilita la conexión entre los datos de la aplicación y los elementos HTML. Esta conexión permite mostrar datos en la interfaz, modificar atributos HTML dinámicamente, cambiar clases CSS, …
• Directivas: Vue proporciona directivas que permiten controlar el comportamiento de los elementos HTML. Por ejemplo v-if, v-for, v-bind, …
• Composition API: Vue 3 introduce y potencia la Composition API, que permite organizar la lógica de los componentes de una forma más flexible.
• <script setup>: Introducido en Vue 3, simplifica considerablemente la escritura de componentes. Con ella podemos utilizar directamente las funcionalidades de la Composition API sin necesidad de una estructura adicional.
• Integración progresiva: Una de las características históricas de Vue es que puede incorporarse progresivamente a un proyecto. No es necesario convertir una aplicación completa a Vue desde el principio. Puede utilizarse para controlar inicialmente una pequeña parte de una página y posteriormente aumentar su presencia.
• Ecosistema: Vue no se limita al núcleo del framework. Existe un ecosistema de herramientas que permite construir aplicaciones completas. Entre las herramientas más importantes se encuentran:
  • Vite para la creación y compilación de proyectos.
  • Vue Router para gestionar la navegación.
  • Pinia para gestionar el estado compartido.
  • Vue DevTools para depurar aplicaciones.
  • Vitest para realizar pruebas.

Estas herramientas se estudiarán a lo largo del libro.

1.2 Arquitectura de una aplicación Vue

Una aplicación Vue está formada normalmente por diferentes componentes que se organizan formando un árbol de componentes. Por ejemplo:

• Cabecera con logotipo, barra de búsqueda y botón de login
• Menú de navegación
• Lista de productos
• Tarjeta de producto
• Pie de página

Cada uno de estos elementos puede convertirse en un componente Vue y de esta manera permite separar responsabilidades. “ProductList.vue” puede encargarse de mostrar una lista de productos, mientras que “ProductCard.vue” puede encargarse de representar individualmente cada producto. De esta forma, si posteriormente necesitamos modificar cómo se representa un producto, podemos hacerlo en “ProductCard.vue” sin tener que modificar toda la aplicación.

1.3 Reactividad y componentes

La combinación de componentes y reactividad es uno de los conceptos fundamentales de Vue. En una aplicación tradicional podemos modificar directamente el DOM utilizando las API proporcionadas por JavaScript, pudiendo seleccionar un elemento y modificar su contenido.

En Vue, en cambio, normalmente trabajaremos con un estado de la aplicación y declararemos cómo debe representarse ese estado en la interfaz. Podemos pensar en el funcionamiento de la siguiente forma:

Esto permite que el programador se preocupe principalmente de qué debe mostrar la interfaz en función de los datos, en lugar de tener que indicar manualmente cada modificación del DOM. Esta forma de trabajar se conoce habitualmente como renderizado declarativo.

3.1 Vue frente a JavaScript sin framework

JavaScript permite crear interfaces web directamente utilizando las API del navegador. Por ejemplo, podemos seleccionar elementos del DOM, modificar su contenido, añadir eventos y crear nuevos elementos.

Cuando una aplicación es pequeña, este enfoque puede ser suficiente. Sin embargo, a medida que aumenta la complejidad aparecen problemas relacionados con:

• Organización del código.
• Actualización manual del DOM.
• Reutilización de componentes.
• Gestión del estado.
• Comunicación entre diferentes partes de la aplicación.
• Mantenimiento del código.

Para una aplicación compleja con muchos componentes, datos dinámicos y diferentes vistas, un framework como Vue puede facilitar considerablemente el desarrollo y mantenimiento.

3.2 Vue y TypeScript

TypeScript (TS) es un lenguaje de código abierto desarrollado por Microsoft que se basa en JavaScript (realmente es un superconjunto de este), añadiendo tipado estático y características propias de lenguajes orientados a objetos como clases, interfaces o módulos.

El código que generamos se transpila a JavaScript (el código fuente se convierte a código JavaScript), por lo que puede ejecutarse en cualquier navegador o entorno que soporte JS.

Vue está creado con TypeScript y por tanto también podemos desarrollar aplicaciones Vue con TypeScript, de esta manera ganamos la detección de errores en tiempo de desarrollo.

Preparación del entorno

5.1 Instalación

En la página web de descarga de Node.js podemos ver cómo instalar Node para distintas plataformas, de distintas formas, y podemos elegir distintas versiones y con distintos gestores de paquetes.

Es importante destacar que Node cuenta con tres tipos de versiones:

• current: es la versión más nueva actualmente.
• LTS: versión long time support o soporte a largo plazo.
• EOL: son las versiones end of life, cuya vida a finalizado y debería ser necesario actualizar de versión.

Uno de los métodos de instalación de Node más habituales es mediante nvm o Node Version Manager, ya que permite tener distintas versiones instaladas en el mismo equipo.

En cambio, para este libro se ha decidido hacer uso de mise, que está explicado en el anexo adjunto.

6.1 Servidor de desarrollo

Durante el desarrollo gracias a Vite podemos ejecutar un servidor local. Habitualmente accederemos al servidor a través de la dirección local http://localhost:5173/

El número de puerto puede variar dependiendo de la configuración y de si el puerto está disponible. Este servidor permite abrir nuestra aplicación en el navegador mientras estamos desarrollándola.

Cuando modificamos el código, Vite puede detectar los cambios y actualizar rápidamente la aplicación que estamos visualizando.

6.2 Desarrollo frente a producción

Debemos distinguir entre el entorno de desarrollo y el resultado final que desplegaremos.

• Durante el desarrollo: Generamos el código fuente, Vite hace de servidor de desarrollo y lo vemos a través de nuestro navegador.
• Para producción: Generamos el código fuente, usamos Vite para generar archivos optimizados (unifica ficheros CSS, JS, minimiza…), debemos subir el código generado a un servidor web (Apache, Neginx, …) y lo visualizamos a través del navegador.

La aplicación que finalmente recibe el usuario no necesita el servidor de desarrollo de Vite.

7.1 Instalar dependencias

Tal como se ha dicho previamente, gracias a Node.js vamos a poder desarrollar y mediante npm controlar las distintas dependencias de nuestro proyecto, ya que es un gestor de paquetes.

Tras crear el proyecto en el paso anterior, se nos ha generado distintos ficheros, entre los que se encuentra package.json que contiene las dependencias que necesita nuestro proyecto.

Para que podamos desarrollar en nuestro proyecto, y posteriormente ponerlo en producción, necesitamos instalar las dependencias que aparecen en el fichero. Para ello debemos entrar al directorio de nuestro proyecto e instalar las dependencias:

ruben@archy:~$ cd vue-project
ruben@archy:~/vue-project/ $ npm install

npm leerá la información de package.json e instalará las dependencias que ahí aparecen y la versión correspondiente. Estas dependencias se instalan dentro del directorio node_modules en nuestro proyecto. Este directorio puede ocupar bastante espacio y contiene código que normalmente no debemos modificar directamente.

7.2 Estructura del proyecto

Una vez creado el proyecto e instalado las dependencias encontraremos diferentes archivos y directorios. No todos los proyectos tendrán exactamente la misma estructura, ya que podemos modificarla según nuestras necesidades, pero en todos ellos nos encontraremos con lo siguiente:

• index.html: Aunque Vue permite construir la interfaz mediante componentes, sigue existiendo un documento HTML inicial. La parte importante de este documento será similar al siguiente, que es donde se monta la aplicación:

  Elemento de montaje

  <div id="app"></div>
  

• node_modules: directorio donde se guardan las dependencias instaladas. Este directorio puede ocupar bastante espacio y contiene código que normalmente no debemos modificar directamente.

• package-lock.json: tras realizar la instalación de dependencias este fichero registra las versiones concretas de las dependencias instaladas y de sus dependencias internas. Su objetivo principal es conseguir que diferentes instalaciones del mismo proyecto utilicen versiones compatibles y reproducibles de los paquetes.

• public: puede utilizarse para almacenar recursos estáticos que deban estar disponibles directamente. Estos recursos no tienen por qué pasar por el mismo proceso que los recursos gestionados dentro de src.

• src: este directorio contiene el código fuente de nuestra aplicación, lo que lo hace el directorio más importante del proyecto. En él encontraremos los componentes Vue, los archivos JavaScript, las hojas de estilo y otros recursos utilizados por nuestra aplicación.

  • App.vue: suele actuar como componente principal de la aplicación. Más adelante veremos que App.vue no tiene por qué contener toda la aplicación. Su función será normalmente coordinar otros componentes.

  • assets: se utiliza habitualmente para recursos que forman parte del código de la aplicación como imágenes, hojas de estilo generales u otros recursos estáticos. A diferencia de [public]{configdir}, estos recursos pueden ser procesados por las herramientas de construcción.

  • components: se utiliza normalmente para almacenar componentes Vue reutilizables. No es obligatorio utilizar exactamente esta estructura, pero es una organización habitual. Podemos organizar también en subcarpetas si son componentes para formularios, productos, tablas, …

  • views: una aplicación web puede tener distintas “vistas” (login, vista de productos, configuración, …) que pueden contener distintos componentes.

  • main.js: es el punto de entrada habitual de una aplicación Vue. Es el archivo desde el que se crea la aplicación y se monta en el documento HTML. Primero importa el CSS, después createApp desde Vue, y por último el componente raíz App.vue. El último paso es crear la aplicación y la monta sobre el elemento HTML cuyo identificador es app.

    Fichero main.js

    import './assets/main.css'
    
    import { createApp } from 'vue'
    import App from './App.vue'
    
    createApp(App).mount('#app')
    

    Este código realiza varias operaciones:

    • Importa el código CSS global.
    • importa createApp desde Vue.

7.3 Servidor de desarrollo

Una vez creado el proyecto podemos iniciar el servidor mediante:

ruben@archy:~$ npm run dev
  VITE v8.3.0  ready in 303 ms
  ⇒  Local:   http://localhost:5173/
  ⇒  Network: use --host to expose
  ⇒  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ⇒  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ⇒  press h + enter to show help

Este comando ejecuta uno de los scripts definidos en package.json. En el proyecto que acabamos crear, debido a las opciones seleccionadas, tenemos las siguientes opciones:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "run-s \"lint:*\"",
    "lint:oxlint": "oxlint . --fix",
    "lint:eslint": "eslint . --fix --cache",
    "format": "prettier --write --experimental-cli src/"
  },

Al ejecutar npm run dev podemos ver que el comando que ejecuta por debajo es vite, y viendo la salida del comando nos indica que que tenemos dos URLs a las que poder acceder:

• http://localhost:5173/: es la dirección localhost y el puerto por defecto donde vamos a poder ver nuestra aplicación.
• http://localhost:5173/devtools/: si abrimos esta URL en una nueva ventana podemos acceder a las herramientas de desarrollo.

Gracias a vite como servidor de desarrollo, mientras esté funcionando, podremos modificar nuestros archivos y comprobar los cambios desde el navegador.

Esto permite desarrollar de forma mucho más rápida que teniendo que detener y volver a iniciar manualmente todo el proceso después de cada modificación.

Es importante entender que el servidor lo estamos ejecutando “a mano”, no es un servicio de nuestro sistema operativo, por lo que si reiniciamos (o incluso cerramos sesión), tendremos que volver a arrancar el servicio.

7.4 Vue DevTools

Además de las herramientas generales del navegador, Vue dispone de una herramienta específica denominada Vue DevTools, que permite inspeccionar aplicaciones Vue y proporciona información específica sobre sus componentes y estado reactivo. Entre otras posibilidades, permite:

• Examinar el árbol de componentes.
• Seleccionar componentes.
• Inspeccionar sus datos.
• Analizar props.
• Analizar eventos.
• Inspeccionar el estado.
• Facilitar la depuración.

La herramienta resulta especialmente útil cuando las aplicaciones comienzan a tener muchos componentes.

7.5 Desarrollo con Visual Studio Code

Al crear el proyecto el asistente automático ha creado un directorio .vscode que es el utilizado para añadir configuración propia para el IDE Visual Studio Code.

Este directorio no es obligatorio, y se podría llegar a borrar, pero nos añade información si usamos este editor. En el directorio nos encontramos con dos ficheros:

• extensions.json: configuración de extensiones recomendadas. Al abrir por primera vez el proyecto, si no tenemos las extensiones instaladas el editor nos preguntará si queremos instalarlas.
• settings.json: Son configuraciones propias del editor para los proyectos. Por ejemplo, mezcla varios ficheros de configuración en la jerarquía como si package.json fuese un directorio.

Componentes Vue

8.1 Ventajas de utilizar componentes

La utilización de componentes proporciona varias ventajas, entre las que podemos destacar:

• Reutilización: Un mismo componente puede utilizarse varias veces. Por ejemplo, si tenemos un componente ProductCard.vue, podemos utilizarlo para representar todos los productos de una tienda. Por lo tanto, cada vez que se visualiza un producto, se llamará a ese componente.
• Mantenimiento: Si toda la lógica relacionada con una parte de la interfaz está concentrada en un componente, modificarla resulta más sencillo. Por ejemplo, si queremos cambiar el aspecto de todas las tarjetas de producto, sólo necesitamos modificar el ProductCard.vue y se reflejará en todo.
• Organización: Los componentes permiten dividir una aplicación compleja en unidades más pequeñas. Esto facilita que diferentes desarrolladores puedan trabajar en distintas partes de una aplicación.
• Encapsulación: Un componente puede contener su propia estructura HTML, lógica JavaScript y estilos CSS. De esta forma, podemos mantener agrupado el código relacionado con una determinada funcionalidad.

8.2 Responsabilidad al crear componentes

Una buena aplicación no debería convertir cada pequeño elemento HTML en un componente sin una razón clara, ni tampoco tener componentes de cientos de líneas. Es por eso que a la hora de hacer una aplicación debemos realizar un análisis para dividir la aplicación en unidades con sentido.

10.1 <template>

En su interior utilizaremos HTML junto con la sintaxis de plantillas proporcionada por Vue. Aparte de poder utilizar cualquier etiqueta o elemento HTML, Vue nos proporciona mecanismos que permiten relacionar este HTML con datos y lógica JavaScript.

<template>
  <h1>Hola {{nombre}}</h1>
  <p>Texto de la página.</p>
</template>

En este ejemplo {{nombre}} es una variable que debe ser definida dentro del bloque <script setup>. Esta técnica se denomina interpolación y se estudiará más adelante.

En versiones anteriores de Vue dentro de <template> sólo permitía tener un único elemento raíz.

10.2 <script setup>

Dentro de este bloque se escribe la lógica del componente usando JavaScript. La palabra setup hace referencia a la Composition API de Vue, que aparece en Vue 3.0 en 2020.

<script setup>
const nombre = 'Bob'

function saludar() {
  console.log(`Hola ${nombre}`)
}
</script>

<template>
  <h1>Hola {{ nombre }}</h1>

  <button @click="saludar">
    Saludar
  </button>
</template>

Las variables y funciones declaradas en <script setup> están disponibles automáticamente dentro del <template>. No es necesario hacer nada para registrar nombre y saludar, ya que Vue se encarga de hacerlos disponibles dentro de la plantilla.

10.3 <style>

Este bloque contiene los estilos CSS del componente, pero hay que entender que por defecto, los estilos definidos en un componente pueden tener un ámbito que no se limita necesariamente al componente.

<template>
  <h1>Hola mundo</h1>
</template>

<style>
h1 {
    color:red;
}
</style>

<template>
  <h1>Hola mundo</h1>
</template>

<style scoped>
h1 {
    color:red;
}
</style>

11.1 Reutilización de componentes

Una de las principales ventajas de los componentes es que podemos utilizar el mismo componente varias veces. Imaginemos que tenemos un componente para visualizar productos de una tienda, podemos reutilizarlo varias veces:

<template>
  <ProductCard nombre="Teclado" />
  <ProductCard nombre="Ratón" />
  <ProductCard nombre="Monitor" />
</template>

Aunque todavía no hemos visto cómo pasar parámetros a los componentes, en el ejemplo anterior se usan los conocidos como props para proporcionar diferentes datos a cada instancia.

Esta separación entre el componente y los datos que recibe será fundamental para desarrollar interfaces reutilizables.

11.2 Crear componente

Vamos a crear un componente en nuestro proyecto vacío. Aunque podemos crear el componente directamente en el directorio src, tal como se ha dicho previamente vamos a organizarlos en la carpeta src/components:

El archivo src/components/CabeceraH1.vue tendrá:

<template>
  <h1>Bienvenido a Vue 3</h1>
</template>

Ahora podemos utilizarlo en el componente raíz App.vue.

<script setup>
import CabeceraH1 from './components/CabeceraH1.vue';
</script>

<template>
  <h1>Mi aplicación</h1>
  <Saludo />
</template>

11.3 Componente con estructura, lógica y estilos

Vamos a crear un componente que utilice las tres partes principales de un Single File Component.

<script setup>
const titulo = 'Clicka'

function saluda() {
  console.log('Hola!')
}
</script>

<style scoped>
.tarjeta {
  padding: 1rem;
  border: 1px solid #ccc;
}
button {
  padding: 0.5rem 1rem;
}
</style>

<template>
<article class="tarjeta">
  <h2>{{ titulo }}</h2>

  <button @click="saluda">
    Mostrar mensaje
  </button>
</article>
</template>

Este ejemplo reúne varios conceptos:

• Variables JavaScript en <script setup>.
• Funciones JavaScript.
• HTML en <template>.
• Interpolación.
• Eventos.
• CSS en <style>.
• Estilos encapsulados mediante scoped.

Más adelante profundizaremos en cada apartado, pero de momento sirve como ejemplo completo.

12.1 Interpolación de expresiones

La forma más sencilla de mostrar datos dinámicos en una plantilla es mediante la interpolación. La interpolación utiliza una pareja de llaves dobles {{ expresión }}. Por ejemplo:

<script setup>
const nombre = 'Bob'
const edad = 20
</script>

<template>
  <h1>{{ nombre }}</h1>
  <p>{{ edad }}</p>
</template>

<script setup>
const nombre = 'Ane'
const edad = 20
</script>

<template>
  <p>{{ 10 + 5 }}</p>
  <p>{{ nombre.toUpperCase() }}</p>
  <p>{{ edad >= 18 ? 'Mayor' : 'Menor' }}</p>
</template>

<p>{{ nombre }}</p>
<p>{{ edad + 1 }}</p>
<p>{{ nombre.toUpperCase() }}</p>
<p>{{ usuario.nombre }}</p>
<p>{{ productos.length }}</p>

{{ if (edad >= 18) { ... } }}

12.2 Enlace de atributos con v-bind

La interpolación permite introducir datos dentro del contenido de un elemento, pero no permite utilizar directamente {{ }} para establecer atributos HTML. Para enlazar un atributo HTML con un valor JavaScript utilizamos la directiva v-bind. Por ejemplo, para establecer dinámicamente los atributos src y alt hacemos lo siguiente:

<script setup>
const imagen = '/imagenes/vue.png'
const descripcion = 'Logotipo de Vue.js'
</script>
<template>
  <img v-bind:src="imagen" v-bind:alt="descripcion">
</template>

Dado que v-bind se utiliza con mucha frecuencia, Vue proporciona una sintaxis abreviada utilizando únicamente :. Las siguientes dos etiquetas son equivalentes:

<img v-bind:src="imagen">
<img :src="imagen">

La segunda forma es la más habitual en aplicaciones Vue. También podemos utilizarla con otros atributos:

<a :href="url">Visitar página</a>
<input :value="nombre">
<button :disabled="deshabilitado">
  Guardar
</button>

<script setup>
const formularioBloqueado = true
</script>
<template>
  <button :disabled="formularioBloqueado">
    Enviar
  </button>
</template>

<script setup>
  const claseMensaje = 'importante'
</script>
<template>
  <p :class="claseMensaje">
    Mensaje importante
  </p>
</template>
<style>
.importante {
  font-weight: bold;
}
</style>

<template>
  <p :class="{ activo: estaActivo, error: hayError }">
    Estado del usuario
  </p>
</template>

12.3 Renderizado condicional con v-if

Una aplicación frecuentemente necesita mostrar unos elementos u otros dependiendo de determinadas condiciones. Vue proporciona la directiva v-if para realizar un renderizado condicional.

<script setup>
const estaConectado = true
</script>

<template>
  <p v-if="estaConectado">
    Usuario conectado
  </p>
</template>

Cuando estaConectado sea true, Vue mostrará el elemento. En cambio, si es false el elemento no se renderizará. Por tanto, v-if no se limita a ocultar visualmente el elemento. Vue decide si el elemento debe formar parte del DOM renderizado.

<template>
  <p v-if="edad >= 18">
    Puedes acceder.
  </p>
</template>

<template>
  <p v-if="estaConectado && tienePermisos">
    Panel de administración
  </p>
</template>

<template>
  <p v-if="estaConectado">
    Bienvenido.
  </p>
  <p v-else>
    Debes iniciar sesión.
  </p>
</template>

<template>
  <p v-if="nota >= 9">
    Sobresaliente
  </p>
  <p v-else-if="nota >= 7">
    Notable
  </p>
  <p v-else-if="nota >= 5">
    Aprobado
  </p>
  <p v-else>
    Suspenso
  </p>
</template>

12.4 Renderizado con v-show

Otra directiva relacionada con la visibilidad es v-show. A diferencia de v-if, v-show no elimina el elemento del DOM.

<p v-show="mostrarMensaje">
  Este mensaje puede ocultarse.
</p>

Cuando la condición es falsa, Vue modifica el CSS del elemento para ocultarlo mediante display: none.

12.5 Renderizado de listas con v-for

Una de las operaciones más habituales en una aplicación web es mostrar una lista de elementos. Vue proporciona la directiva v-for para ello, similar a cómo funciona un bucle for.

<script setup>
const nombres = ['Alice', 'Bob', 'Carol', 'David']
</script>
<template>
  <ul>
    <li v-for="nombre in nombres">
      {{ nombre }}
    </li>
  </ul>
</template>

Vue generará un elemento <li> para cada elemento del array, por lo que generará una lista HTML. También podemos utilizar of:

<li v-for="nombre of nombres">
  {{ nombre }}
</li>

<li v-for="(nombre, indice) in nombres">
  {{ indice }} - {{ nombre }}
</li>

0 - Alice
1 - Bob
2 - Carol
3 - David

12.6 key en las listas

Cuando utilizamos v-for, normalmente debemos proporcionar una propiedad key que identifique de forma única cada elemento.

<script setup>
const usuarios = [
  { id: 1, nombre: 'Ane' },
  { id: 2, nombre: 'Mikel' },
  { id: 3, nombre: 'Jon' }
]
</script>
<template>
  <ul>
    <li v-for="usuario in usuarios" :key="usuario.id">
      {{ usuario.nombre }}
    </li>
  </ul>
</template>

La propiedad key ayuda a Vue a identificar cada elemento de la lista cuando esta cambia. Esto permite que Vue pueda actualizar el DOM de una forma más eficiente y predecible.

Tampoco se debe usar el índice como key cuando la lista puede cambiar de orden, insertar elementos o eliminar elementos. Aunque técnicamente puede funcionar, puede provocar comportamientos inesperados cuando la lista cambia. Por ello, siempre que sea posible, utilizaremos un identificador único y estable.

Reactividad y eventos con Vue

14.1 ref()

Vue tiene la función ref() que es una de las herramientas más importantes de la Composition API. Permite crear una referencia reactiva de la siguiente manera:

<script setup>
const variable = ref(valorInicial)
</script>

<script setup>
import { ref } from 'vue'

const contador = ref(0)
</script>

En el ejemplo contador contiene un valor reactivo, lo que permite acceder o modificar su valor desde JavaScript utilizamos la propiedad .value, pero para la plantilla no lo tenemos que escribir.

<script setup>
console.log(contador.value)
contador.value++
contador.value = 10
</script>

<template>
  <p>{{ contador }}</p>
</template>

14.2 reactive()

Otra herramienta de Vue para crear datos reactivos es reactive(), que está pensado principalmente para trabajar directamente con objetos y arrays, mientras que ref() es más para variables “simples”.

<script setup>
import { reactive } from 'vue'

const usuario = reactive({
  nombre: 'Alice',
  edad: 20
})

usuario.nombre = 'Bob'
usuario.edad = 21
</script>

<template>
  <p>{{ usuario.nombre }}</p>
  <p>{{ usuario.edad }}</p>
</template>

Tal como se puede ver, se ha creado un objeto, que es reactive, se le han modificado los atributos y luego en la vista se accede a los atributos, sin tener que usar .value. Los atributos se pueden modificar dinámicamente desde el interfaz.

14.3 Valores computados con computed()

En muchas aplicaciones necesitamos obtener un valor a partir de otros datos, como puede ser la suma de datos, o la concatenación de textos. Para cuando el cálculo es complejo, o se utiliza en varios lugares, Vue proporciona computed().

<script setup>
import { ref, computed } from 'vue'

const nombre = ref('Alice')
const apellidos = ref('Doe')

const nombreCompleto = computed(() => {
  return `${nombre.value} ${apellidos.value}`
})
</script>

<template>
  <p>{{ nombreCompleto }}</p>
</template>

Una propiedad computada es un valor que Vue calcula a partir de otros valores reactivos. Otro posible ejemplo:

<script setup>
import { ref, computed } from 'vue'

const precio = ref(25)
const cantidad = ref(3)

const total = computed(() => {
  return precio.value * cantidad.value
})
</script>

<template>
  <p>Precio: {{ precio }} €</p>
  <p>Cantidad: {{ cantidad }}</p>
  <p>Total: {{ total }} €</p>
</template>

En este ejemplo, típico de un carrito de la compra, si cantidad cambia, el valor computado de total también cambiará.

Podemos conseguir un resultado parecido utilizando una función pero la diferencia fundamental es que una propiedad computada almacena en caché su resultado mientras sus dependencias no cambien.

14.4 Reaccionando con watch()

watch() permite ejecutar código cuando cambia un dato reactivo concreto. Gracias a watch podemos obtener el valor antes del cambio y el valor cuando ha cambiado:

<script setup>
import { ref, watch } from 'vue'

const contador = ref(0)

watch(contador, (nuevoValor, valorAnterior) => {
  console.log('El contador ha cambiado')
  console.log('Anterior:', valorAnterior)
  console.log('Nuevo:', nuevoValor)
})
</script>

En cuanto contador se modifique, Vue ejecutará la función proporcionada a watch(), y tal como se puede ver, el callback recibe dos valores:

• nuevoValor: valor después del cambio.
• valorAnterior: valor anterior al cambio.

watch() es especialmente útil cuando el cambio de un dato debe provocar una acción secundaria. Por ejemplo:

• Realizar una petición a una API;
• Guardar información;
• Ejecutar una operación costosa;
• Reaccionar ante un cambio determinado;
• Sincronizar información con otro sistema.

14.5 watchEffect()

watchEffect() también permite ejecutar código reactivo, pero funciona de una forma diferente.

<script setup>
import { ref, watchEffect } from 'vue'

const nombre = ref('Alice')

watchEffect(() => {
  console.log(`El nombre es ${nombre.value}`)
})
</script>

Vue ejecuta inmediatamente la función y detecta automáticamente qué valores reactivos se utilizan dentro de ella. Si nombre cambia, la función volverá a ejecutarse.

La diferencia principal es que en watch() debemos indicar explícitamente qué queremos observar, mientras que con watchEffect() Vue detecta automáticamente las dependencias.

15.1 Manejo de eventos

En JavaScript podemos escuchar eventos utilizando addEventListener(), mientras que Vue proporciona una forma mucho más integrada con sus plantillas, por ejemplo con la directiva v-on

const boton = document.querySelector('#boton')

boton.addEventListener('click', () => {
  console.log('Botón pulsado')
})

<script setup>
function saludar() {
  console.log('Botón pulsado')
}
</script>
<button v-on:click="saludar">
  Saludar
</button>

Cuando el usuario pulsa el botón, Vue ejecuta la función saludar(). De esta forma, el evento y la lógica del componente quedan relacionados directamente en la plantilla.

15.2 v-on y la sintaxis @

La sintaxis completa para escuchar un evento se ha visto previamente, pero v-on tiene una abreviatura mucho más utilizada usando @ y el evento que queremos usar. Por lo tanto, los siguientes códigos son equivalentes:

<button v-on:click="saludar">
  Saludar
</button>

<button @click="saludar">
  Saludar
</button>

Otros ejemplos:

<template>
<button @click="guardar">Guardar</button>

<input @input="actualizar">

<form @submit="enviarFormulario">
  ...
</form>

<div @mouseover="mostrarInformacion">
  ...
</div>
</template>

15.3 Parámetros en los eventos

Los event handlers de eventos pueden recibir parámetros. A continuación dos ejemplos con distintos números de parámetros:

<script setup>
function saludar(nombre) {
  console.log(`Hola, ${nombre}`)
}
</script>
<template>
  <button @click="saludar('Bob')">
    Saludar
  </button>
</template>

<script setup>
function mostrarUsuario(id, nombre) {
  console.log(id)
  console.log(nombre)
}
</script>
<template>
  <button @click="mostrarUsuario(10, 'Bob')">
    Usuario
  </button>
</template>

Esto resulta especialmente útil cuando trabajamos con listas. Por ejemplo:

<template>
  <button
    v-for="usuario in usuarios"
    :key="usuario.id"
    @click="seleccionarUsuario(usuario.id)"
  >
    {{ usuario.nombre }}
  </button>
</template>

15.4 El objeto Event

Los eventos del navegador proporcionan información adicional mediante el objeto Event.

<script setup>
function mostrarEvento(evento) {
  console.log(evento)
  console.log(evento.target)
}
</script>
<template>
  <button @click="mostrarEvento">
    Pulsar
  </button>
</template>

El objeto recibido contiene información sobre el evento que se ha producido. Por ejemplo, event.target representa el elemento que originó el evento.

<script setup>
function mostrarValor(evento) {
  console.log(evento.target.value)
}
</script>
<template>
  <input @input="mostrarValor">
</template>

<script setup>
function mostrarUsuario(id, evento) {
  console.log(id)
  console.log(evento)
}
</script>
<template>
  <button @click="mostrarUsuario(10, $event)">
    Usuario
  </button>
</template>

15.5 Modificadores de eventos

Vue proporciona modificadores de eventos para realizar operaciones habituales sin tener que escribirlas manualmente dentro de las funciones. Los modificadores se añaden después del nombre del evento utilizando un punto.

<script setup>
function enviarFormulario() {
  console.log('Formulario enviado')
}
</script>
<template>
  <form @submit.prevent="enviarFormulario">
    <input type="text">
    <button type="submit">
      Enviar
    </button>
  </form>
</template>

<template>
  <button @click.stop="accion">
    Pulsar
  </button>
</template>

<template>
  <button @click.once="mostrarMensaje">
    Mostrar
  </button>
</template>

<template>
  <div @click.self="cerrar">
    ...
  </div>
</template>

<template>
  <div @click.capture="procesar">
    ...
  </div>
</template>

15.6 Eventos de teclado

Podemos reaccionar a teclas concretas, lo que permite implementar interacciones de teclado sin tener que comprobar manualmente las propiedades del objeto KeyboardEvent.

• keydown: al pulsar una tecla.
• keyup: al dejar de pulsar una tecla.

Un ejemplo en el que obtenemos la tecla pulsada, donde hemos puesto una condición:

<script setup>
function teclaPulsada(evento) {
  if (evento.key === 'Enter') {
    console.log('Se ha pulsado Enter')
  } else {
    console.log(evento.key)
  }
}
</script>
<template>
  <input @keydown="teclaPulsada">
</template>

Para situaciones sencillas, se puede tener en cuenta si se ha pulsado una tecla concreta. A continuación varios ejemplos para distintas teclas:

<template>
  <input @keyup.enter="enviar">
  <input @keyup.esc="cancelar">
  <input @keyup.tab="siguiente">
  <input @keyup.delete="borrar">
  <input @keyup.space="accionSpace">

  <button @click.ctrl="accionCtrl">Ctrl + clic</button>
  <button @click.shift="accionShift">Shift + clic</button>
  <button @click.alt="accionAlt">Alt + clic</button>
  <button @click.meta="accionMeta">Meta + clic</button>
</template>

16.1 v-model

v-model permite crear un enlace bidireccional entre un elemento de formulario y un dato reactivo. Por ejemplo:

<script setup>
import { ref } from 'vue'

const nombre = ref('')
</script>
<template>
  <input v-model="nombre">

  <p>Hola, {{ nombre }}</p>
</template>

Cuando el usuario escribe en el campo, nombre la variable se actualizará, y a su vez se visualizará también en la plantilla.

<template>
  <textarea v-model="descripcion"></textarea>

  <select v-model="pais">
    <option value="es">España</option>
    <option value="fr">Francia</option>
    <option value="pt">Portugal</option>
  </select>

  <input type="checkbox" v-model="aceptaCondiciones">

  <input type="radio" value="basico" v-model="nivel">
  <input type="radio" value="avanzado" v-model="nivel">
</template>

16.2 Modificadores de v-model

Vue proporciona varios modificadores para v-model.

<template>
  <input v-model.trim="nombre">
</template>

<template>
  <input v-model.number="edad">
</template>

<template>
  <input v-model.lazy="nombre">
</template>

<template>
  <input v-model.trim.number="valor">
</template>

16.3 Validación de formularios

Los formularios deben validar la información introducida antes de enviarla o procesarla. Podemos utilizar las capacidades de validación de HTML y también realizar validaciones mediante JavaScript.

<script setup>
import { ref } from 'vue'

const nombre = ref('')
const errorNombre = ref(false)

function enviar() {
  errorNombre.value = nombre.value === ''

  if (errorNombre.value) {
    return
  }

  console.log('Formulario correcto')
}
</script>
<template>
  <form @submit.prevent="enviar">
    <label>
      Nombre:
      <input v-model.trim="nombre">
    </label>

    <span v-if="errorNombre">
      El nombre es obligatorio.
    </span>

    <button type="submit">
      Enviar
    </button>
  </form>
</template>

En aplicaciones reales podemos realizar validaciones mucho más completas, para por ejemplo:

• campos obligatorios;
• longitud mínima y máxima;
• formato de correo electrónico;
• valores numéricos;
• rangos;
• coincidencia entre campos;
• validaciones dependientes de otros campos;
• validaciones contra una API.

16.4 Separar los errores de la interfaz

Es conveniente almacenar el estado de validación en datos reactivos.

<script setup>
const errores = ref({
  nombre: '',
  email: ''
})
</script>
<template>
  <input v-model="nombre">

  <span v-if="errores.nombre">
    {{ errores.nombre }}
  </span>
</template>

La plantilla puede mostrar los mensajes de error correspondientes, lo que permite que los mensajes de error formen parte del estado de la aplicación y que Vue actualice automáticamente la interfaz.

Comunicación entre componentes

18.1 Props dinámicas

Las props no tienen por qué contener valores escritos directamente, podemos enlazarlas con datos mediante dos puntos :. Por ejemplo:

<script setup>
import Usuario from './components/Usuario.vue'
import { ref } from 'vue'

const nombreUsuario = ref('Alice')
</script>

<template>
  <Usuario :nombre="nombreUsuario" />
  <Producto :precio="precio * 1.21" />
</template>

En este caso, el valor de la prop depende de nombreUsuario. Si el valor reactivo cambia, el componente hijo recibirá el nuevo valor. En el segundo componente se ha enviado una expresión.

18.2 Pasar objetos mediante props

Las props también pueden contener objetos completos. Por ejemplo, en el componente padre se ha creado un objeto que después se pasa a un componente hijo:

<script setup>
const usuario = {
  id: 1,
  nombre: 'Alice',
  edad: 20
}
</script>
<template>
  <Usuario :usuario="usuario" />
</template>

<script setup>
defineProps({
  usuario: Object
})
</script>
<template>
  <h2>{{ usuario.nombre }}</h2>
  <p>Edad: {{ usuario.edad }}</p>
</template>

18.3 Declaración de props con defineProps()

En <script setup> utilizamos defineProps() para declarar las propiedades que puede recibir un componente. Vue permite crear una variable para declarar los props y de esta manera acceder en la plantilla a través de esta variable, pero también a través de los nombres de las props.

<script setup>
const props = defineProps({
  nombre: String,
  edad: Number
})
</script>
<template>
  <h2>{{ props.nombre }}</h2>
  <p>{{ props.edad }} años</p>
</template>

<script setup>
const props = defineProps({
  nombre: String,
  edad: Number
})
</script>
<template>
  <h2>{{ nombre }}</h2>
  <p>{{ edad }} años</p>
</template>

Cualquiera de las dos opciones es posible.

18.4 Validación y valores por defecto de las props

Podemos especificar qué tipo de dato esperamos recibir, de esta manera podemos ayudar a documentar el componente y permite que Vue pueda detectar determinados usos incorrectos. También se puede especificar si una prop es obligatoria:

<script setup>
const props = defineProps({
  nombre: {
    type: String,
    required: true
  },
  edad: Number,
  activo: Boolean
})
</script>

En este caso, el componente espera que se proporcione nombre y que sea de tipo String.

También podemos establecer un valor por defecto:

<script setup>
const props = defineProps({
  nombre: {
    type: String,
    default: 'Usuario'
  }
})
</script>

Si el padre no proporciona nombre, el componente utilizará el valor por defecto "Usuario"

18.5 Las props son de solo lectura

Una regla fundamental de Vue es que un componente hijo no debe modificar directamente una prop recibida. Las props pertenecen conceptualmente al componente padre.

El siguiente código no se debería hacer

<script setup>
const props = defineProps({
  contador: Number
})
props.contador++
</script>

El hijo puede solicitar un cambio mediante un evento y será el padre quien modifique el dato. Esto ayuda a evitar cambios difíciles de rastrear en aplicaciones grandes.

19.1 emit

En <script setup>, los eventos personalizados se declaran mediante defineEmits() y emitirlos mediante emit():

<script setup>
const emit = defineEmits([
  'guardar',
  'cancelar'
])
</script>

<script setup>
// ...
emit('guardar')
// ...
emit('cancelar')
</script>

El padre puede escuchar esos eventos indicando las funciones que se van a ejecutar al llamar al hijo:

<script setup>
function guardarDatos() {
    //...
}
function ejecutarCancelar() {
    //...
}
</script>
<template>
  <MiFormulario @guardar="guardarDatos" @cancelar="ejecutarCancelar" />
</template>

De esta forma, el hijo no necesita conocer qué hará el padre con el evento. Solo comunica “ha ocurrido esta acción” y el padre decide cómo responder. Esto también sirve para reaprovechar código.

19.2 Enviar datos mediante eventos

Un evento también puede transportar información. Podemos generar desde un componente padre una lista de usuarios (cada uno es un componente hijo), y al seleccionar uno se recibe en el padre el identificador.

<script setup>
const emit = defineEmits(['seleccionar'])

function seleccionarProducto(id) {
  emit('seleccionar', id)
}
</script>
<template>
  <!-- Listado e información -->
  <button 
    @click="seleccionarProducto(10)">
    Seleccionar producto 10
  </button>
</template>

<script setup>
function seleccionarUsuario(id) {
  console.log(id)
}
</script>
<template>
  <Usuario
    v-for="usuario in usuarios"
    :key="usuario.id"
    :usuario="usuario"
    @seleccionar="seleccionarUsuario"
   />
</template>

Cada componente puede informar al padre de qué usuario ha seleccionado el usuario de la aplicación.

22.1 Slots con contenido predeterminado

Un slot puede tener contenido predeterminado. Imaginemos un componente que dibuja un botón, y que por defecto tiene un nombre:

<template>
  <button>
    <slot>Botón</slot>
  </button>
</template>

<template>
  <MiBoton />
</template>

<template>
  <MiBoton>
    Guardar
  </MiBoton>
</template>

Si llamamos al componente sin datos, aparecerá el valor por defecto, mientras que si le ponemos un texto como en el ejemplo anterior, aparecerá “Guardar”.

Los valores predeterminados son útiles para crear componentes que funcionen correctamente incluso cuando no se proporciona contenido personalizado.

22.2 Slots con nombre

Un componente puede tener más de un slot, por lo que tenemos que poder distinguirlos. Para ello tenemos que utilizar slots con nombre.

<Tarjeta>
  <template #cabecera>
    <h2>Producto</h2>
  </template>

  <p>Descripción del producto.</p>

  <template #pie>
    <button>Comprar</button>
  </template>
</Tarjeta>

<template>
  <article class="tarjeta">
    <header>
      <slot name="cabecera"></slot>
    </header>

    <main>
      <slot></slot>
    </main>

    <footer>
      <slot name="pie"></slot>
    </footer>
  </article>
</template>

En este ejemplo se puede ver cómo el padre puede proporcionar cada contenido utilizando #. El slot sin nombre se denomina slot por defecto.

22.3 Slots con ámbito

Los slots con ámbito permiten que el componente hijo proporcione datos al contenido que ha introducido el padre.

En este ejemplo el hijo proporciona el objeto usuario:

<template>
  <slot :usuario="usuario"></slot>
</template>

Y el componente padre puede recibir ese dato y decidir cómo representarlo:

<MiComponente>
  <template #default="{ usuario }">
    <p>{{ usuario.nombre }}</p>
  </template>
</MiComponente>

Este mecanismo puede resultar inicialmente más complejo, pero es muy útil para crear componentes reutilizables que controlan una estructura pero permiten al padre decidir cómo mostrar determinados datos. Un ejemplo habitual sería un componente de lista:

<template>
  <ul>
    <li v-for="usuario in usuarios" :key="usuario.id">
      <slot :usuario="usuario">
        {{ usuario.nombre }}
      </slot>
    </li>
  </ul>
</template>

El componente controla la lista, mientras que el componente padre decide cómo representar cada usuario.

Composition API

23.1 Composition API frente a Options API

Vue dispone de dos estilos principales para organizar la lógica de los componentes:

• Options API: la lógica se organiza mediante propiedades de un objeto, como data, methods, computed y watch.
• Composition API: permite organizar el comportamiento del componente mediante funciones y variables de JavaScript, en lugar de distribuirlo necesariamente entre diferentes opciones de configuración.

A continuación el mismo componente creado con ambas APIs:

<script>
export default {
  data() {
    // estado
    return {
      contador: 0
    }
  },

  methods: {
    //funciones
    incrementar() {
      this.contador++
    }
  }
}
</script>

<template>
  <p>Contador: {{ contador }}</p>
  <button @click="incrementar">
    Incrementar
  </button>
</template>

<script setup>
import { ref } from 'vue'

const contador = ref(0)

function incrementar() {
  contador.value++
}
</script>

<template>
  <p>Contador: {{ contador }}</p>
  <button @click="incrementar">
    Incrementar
  </button>
</template>

En la siguiente tabla vemos una comparativa:

Ambas APIs siguen siendo válidas en Vue 3. La Composition API no elimina la Options API. Hemos estado utilizando Composition API con <script setup>, ya que permite trabajar con una estructura sencilla y facilita la reutilización de código.

24.1 onMounted()

onMounted() permite ejecutar una función cuando el componente se ha montado en el DOM.

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('El componente se ha montado')
})
</script>

<template>
  <h1>Mi aplicación</h1>
</template>

La función registrada se ejecutará cuando Vue haya completado el montaje del componente.

Este hook resulta útil para tareas como:

• Inicializar una biblioteca que necesita elementos del DOM.
• Consultar el tamaño de un elemento.
• Iniciar determinadas operaciones asíncronas.
• Configurar recursos que dependen de que el componente esté montado.

24.2 onUpdated()

onUpdated() permite ejecutar código después de que Vue haya actualizado el DOM de un componente como consecuencia de cambios reactivos.

<script setup>
import { ref, onUpdated } from 'vue'

const contador = ref(0)

onUpdated(() => {
  console.log('El DOM del componente se ha actualizado')
})
</script>

<template>
  <p>Contador: {{ contador }}</p>

  <button @click="contador++">
    Incrementar
  </button>
</template>

Cada vez que el cambio reactivo provoca una actualización del DOM, Vue ejecutará el hook, pero debemos tener cuidado con su uso.

No es recomendable utilizar onUpdated() para modificar indiscriminadamente el estado reactivo que ha provocado la actualización, porque podríamos generar un ciclo de actualizaciones.

Por ejemplo, si dentro del hook incrementamos el contador cada vez que se actualiza la plantilla, podemos provocar actualizaciones repetidas:

<script setup>
// ...
onUpdated(() => {
  contador.value++
})
</script>

En la mayoría de las situaciones, si necesitamos calcular un valor a partir del estado, será preferible utilizar computed(). Si necesitamos reaccionar a un cambio para realizar una operación secundaria, puede ser más apropiado utilizar watch().

onUpdated() debe reservarse para los casos en los que realmente necesitamos actuar después de una actualización del DOM.

24.3 onUnmounted()

onUnmounted() se ejecuta cuando Vue ha desmontado el componente. Resulta especialmente importante para liberar recursos que el componente haya creado.

<script setup>
import { onMounted, onUnmounted } from 'vue'

let intervalo

onMounted(() => {
  intervalo = setInterval(() => {
    console.log('Ejecutando tarea periódica')
  }, 1000)
})

onUnmounted(() => {
  clearInterval(intervalo)
})
</script>

<template>
  <p>Componente con una tarea periódica</p>
</template>

Cuando el componente se monta, se crea un intervalo. Cuando se desmonta, se elimina mediante clearInterval().

Entre los recursos que puede ser necesario liberar están:

• Temporizadores creados con setInterval().
• Suscripciones a eventos globales.
• Conexiones o suscripciones externas.
• Recursos de bibliotecas que requieren una limpieza explícita.

Otro ejemplo en el que generamos eventos al presionar el teclado:

<script setup>
import { onMounted, onUnmounted } from 'vue'

function detectarTecla(evento) {
  console.log('Tecla pulsada:', evento.key)
}

onMounted(() => {
  window.addEventListener('keydown', detectarTecla)
})

onUnmounted(() => {
  window.removeEventListener('keydown', detectarTecla)
})
</script>

<template>
  <p>Pulsa cualquier tecla.</p>
</template>

El evento se registra cuando el componente se monta y se elimina cuando se desmonta. De esta manera evitamos que el componente deje manejadores innecesarios activos.

25.1 Composables

Un composable es una función de JavaScript que utiliza la Composition API para encapsular y reutilizar lógica relacionada con el estado de una aplicación Vue.

Por convención, los nombres de los composables suelen comenzar por use. Algunos ejemplos de nombres habituales son:

• useContador.js
• useUsuarios.js
• useAutenticacion.js
• useVentana.js
• useLocalStorage.js

No son funciones especiales del lenguaje. Son funciones de JavaScript que siguen una convención de nombres y utilizan las herramientas reactivas de Vue. Un composable puede:

• Crear referencias reactivas.
• Calcular valores derivados.
• Definir funciones para modificar el estado.
• Utilizar watch().
• Registrar hooks del ciclo de vida cuando se llama desde un contexto válido de un componente.

La principal ventaja es que permite separar la lógica de la interfaz.

25.2 Crear composable

Vamos a extraer la lógica del contador anterior. Primero creamos un archivo llamado useContador.js.

import { ref, computed } from 'vue'

export function useContador() {
  const contador = ref(0)

  const esPositivo = computed(() => contador.value > 0)

  function incrementar() {
    contador.value++
  }

  function decrementar() {
    contador.value--
  }

  function reiniciar() {
    contador.value = 0
  }

  return {
    contador,
    esPositivo,
    incrementar,
    decrementar,
    reiniciar
  }
}

La función useContador() crea el estado reactivo y las funciones necesarias para trabajar con él. Al final devuelve un objeto con los elementos que queremos ofrecer a quien utilice el composable. Después podemos utilizarlo desde un componente.

<script setup>
import { useContador } from './composables/useContador.js'

const {
  contador,
  esPositivo,
  incrementar,
  decrementar,
  reiniciar
} = useContador()
</script>

<template>
  <p>Contador: {{ contador }}</p>
  <p>Es positivo: {{ esPositivo }}</p>

  <button @click="incrementar">+</button>
  <button @click="decrementar">-</button>
  <button @click="reiniciar">Reiniciar</button>
</template>

El componente ya no contiene la implementación de la lógica del contador, sólo importa el composable y utiliza los elementos que este devuelve.

Aunque Vue no obliga a utilizar directorios para separar los componentes y/o los composables, resulta conveniente realizar cierta separación, por lo que se ha creado la carpeta composables.