Vue 属性装饰器 - TypeScript

Vue.js 是一个流行的 JavaScript 框架，用于构建 Web 应用程序和用户界面。与传统 JavaScript 类不同，Vue.js 通过组件和属性来构建应用程序。

对于 TypeScript 用户来说，Vue.js 支持属性装饰器，这使得在 Vue.js 组件中使用 TypeScript 变得更加容易和明确。

属性装饰器

属性装饰器是 TypeScript 的一个特性，它提供了一种在类或者属性声明上附加元数据的方法。在 Vue.js 中，我们可以使用这些元数据来改变组件的行为。

使用属性装饰器有两个常见的应用场景：

1. 修改类的属性
2. 修改类的访问器

属性装饰器用于在属性声明之前声明，它由 '@' 符号和装饰器名称组成，例如：@Prop, @Watch。

基本用法

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

@Component
export default class HelloWorld extends Vue {
  @Prop({ default: 'World' }) name!: string;

  @Prop(Number) index!: number;

  greeting = `Hello, ${this.name}!`;
}

这个例子声明了一个 HelloWorld 组件，该组件有两个 props_name、index，并有一个 greeting 计算属性。

在 props 的声明中，我们可以使用 @Prop 装饰器来标记它。这告诉 Vue.js 该属性是一个 prop，并且它的默认值是 'World'。

我们也可以给属性定义一个类型。在上面的代码示例中，index 属性声明了一个 number 类型。

使用 decorators 需要安装 vue-property-decorator 包：

npm install -D vue-property-decorator

访问器

在 TypeScript 中，访问器用于定义属性的读取和写入操作。类中的访问器通过 get 和 set 关键字定义。

在 Vue.js 中，可以使用访问器装饰器定义计算属性，并使用 @Watch 装饰器定义 watchers。

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

@Component
export default class Counter extends Vue {
  @Prop(Number) count!: number;

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

  @Watch('count')
  onCountChanged(value: number, oldValue: number) {
    console.log(`Changed from ${oldValue} to ${value}`);
  }
}

在上面的代码示例中，我们定义了一个计算属性 doubled，并在 @Watch 装饰器中定义了一个 watchers，当 count 变化时，它将调用 onCountChanged 方法。

总结

使用属性装饰器可以使 Vue.js 中的代码更加清晰、易读和易于维护。它使我们能够在类声明中定义代码的行为，这使得在使用 TypeScript 构建 Vue.js 应用程序时变得更加方便。

我们可以使用 @Prop 装饰器将属性标记为 prop，使用 @Watch 装饰器定义 watchers，以及使用访问器装饰器定义计算属性。