diff --git a/src/address-edit/demo/index.vue b/src/address-edit/demo/index.vue
index 750cea351..556cd4de8 100644
--- a/src/address-edit/demo/index.vue
+++ b/src/address-edit/demo/index.vue
@@ -74,6 +74,7 @@ export default {
     };
 
     return {
+      t,
       onSave,
       onDelete,
       areaList,
diff --git a/src/address-list/README.md b/src/address-list/README.md
index c4b41a5cb..89f427699 100644
--- a/src/address-list/README.md
+++ b/src/address-list/README.md
@@ -27,44 +27,50 @@ app.use(AddressList);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      chosenAddressId: '1',
-      list: [
-        {
-          id: '1',
-          name: 'John Snow',
-          tel: '13000000000',
-          address: 'Somewhere',
-          isDefault: true,
-        },
-        {
-          id: '2',
-          name: 'Ned Stark',
-          tel: '1310000000',
-          address: 'Somewhere',
-        },
-      ],
-      disabledList: [
-        {
-          id: '3',
-          name: 'Tywin',
-          tel: '1320000000',
-          address: 'Somewhere',
-        },
-      ],
-    };
-  },
-  methods: {
-    onAdd() {
+  setup() {
+    const chosenAddressId = ref('1');
+    const list = [
+      {
+        id: '1',
+        name: 'John Snow',
+        tel: '13000000000',
+        address: 'Somewhere',
+        isDefault: true,
+      },
+      {
+        id: '2',
+        name: 'Ned Stark',
+        tel: '1310000000',
+        address: 'Somewhere',
+      },
+    ];
+    const disabledList = [
+      {
+        id: '3',
+        name: 'Tywin',
+        tel: '1320000000',
+        address: 'Somewhere',
+      },
+    ];
+
+    const onAdd = () => {
       Toast('Add');
-    },
-    onEdit(item, index) {
+    };
+    const onEdit = (item, index) => {
       Toast('Edit:' + index);
-    },
+    };
+
+    return {
+      list,
+      onAdd,
+      onEdit,
+      disabledList,
+      chosenAddressId,
+    };
   },
 };
 ```
diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md
index 6497de187..1277fc8bf 100644
--- a/src/address-list/README.zh-CN.md
+++ b/src/address-list/README.zh-CN.md
@@ -31,44 +31,50 @@ app.use(AddressList);
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      chosenAddressId: '1',
-      list: [
-        {
-          id: '1',
-          name: '张三',
-          tel: '13000000000',
-          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
-          isDefault: true,
-        },
-        {
-          id: '2',
-          name: '李四',
-          tel: '1310000000',
-          address: '浙江省杭州市拱墅区莫干山路 50 号',
-        },
-      ],
-      disabledList: [
-        {
-          id: '3',
-          name: '王五',
-          tel: '1320000000',
-          address: '浙江省杭州市滨江区江南大道 15 号',
-        },
-      ],
-    };
-  },
-  methods: {
-    onAdd() {
+  setup() {
+    const chosenAddressId = ref('1');
+    const list = [
+      {
+        id: '1',
+        name: '张三',
+        tel: '13000000000',
+        address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
+        isDefault: true,
+      },
+      {
+        id: '2',
+        name: '李四',
+        tel: '1310000000',
+        address: '浙江省杭州市拱墅区莫干山路 50 号',
+      },
+    ];
+    const disabledList = [
+      {
+        id: '3',
+        name: '王五',
+        tel: '1320000000',
+        address: '浙江省杭州市滨江区江南大道 15 号',
+      },
+    ];
+
+    const onAdd = () => {
       Toast('新增地址');
-    },
-    onEdit(item, index) {
+    };
+    const onEdit = (item, index) => {
       Toast('编辑地址:' + index);
-    },
+    };
+
+    return {
+      list,
+      onAdd,
+      onEdit,
+      disabledList,
+      chosenAddressId,
+    };
   },
 };
 ```
diff --git a/src/address-list/demo/index.vue b/src/address-list/demo/index.vue
index 3a8826e65..6293e0545 100644
--- a/src/address-list/demo/index.vue
+++ b/src/address-list/demo/index.vue
@@ -12,83 +12,89 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    list: [
+      {
+        id: '1',
+        name: '张三',
+        tel: '13000000000',
+        address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
+        isDefault: true,
+      },
+      {
+        id: '2',
+        name: '李四',
+        tel: '1310000000',
+        address: '浙江省杭州市拱墅区莫干山路 50 号',
+      },
+    ],
+    disabledList: [
+      {
+        id: '3',
+        name: '王五',
+        tel: '1320000000',
+        address: '浙江省杭州市滨江区江南大道 15 号',
+      },
+    ],
+    add: '新增地址',
+    edit: '编辑地址',
+    disabledText: '以下地址超出配送范围',
+    defaultTagText: '默认',
+  },
+  'en-US': {
+    list: [
+      {
+        id: '1',
+        name: 'John Snow',
+        tel: '13000000000',
+        address: 'Somewhere',
+        isDefault: true,
+      },
+      {
+        id: '2',
+        name: 'Ned Stark',
+        tel: '1310000000',
+        address: 'Somewhere',
+      },
+    ],
+    disabledList: [
+      {
+        id: '3',
+        name: 'Tywin',
+        tel: '1320000000',
+        address: 'Somewhere',
+      },
+    ],
+    add: 'Add',
+    edit: 'Edit',
+    disabledText: 'The following address is out of range',
+    defaultTagText: 'Default',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      list: [
-        {
-          id: '1',
-          name: '张三',
-          tel: '13000000000',
-          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
-          isDefault: true,
-        },
-        {
-          id: '2',
-          name: '李四',
-          tel: '1310000000',
-          address: '浙江省杭州市拱墅区莫干山路 50 号',
-        },
-      ],
-      disabledList: [
-        {
-          id: '3',
-          name: '王五',
-          tel: '1320000000',
-          address: '浙江省杭州市滨江区江南大道 15 号',
-        },
-      ],
-      add: '新增地址',
-      edit: '编辑地址',
-      disabledText: '以下地址超出配送范围',
-      defaultTagText: '默认',
-    },
-    'en-US': {
-      list: [
-        {
-          id: '1',
-          name: 'John Snow',
-          tel: '13000000000',
-          address: 'Somewhere',
-          isDefault: true,
-        },
-        {
-          id: '2',
-          name: 'Ned Stark',
-          tel: '1310000000',
-          address: 'Somewhere',
-        },
-      ],
-      disabledList: [
-        {
-          id: '3',
-          name: 'Tywin',
-          tel: '1320000000',
-          address: 'Somewhere',
-        },
-      ],
-      add: 'Add',
-      edit: 'Edit',
-      disabledText: 'The following address is out of range',
-      defaultTagText: 'Default',
-    },
-  },
-
-  data() {
-    return {
-      chosenAddressId: '1',
+  setup() {
+    const t = useTranslate(i18n);
+    const chosenAddressId = ref('1');
+    const onAdd = () => {
+      Toast(t('add'));
+    };
+    const onEdit = (item: unknown, index: number) => {
+      Toast(`${t('edit')}:${index}`);
     };
-  },
 
-  methods: {
-    onAdd() {
-      this.$toast(this.t('add'));
-    },
-
-    onEdit(item, index) {
-      this.$toast(`${this.t('edit')}:${index}`);
-    },
+    return {
+      t,
+      onAdd,
+      onEdit,
+      chosenAddressId,
+    };
   },
 };
 </script>