Що робить extends?

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

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

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

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

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

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

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

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

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

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. При конфлікті імен перемагає дочірній компонент

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

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

Виклик:

child

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

хуки батька
хуки дитини

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

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

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

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

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

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

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

Premium

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