vue3 +ts应该怎么写一个 响应式数据 例如 [{address: "2"},{address: "3"},{address: "4"}]

在 Vue 3 中结合 TypeScript 使用响应式数据，可以利用 Vue 的声明式语法以及 Vue 的 `ref` 和 `reactive` 功能。假设我们有一个数组模型，包含地址信息，你可以这样做：

首先，安装 Vue 和 TypeScript：

npm install vue@next ts-loader @types/vue

然后，在 TypeScript 文件中，定义一个响应式的数组类型：

import { Ref } from 'vue';

interface AddressItem {
  address: string;
}

type Addresses = Array<Ref<AddressItem>>;

let addressesData: Addresses = [
  ref({ address: '2' }),
  ref({ address: '3' }),
  ref({ address: '4' }),
];

这里，`Ref` 是 Vue 提供的一个包装对象，它可以让你在 Vue 的模板里直接访问到数据，并且自动维护响应式。

接下来，在 Vue 组件里，你可以像操作普通变量一样处理这个数组：

<template>
  <div v-for="item in addressesData" :key="item.key">
    {{ item.value.address }}
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    return {
      addressesData,
    };
  },
};
</script>

当你修改 `addressesData` 中任一元素的值，视图会实时更新。