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 的示例：

-- -------------------- ---- -------
----------
  -----
    ----- ------- ------
    ------- ----------------------------- ----------------
  ------
-----------

------- ----------
------ - ---- --------- - ---- -------------------------

----------
------ ------- ----- ----------- ------- --- -
  -------- ------ - ------- ----- ------

  ---------------- ---- -
    ------------ - -------- ----------
  -
-
---------

2. 使用 Composition API with TypeScript

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

-- -------------------- ---- -------
----------
  -----
    ----- ------- ------
    ------- ----------------------------- ----------------
  ------
-----------

------- ----------
------ - ---- --------------- - ---- ------

------ ------- -----------------
  ------- -
    ----- ------- - ------------------- ----------- -------

    ----- ------------- - -- -- -
      ------------- - -------- ----------
    --

    ------ -
      --------
      --------------
    --
  --
---
---------

本题详细解读

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 编写类型安全的组件。