Ответ
В 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
Ответ 18+ 🔞
Слушай, а вот эта вся хуйня с Vue 2 и классовыми компонентами — это, блядь, как приехать на «Запорожце» в костюме от Армани. Вроде и машина едет, и костюм норм, но в целом — пиздец какой-то диссонанс.
Вот смотри. По уму-то, Vue — он про объекты, про data, methods, эту всю простоту. А тут приходят ребята с бэкграундом в ООП, глаза горят, и говорят: «А давайте сделаем на классах, ёпта!». И родилась библиотечка vue-class-component. А потом, как водится, пошли декораторы — vue-property-decorator. И понеслась, блядь, писать компоненты, как в каком-нибудь Angular, только с привкусом Vue.
Как это выглядит, на примере:
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++ // И this работает, мать его.
}
}И что в этом, спрашивается, хорошего?
- Для тех, кто вырос на классах и TypeScript — это родной дом, блядь. Не надо перестраивать мозг.
- С тайпскриптом оно действительно дружит лучше, описание типов прямо в коде, красота.
А что пиздецового?
- Это ж ещё одна зависимость, сука! Ещё один пакет, который может сломаться, устареть или просто не встать.
- Это уже не «вуевый» подход, это какое-то извращение. Vue тем и хорош был, что простой, а тут на тебе — классы, декораторы, наследование. Ёперный театр!
В общем, инструмент на любителя. Хочешь почувствовать себя крутым enterprise-разработчиком — вперёд. Но помни, что под капотом-то всё тот же Vue 2, просто в другом парике.