Vue.js 是一個輕量型的 JavaScript 框架，極大地簡化了 Web 應用程序的開發過程。在 Vue.js 中，class 風格的組件定義提供了另一種組件開發的方式，這種方式與傳統的 Vue 組件定義方式有所不同。Vue class 對象是一個 JavaScript 對象，包含了組件的狀態、行為和生命周期鉤子函數。當定義一個 Vue class 組件時，需要繼承 Vue 類，并且在構造函數中調用 Vue 的構造函數。以下是一個簡單的 Vue class 組件定義示例：

class MyComponent extends Vue {
constructor() {
super();
this.count = 0;
}
increment() {
this.count++;
}
decrement() {
this.count--;
}
mounted() {
console.log('MyComponent mounted');
}
}

在上面的代碼中，我們定義了一個名為 MyComponent 的類，它繼承了 Vue 類，因此它具有 Vue 組件的全部功能。在構造函數中，我們定義了一個狀態變量 count，用來跟蹤組件被點擊的次數。我們還定義了兩個方法，increment 和 decrement，用來改變 count 變量的值。

Vue class 組件還可以添加生命周期鉤子函數，例如 mounted 函數。這個函數會在組件掛載到 DOM 后被調用，我們可以在這里執行一些需要 DOM 元素的操作，例如添加事件監聽器等等。

Vue class 組件是一種更優雅的組件編寫方式，它使用標準的 ES6 類語法，并且可以使用一些高級特性，例如裝飾器。使用 class 風格的組件定義方式，可以更加清晰地組織和重用代碼，提高代碼結構的可維護性和可讀性。