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

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

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

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

Контент

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

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

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

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

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

`extends` - це механізм Vue (Options API), який дозволяє **успадковувати налаштування одного компонента в іншому**, аналогічно `mixins`, але **тільки від одного "батьківського" компонента**.

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

> `extends` **підмішує в компонент усі опції іншого компонента: data, methods, computed, хуки тощо.**

Це схоже на класичне наслідування, тільки для Vue-компонентів.

---

## Приклад використання extends

#### base.js - базовий компонент

```js
export default {
  data() {
    return {
      baseMessage: 'Hello from base'
    }
  },
  methods: {
    greet() {
      console.log(this.baseMessage)
    }
  }
}
```

#### дочірній компонент

```js
import base from './base.js'

export default {
  extends: base,

data() {
    return {
      childMessage: 'Hello from child'
    }
  }
}
```

Тепер компонент має:

- `baseMessage` з base-компонента
- метод `greet()` з base-компонента
- `childMessage` - свій власний стан

---

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

#### 1. Наслідування базових компонентів

Можна створити "базовий" компонент:

- базова валідація
- базові методи API
- базові computed
- базові хуки

і повторно використовувати їх.

---

#### 2. Створення шаблонів поведінки компонентів

Наприклад, спільний компонент:

- з однаковою логікою завантаження
- з однаковими методами
- з однаковим data()

---

#### 3. Це альтернатива mixins (але простіше і чистіше)

Якщо mixins можуть бути численними, то `extends` - тільки один.

---

## Важливі особливості extends

#### 1. Компонент успадковує **всі опції** base-компонента

data, methods, computed, watch, lifecycle hooks, props тощо.

---

#### 2. При конфлікті імен перемагає дочірній компонент

```js
// base.js
methods: { greet() { console.log('base') } }

// child
methods: { greet() { console.log('child') } }
```

Виклик:

```
child
```

---

#### 3. Хуки об'єднуються, але порядок - як у mixins:

1. хуки батька
2. хуки дитини

---

#### 4. Можна використовувати разом з mixins (не рекомендується)

---

#### 5. Рідко використовується у Vue 3

Бо Composition API повністю замінює потребу в наслідуванні.

---

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

> `extends` **- це спосіб успадкувати один компонент від іншого в Options API.**
> **Дочірній компонент отримує всі опції батьківського (data, methods, computed, хуки).**
> **При конфлікті імен перемагає дочірній компонент.**
> **У Vue 3 застосовується рідко, оскільки його замінює Composition API.**

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

Для рев’юера

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

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