vue3+ts定义响应式数据

在 Vue 3 中，你可以使用 TypeScript 来定义响应式数据。Vue 3 引入了一个新的函数 `reactive`，它接收一个对象作为参数，并返回一个响应式的代理对象。以下是一个示例：

import { reactive } from 'vue';

interface UserData {
  name: string;
  age: number;
}

const userData: UserData = reactive({
  name: 'John',
  age: 25,
});

在上面的例子中，我们使用了 `reactive` 函数将 `userData` 对象转换为响应式代理对象。你可以像使用普通对象一样访问和修改其属性，但任何对属性的修改都将触发依赖更新。

需要注意的是，当你使用 TypeScript 定义响应式数据时，你可以使用接口或类型别名来定义数据的结构和类型。这有助于提供类型检查和自动补全的功能。