当前位置：首页 > VUE

vue中实现装饰器

2026-01-21 21:56:37VUE

在Vue中实现装饰器可以通过多种方式，以下是一些常见的方法和示例：

使用类组件装饰器

Vue 2.x中可以通过vue-class-component和vue-property-decorator库实现装饰器语法。这些库允许使用TypeScript装饰器来定义Vue组件。

安装依赖：

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

示例代码：

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

@Component
export default class MyComponent extends Vue {
  @Prop({ default: 'default value' }) readonly propValue!: string;

  @Watch('propValue')
  onPropValueChanged(newVal: string, oldVal: string) {
    console.log(`propValue changed from ${oldVal} to ${newVal}`);
  }

  dataValue: string = 'data';

  get computedValue(): string {
    return this.dataValue.toUpperCase();
  }

  methodExample(): void {
    console.log('method called');
  }
}

使用装饰器增强功能

可以创建自定义装饰器来增强Vue组件或方法的功能。例如，创建一个日志装饰器：

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

class MyComponent extends Vue {
  @Log
  logMethod(msg: string) {
    console.log(msg);
  }
}

组合式API中的装饰器

Vue 3的组合式API中，装饰器的使用场景较少，但依然可以通过类似方式实现功能增强。例如：

import { ref } from 'vue';

function TrackChanges(target: any, key: string) {
  const value = ref(target[key]);
  Object.defineProperty(target, key, {
    get() {
      return value.value;
    },
    set(newVal) {
      console.log(`${key} changed to ${newVal}`);
      value.value = newVal;
    },
  });
}

class MyComponent {
  @TrackChanges
  count = 0;
}