Что такое class component в Vue 2

В Vue 2 class component — это альтернативный синтаксис для создания компонентов с использованием классов ES6 вместо стандартного объекта options. Это достигается через библиотеку vue-class-component (официальная) или vue-property-decorator (расширенная версия с декораторами).

Основные особенности:

• Класс наследуется от Vue
• Методы и computed свойства объявляются как методы класса
• Декораторы упрощают объявление props, watch и других опций

Пример:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    message: String
  }
})
export default class HelloWorld extends Vue {
  // Data
  count = 0

  // Computed
  get doubled() {
    return this.count * 2
  }

  // Method
  increment() {
    this.count++
  }
}

Плюсы:

• Более привычный синтаксис для разработчиков с ООП-бэкграундом
• Лучшая поддержка TypeScript

Минусы:

• Дополнительная зависимость
• Менее "вуевый" подход по сравнению с options API