当前位置：首页 > VUE

vue中实现装饰器

2026-02-22 13:04:33VUE

Vue 中实现装饰器的基本方法

在 Vue 中实现装饰器通常需要结合 TypeScript 或 Babel 插件，因为原生 JavaScript 不支持装饰器语法。以下是几种常见实现方式：

使用 `vue-class-component` 和 `vue-property-decorator`

这两个库是 Vue 官方推荐的类组件装饰器方案，适合 TypeScript 项目。

安装依赖：

npm install vue-class-component vue-property-decorator --save

示例代码：

import { Component, Vue, Prop, Watch } from 'vue-property-decorator'

@Component
export default class MyComponent extends Vue {
  @Prop({ type: String, default: '' }) readonly name!: string

  private count: number = 0

  @Watch('count')
  onCountChanged(val: number, oldVal: number) {
    console.log(`count changed from ${oldVal} to ${val}`)
  }

  get doubledCount(): number {
    return this.count * 2
  }
}

使用 Babel 插件 `@babel/plugin-proposal-decorators`

对于 JavaScript 项目，可以通过 Babel 插件启用装饰器语法。

安装插件：

npm install --save-dev @babel/plugin-proposal-decorators

配置 .babelrc：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

自定义装饰器示例

可以创建通用的装饰器来复用逻辑：

function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value

  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${key} with`, args)
    return originalMethod.apply(this, args)
  }

  return descriptor
}

class MyComponent extends Vue {
  @Log
  handleClick() {
    // 方法逻辑
  }
}

装饰器在 Vue 3 中的使用

Vue 3 的 Composition API 也可以通过装饰器增强：

import { ref } from 'vue'
import { Options, Vue } from 'vue-class-component'

@Options({})
export default class Counter extends Vue {
  private count = ref(0)

  increment() {
    this.count.value++
  }
}

注意事项

TypeScript 需要在 tsconfig.json 中启用 experimentalDecorators：
```
{
"compilerOptions": {
  "experimentalDecorators": true
}
}
```
装饰器执行顺序是从上到下，从外到内
某些 Vue 生命周期钩子（如 created）在类组件中可直接作为类方法使用
生产环境构建时需要确保相关 Babel/TypeScript 配置正确