介绍

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

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

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

先决条件

要阅读本文，您需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
• 熟悉设置 Vue.js 项目和单文件组件。
• 熟悉TypeScript 约定。

本教程已通过 Node v15.1.0、npmv6.14.8、Vue.js v2.6.11、TypeScript v3.9.3、@vue/cliv4.5.0、vue-class-componentv7.2.3 和vue-property-decoratorv8.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 编写单文件组件

一类组分是打字稿class在于extends所述Vue对象。在单文件组件中，确保将<script>语言设置为ts并将类导出为default.

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

<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将更新并反映所做的更改。

第 3 步 – 使用组件道具

通过使用@Prop(config)装饰器 from vue-property-decorator，您可以以与数据属性大致相同的方式声明输入属性。

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

<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在类上。

这里是在打字稿一个例子getSAmyComputedProp并返回一个随机数：

<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()
    }
  }
}

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

第 5 步 – 使用观察者

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

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

<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.js 基于类的组件中使用vue-class-component和vue-property-decorator支持 TypeScript。

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

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

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