如何使用Vue.js和TypeScript编写基于类的组件

介绍

Vue.js 2 支持类样式组件。如果您来自 Angular (2+) 背景，您可能熟悉将组件编写为类的模式，使用属性和装饰器来描述组件的更复杂部分。

类样式组件相对于标准 Vue.js 组件的最大优势在于，它们使 this 在编译组件中实际指向的位置更清晰，并允许更简洁的代码。

在本文中，您将了解如何在 Vue.js 基于类的组件中使用 vue-class-component 和 vue-property-decorator 来支持 TypeScript。

先决条件

要阅读本文，您将需要：

Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。
熟悉设置 Vue.js 项目和单文件组件。
熟悉 TypeScript 约定。

本教程已使用 Node v15.1.0、npm v6.14.8、Vue.js v2.6.11、TypeScript v3.9.3、@vue/cli v4.5.0、vue-class-component v7 进行了验证。 2.3 和 vue-property-decorator v8.4.2。

第 1 步 — 设置项目

您需要安装 vue-class-component 和 vue-property-decorator。

您可以使用 @vue/cli 创建一个新的 Vue.js 项目：

npx @vue/cli create vue-typescript-example

出于本教程的目的，配置将需要：

迅速的	选项
`Please pick a preset`	`Manually select features`
`Check the features needed for your project`	`TypeScript`
`Use class-style component syntax?`	`Yes`

@vue/-plugin-typescript 将安装 typescript、vue-class-component 和 vue-property-decorator。

然后，导航到项目目录：

cd vue-typescript-example

此时，您已经为 TypeScript 和类样式组件设置了 Vue.js 项目。

第 2 步 — 使用 TypeScript 编写单文件组件

一个类组件是一个 TypeScript class，即 extends Vue 对象。在单文件组件中，确保将 <script> 语言设置为 ts 并将类导出为 default。

在代码编辑器中打开 App.vue 并使用 TypeScript 创建这个示例单文件组件：

src/App.vue

<template>
  <div>
    <label>Update myDataProperty
      <input :value="myDataProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myDataProperty }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  // Data property
  myDataProperty: string = 'Data Property'

  // Component method
  updateMyProperty ($event: { target: { value: string } }) {
    this.myDataProperty = $event.target.value
  }
}
</script>

请注意，数据属性是直接在类和方法上定义的。

@Component(componentConfig) 装饰器使这成为可能。它将类转换为 Vue.js 在编译过程中可以理解的格式。

此时，如果您要在浏览器中编译和观察您的应用程序，您将看到一个输入字段和单词 Data Property。通过与输入字段交互，myDataProperty 将被更新并反映所做的更改。

第三步——使用组件道具

通过使用 vue-property-decorator 中的 @Prop(config) 装饰器，您可以像声明数据属性一样声明输入属性。

这是 TypeScript 中的一个示例，它采用 exampleProperty 组件属性，默认值为 'Input Property'：

src/App.vue

<template>
  <div>{{ exampleProperty }}</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  @Prop({ default: 'Input Property' })
  exampleProperty!: string
}
</script>

在 JavaScript 中，这相当于：

export default {
  props: {
    exampleProperty: {
      type: String,
      default: 'Input Property'
    }
  }
}

此时，如果您要在浏览器中编译和观察您的应用程序，您将看到以下消息：Input Property。

第 4 步 — 使用计算属性

计算属性在类上写为 getters 和 setters。

这是 TypeScript 中的一个示例，它 getsa myComputedProp 并返回一个随机数：

src/App.vue

<template>
  <div>{{ myComputedProp }}</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  get myComputedProp() {
    return Math.random()
  }
}
</script>

在 JavaScript 中，这相当于：

export default {
  computed: {
    myComputedProp() {
      return Math.random()
    }
  }
}

此时，如果您要在浏览器中编译和观察您的应用程序，您将看到一个随机数。

第五步——使用观察者

可以使用 @Watch(propertyString, config) 装饰器创建观察者。

以下是 TypeScript 中的一个示例，用于监视 myWatchedProperty 何时触发 onPropertyChanged：

src/App.vue

<template>
  <div>
    <label>Update myWatchedProperty
      <input :value="myWatchedProperty" @input="updateMyProperty($event)"/>
    </label>
    <div>{{ myWatchedPropertyStatus }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  myWatchedProperty: string = 'Watched Property'
  myWatchedPropertyStatus: string = ''

  @Watch('myWatchedProperty')
  onPropertyChanged(value: string, oldValue: string) {
    this.myWatchedPropertyStatus = 'Watched Property Changed'
  }

  updateMyProperty ($event: { target: { value: string } }) {
    this.myWatchedProperty = $event.target.value
  }
}
</script>

在 JavaScript 中，这相当于：

export default {
  data() {
    return {
      myWatchedProperty: null
    }
  }

  methods: {
    onPropertyChanged(value, oldValue) {
      // ...
    }
  }

  watch: {
    myWatchedProperty: {
      handler: 'onPropertyChanged',
      immediate: false,
      deep: true
    }
  }
}

此时，如果您要在浏览器中编译和观察您的应用程序，您将看到一个输入字段。更改输入值将显示消息 Watched Property Changed。

结论

在本文中，您学习了如何使用 vue-class-component 和 vue-property-decorator 在 Vue.js 基于类的组件中支持 TypeScript。

本文介绍了@Component、get和set。有关 vue-class-component 中可用声明的完整列表，请参阅官方文档。

本文还介绍了@Prop和@Watch。有关 vue-property-decorator 中可用的装饰器的完整列表，请参阅官方文档。

如果您想了解有关 TypeScript 的更多信息，请查看我们的 TypeScript 主题页面以获取练习和编程项目。