Що таке mixins?

VueJunior~1 хв читання

Mixins - це механізм Vue (переважно з Vue 2), який дозволяє повторно використовувати логіку між компонентами, додаючи до них спільні властивості:

data
methods
computed
lifecycle-хуки
та інші опції компонента

Простіше кажучи:

Mixin - це об'єкт з логікою, який "підмішується" в компонент.

Компонент отримує все, що описано в mixin.

Простий приклад mixin

mixin.js

export const myMixin = {
  data() {
    return {
      message: 'Hello from mixin'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message)
    }
  },
  created() {
    console.log('Mixin created hook')
  }
}

компонент

import { myMixin } from './mixin'

export default {
  mixins: [myMixin],

  created() {
    console.log('Component created hook')
  }
}

Що відбувається?

Компонент отримає:

data -> message
метод -> sayHello()
lifecycle hook mixin'а - теж виконується

Порядок хуків:

created з mixin
created з компонента

Навіщо потрібні mixins?

1. Повторне використання логіки між компонентами

Наприклад:

логіка авторизації
спільні методи роботи з API
спільна валідація
спільні обчислення

2. Зменшення дублікатів коду

3. Використовувалися до появи Composition API

Недоліки mixins (чому від них відмовилися)

Це важлива частина відповіді на співбесіді.

1. Конфлікти імен

Якщо mixin і компонент мають однаковий method/data:

mixin: say() {}
component: say() {} // перезапише

Важко зрозуміти, що звідки.

2. "Магічна" логіка

Незрозуміло, які властивості звідки з'являються.

3. Погана читабельність

Логіка розподілена по різних файлах:

частина - в mixin
частина - в компоненті
частина - в іншому mixin

Важко зрозуміти, що робить компонент.

4. Погана масштабованість

На великих проєктах mixins створюють хаос.

Сучасна альтернатива: Composition API + composables

У Vue 3 mixins практично замінені composable-функціями:

export function useUser() {
  const user = ref(null)

  function fetchUser() {}

  return { user, fetchUser }
}

Використовуються чітко, без конфліктів, без магії.

Підсумок (ідеально для співбесіди)

Mixins - це спосіб повторного використання логіки між компонентами, за якого об'єкт mixin "підмішується" в компонент. Вони дозволяють ділитися data, methods, computed і lifecycle-хуками. Однак mixins мають серйозні мінуси: конфлікти імен, прихована логіка і погана масштабованість. У Vue 3 їх практично замінює Composition API (composable-функції).

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.