Mixins en Vue.js: reutilización con riesgos

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:16

Mixins en Vue.js: reutilización con riesgos

Curso de Vue.js: Componentes y Composition API

Clase 11 de 23

Clase 11 / 23

Recursos

Reutilizar código en Vue.js con mixins te permite combinar configuraciones de la Options API en distintos componentes sin duplicar lógica. Sirve para developers que trabajan con Vue 2 o proyectos legacy y necesitan compartir métodos, datos o hooks entre componentes.

Los mixins funcionan como una especie de herencia o composición ligera: defines atributos y métodos una sola vez y los inyectas donde los necesites. Pero, como verás más adelante, también traen sus propias trampas.

¿Qué es un mixin en Vue.js y para qué sirve?

Un mixin es un objeto JavaScript que contiene las mismas opciones que tendrías dentro de un componente Vue: la función data, methods, computed, hooks del ciclo de vida, etc. La diferencia es que ese objeto se importa y se combina con la configuración del componente que lo consume.

¿Qué es un mixin en Vue? Es un objeto reutilizable que mezcla opciones como data, methods y hooks dentro de uno o varios componentes, evitando copiar el mismo código en cada archivo.

Esto te permite tratar fragmentos de tu lógica como si fueran una pequeña librería interna del proyecto, lista para inyectarse en cualquier componente.

¿Cómo crear y usar un mixin paso a paso?

La convención típica es crear una carpeta mixins dentro de src y guardar ahí archivos .js con la lógica compartida [3:20]. No necesitas un single file component porque solo vas a exportar JavaScript.

Estructura del archivo mixin

Dentro del archivo usas export default y escribes exactamente las mismas opciones que pondrías en un componente. Por ejemplo, un mixin base podría verse así:

js export default { data() { return { algo: 'un texto' } }, created() { console.log('base created') } }

Aquí defines una variable algo en data y un hook created que imprime un mensaje en consola cuando el componente se monta.

Importar el mixin en un componente

Dentro del bloque <script> del componente, importas el archivo y lo registras en la opción mixins:

js import base from '@/mixins/base'

export default { mixins: [base] }

La sintaxis @ apunta a la carpeta src, así que @/mixins/base resuelve la ruta automáticamente y puedes omitir la extensión .js.

Desde ese momento, el componente tiene acceso a la variable algo y ejecuta el console.log de base created como si fuera código propio. Si lo renderizas con {{ algo }} en el template, verás el texto en pantalla.

¿Qué pasa si hay conflictos entre mixin y componente?

Cuando una variable o método existe con el mismo nombre en el mixin y en el componente, Vue.js da prioridad al componente. Esto evita ambigüedades y deja claro de dónde viene cada valor cuando hay colisiones.

En el caso de los hooks del ciclo de vida no hay reemplazo: se ejecutan ambos. Primero el del mixin y luego el del componente, así que tu created del mixin y el created del componente corren en secuencia.

¿El mixin sobreescribe los datos del componente? No. Si hay nombres duplicados, el componente gana. Solo los hooks del ciclo de vida se ejecutan en cadena.

¿Cuándo conviene usar mixins y cuándo evitarlos?

Los mixins son potentes para tareas transversales: agregar un sistema de debugging común, compartir un estado vía provide/inject, o estandarizar comportamientos en muchos componentes a la vez. Su poder está en modularizar características de Vue.js para que cualquier componente las herede sin esfuerzo.

Las desventajas que debes conocer

Antes de llenar tu proyecto de mixins, considera estos puntos:

Opacidad del código: la variable algo no está declarada en el componente, pero la usas. Si alguien lee el archivo sin abrir el mixin, no entiende de dónde sale.
Acoplamiento implícito: modificar un mixin afecta a todos los componentes que lo consumen, y muchas veces sin avisar.
Debugging complicado: hooks como created pueden ejecutarse sin que te des cuenta, lo que dificulta rastrear bugs.

Esa falta de visibilidad directa es la queja más común contra los mixins y la razón por la que muchos equipos los evitan en proyectos grandes.

El reemplazo en Vue 3

A partir de Vue.js 3 llegó la Composition API, que ofrece una sintaxis funcional para reutilizar lógica sin los problemas de los mixins [10:30]. Mientras la Options API configura componentes con un objeto JSON, la Composition API usa funciones componibles que hacen explícito qué entra y qué sale del componente.

Si estás empezando un proyecto nuevo en Vue 3, probablemente no necesites mixins en absoluto. Si mantienes código en Vue 2, dominarlos sigue siendo clave.

¿Has tenido problemas debuggeando un mixin que no sabías que estaba ahí? Cuéntalo en los comentarios.

Samuel Schulz

Hace 3 años

En Vue.js, los mixins son una forma de reutilizar y compartir lógica entre componentes. Son objetos que contienen opciones de componentes, como data, methods, computed, etc., y pueden ser mezclados con varios componentes. Los mixins permiten la composición de funcionalidades en lugar de herencia clásica.

Sin embargo, en Vue 3, se ha introducido la Composición API, que proporciona una alternativa más poderosa y flexible a los mixins. La Composición API permite organizar la lógica de un componente en "composables", que son funciones que pueden ser fácilmente compartidas y reutilizadas.

Aunque los mixins son una característica válida en Vue 2 y han sido utilizados en muchos proyectos, se ha recomendado migrar a la Composición API en Vue 3 debido a sus ventajas en términos de claridad, reusabilidad y mantenimiento del código.

En resumen:

Vue 2: Los mixins son una opción válida y se pueden utilizar. Sin embargo, ten en cuenta que la Composición API de Vue 3 es una evolución de esta idea y ofrece beneficios adicionales.
Vue 3: Se recomienda utilizar la Composición API en lugar de mixins siempre que sea posible. Proporciona una forma más estructurada y mejor para compartir y reutilizar la lógica en comparación con los mixins de Vue 2.

La Composición API proporciona funciones como ref, reactive, watch, y computed, que hacen que el código sea más declarativo y fácil de entender. Además, los componibles pueden agrupar la lógica relacionada de manera más clara.

Introducción

Options API vs Composition API en Vue 3

Crear y configurar proyectos con Vue CLI

Estructura de archivos en proyectos Vue CLI

Built-in Components

Componentes dinámicos con Vue.js

Componentes asíncronos con defineAsyncComponent

Transiciones con fade en Vue.js

Teleports en Vue 3 para mover modales al DOM

Componentes personalizados

Virtual DOM en Vue.js explicado

Hooks del ciclo de vida en Vue.js

Hooks del ciclo de vida en Vue con ejemplos

Mixins en Vue.js: reutilización con riesgos

Composition API

Composition API: setup en Vue 3

Hooks del ciclo de vida en Vue 3 setup

`ref` y `reactive` en Vue Composition API

Watchers con Composition API en Vue.js

Propiedades computadas con Composition API

Props reactivos con toRefs en Vue.js

El argumento context en Vue 3 setup

provide e inject en Vue Composition API

Template Refs en Vue 3 con Composition API

Composition API vs Options API en Vue.js

script setup en Vue 3 sin export default

Cierre del curso

Qué aprendiste en el curso de Vue.js 3

Mixins en Vue.js: reutilización con riesgos

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos