Vue 中如何使用 Class API 和 Composition API with TypeScript？

推荐答案

使用 Class API 和 Composition API with TypeScript

1. 使用 Class API with TypeScript

在 Vue 3 中，虽然官方推荐使用 Composition API，但你仍然可以使用 Class API 来编写组件。以下是一个使用 Class API 和 TypeScript 的示例：

// www.javascriptcn.com code example
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

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

@Component
export default class MyComponent extends Vue {
  message: string = 'Hello, Class API!';

  updateMessage(): void {
    this.message = 'Message Updated!';
  }
}
</script>

2. 使用 Composition API with TypeScript

Composition API 是 Vue 3 中推荐的方式，它提供了更好的逻辑复用和类型推断。以下是一个使用 Composition API 和 TypeScript 的示例：

// www.javascriptcn.com code example
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = ref<string>('Hello, Composition API!');

    const updateMessage = () => {
      message.value = 'Message Updated!';
    };

    return {
      message,
      updateMessage,
    };
  },
});
</script>

本题详细解读

1. Class API with TypeScript

• @Component 装饰器：用于将类标记为 Vue 组件。
• extends Vue：类继承自 Vue，以便使用 Vue 的生命周期钩子和响应式数据。
• message: string：定义了一个响应式数据 message，并初始化为 'Hello, Class API!'。
• updateMessage 方法：用于更新 message 的值。

2. Composition API with TypeScript

• defineComponent：用于定义一个 Vue 组件，并返回一个组件选项对象。
• ref：用于创建一个响应式引用，ref<string> 表示这个引用是一个字符串类型。
• setup 函数：是 Composition API 的核心，用于设置组件的逻辑。它返回的对象中的属性和方法可以在模板中使用。
• message.value：在 Composition API 中，ref 创建的响应式数据需要通过 .value 来访问和修改。

通过这两种方式，你可以在 Vue 3 中结合 TypeScript 编写类型安全的组件。