# 概述

警告

此库不再积极维护。不再建议在 Vue 3 中使用基于类的组件。在大型应用程序中使用 Vue 3 的推荐方法是单文件组件、组合 API 和<script setup>。如果您仍然想使用类，请查看社区维护的项目vue-facing-decorator.

此外，如果您有兴趣从类组件迁移，您可能会发现 CLI 工具vue-class-migrator对过渡有所帮助。

Vue 类组件是一个库，它允许您以类样式语法创建 Vue 组件。例如，下面是一个用 Vue 类组件编写的简单计数器组件

<template>
  <div>
    <button v-on:click="decrement">-</button>
    {{ count }}
    <button v-on:click="increment">+</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

// Define the component in class-style
@Component
export default class Counter extends Vue {
  // Class properties will be component data
  count = 0

  // Methods will be component methods
  increment() {
    this.count++
  }

  decrement() {
    this.count--
  }
}
</script>

如示例所示，您可以通过使用@Component装饰器注释类，以直观且标准的类语法定义组件数据和方法。您可以简单地用类样式组件替换您的组件定义，因为它等同于普通选项对象样式的组件定义。

通过以类样式定义组件，您不仅改变了语法，还可以利用一些 ECMAScript 语言特性，例如类继承和装饰器。Vue 类组件还提供了一个mixins助手用于混入继承，以及一个createDecorator函数来轻松创建您自己的装饰器。

您可能还想查看由Vue 属性装饰器提供的@Prop和@Watch装饰器。

安装 →