vue2+ts 计算属性使用

在 Vue 2 中使用 TypeScript（TS）编写计算属性（computed）与使用 JavaScript（JS）是类似的。下面是一个示例：

// 导入Vue和Component装饰器
import Vue from 'vue';
import Component from 'vue-class-component';

// 使用@Component装饰器定义组件
@Component
export default class MyComponent extends Vue {
  // data属性
  message: string = 'Hello World';

  // 计算属性
  get reversedMessage(): string {
    return this.message.split('').reverse().join('');
  }

  // 监听计算属性的变化
  @Watch('reversedMessage')
  onReversedMessageChange(value: string, oldValue: string) {
    console.log(`reversedMessage changed from ${oldValue} to ${value}`);
  }
}

在上面的示例中，我们使用`@Component`装饰器将类声明为一个 Vue 组件。然后，我们定义了一个名为`message`的数据属性和一个名为`reversedMessage`的计算属性。`reversedMessage`计算属性会根据`message`的值计算出一个新的值。

我们还可以使用`@Watch`装饰器来监听计算属性的变化。在上面的示例中，我们定义了一个名为`onReversedMessageChange`的方法，并用`@Watch('reversedMessage')`装饰器将其与`reversedMessage`计算属性关联起来。当`reversedMessage`发生变化时，该方法会被调用。

需要注意的是，为了让 TypeScript 正确地推断类型，我们需要将`vue-class-component`库安装为项目的依赖。你可以使用以下命令进行安装：

npm install vue-class-component

这样，你就可以在 Vue 2 中使用 TypeScript 编写计算属性了。希望能对你有帮助！