Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке mixins?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

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

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

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

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

---

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

#### mixin.js

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

#### компонент

```js
import { myMixin } from './mixin'

export default {
  mixins: [myMixin],

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

---

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

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

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

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

1. **created** з mixin
2. **created** з компонента

---

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

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

Наприклад:

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

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

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

---

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

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

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

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

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

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

---

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

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

---

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

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

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

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

---

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

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

---

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

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

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

function fetchUser() {}

return { user, fetchUser }
}
```

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

---

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

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати371 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.