diff --git a/src/contact-list/README.md b/src/contact-list/README.md
index bb4ecea18..85f73b585 100644
--- a/src/contact-list/README.md
+++ b/src/contact-list/README.md
@@ -26,11 +26,12 @@ app.use(ContactList);
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       chosenContactId: '1',
       list: [
         {
@@ -45,18 +46,24 @@ export default {
           tel: '1310000000',
         },
       ],
-    };
-  },
-  methods: {
-    onAdd() {
+    });
+
+    const onAdd = () => {
       Toast('Add');
-    },
-    onEdit(contact) {
+    };
+    const onEdit = (contact) => {
       Toast('Edit' + contact.id);
-    },
-    onSelect(contact) {
+    };
+    const onSelect = (contact) => {
       Toast('Select' + contact.id);
-    },
+    };
+
+    return {
+      state,
+      onAdd,
+      onEdit,
+      onSelect,
+    };
   },
 };
 ```
diff --git a/src/contact-list/README.zh-CN.md b/src/contact-list/README.zh-CN.md
index 528767fb1..9e0161285 100644
--- a/src/contact-list/README.zh-CN.md
+++ b/src/contact-list/README.zh-CN.md
@@ -20,8 +20,8 @@ app.use(ContactList);
 
 ```html
 <van-contact-list
-  v-model="chosenContactId"
-  :list="list"
+  v-model="state.chosenContactId"
+  :list="state.list"
   default-tag-text="默认"
   @add="onAdd"
   @edit="onEdit"
@@ -30,11 +30,12 @@ app.use(ContactList);
 ```
 
 ```js
+import { reactive } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       chosenContactId: '1',
       list: [
         {
@@ -49,18 +50,24 @@ export default {
           tel: '1310000000',
         },
       ],
-    };
-  },
-  methods: {
-    onAdd() {
+    });
+
+    const onAdd = () => {
       Toast('新增');
-    },
-    onEdit(contact) {
+    };
+    const onEdit = (contact) => {
       Toast('编辑' + contact.id);
-    },
-    onSelect(contact) {
+    };
+    const onSelect = (contact) => {
       Toast('选择' + contact.id);
-    },
+    };
+
+    return {
+      state,
+      onAdd,
+      onEdit,
+      onSelect,
+    };
   },
 };
 ```
diff --git a/src/contact-list/demo/index.vue b/src/contact-list/demo/index.vue
index 948980174..6dcd6f1e0 100644
--- a/src/contact-list/demo/index.vue
+++ b/src/contact-list/demo/index.vue
@@ -11,65 +11,74 @@
   </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': {
+    add: '新增',
+    edit: '编辑',
+    list: [
+      {
+        id: '1',
+        name: '张三',
+        tel: '13000000000',
+        isDefault: true,
+      },
+      {
+        id: '2',
+        name: '李四',
+        tel: '1310000000',
+      },
+    ],
+    select: '选择',
+    defaultTagText: '默认',
+  },
+  'en-US': {
+    add: 'Add',
+    edit: 'Edit',
+    list: [
+      {
+        id: '1',
+        name: 'John Snow',
+        tel: '13000000000',
+        isDefault: true,
+      },
+      {
+        id: '2',
+        name: 'Ned Stark',
+        tel: '1310000000',
+      },
+    ],
+    select: 'Select',
+    defaultTagText: 'default',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      add: '新增',
-      edit: '编辑',
-      list: [
-        {
-          id: '1',
-          name: '张三',
-          tel: '13000000000',
-          isDefault: true,
-        },
-        {
-          id: '2',
-          name: '李四',
-          tel: '1310000000',
-        },
-      ],
-      select: '选择',
-      defaultTagText: '默认',
-    },
-    'en-US': {
-      add: 'Add',
-      edit: 'Edit',
-      list: [
-        {
-          id: '1',
-          name: 'John Snow',
-          tel: '13000000000',
-          isDefault: true,
-        },
-        {
-          id: '2',
-          name: 'Ned Stark',
-          tel: '1310000000',
-        },
-      ],
-      select: 'Select',
-      defaultTagText: 'default',
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const chosenContactId = ref('1');
 
-  data() {
-    return {
-      chosenContactId: '1',
+    const onAdd = () => {
+      Toast(t('add'));
+    };
+    const onEdit = (contact: { id: string }) => {
+      Toast(t('edit') + contact.id);
+    };
+    const onSelect = (contact: { id: string }) => {
+      Toast(t('select') + contact.id);
     };
-  },
 
-  methods: {
-    onAdd() {
-      this.$toast(this.t('add'));
-    },
-    onEdit(contact) {
-      this.$toast(this.t('edit') + contact.id);
-    },
-    onSelect(contact) {
-      this.$toast(this.t('select') + contact.id);
-    },
+    return {
+      t,
+      onAdd,
+      onEdit,
+      onSelect,
+      chosenContactId,
+    };
   },
 };
 </script>
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index 341b6c385..dba7a870d 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -82,7 +82,6 @@ const i18n = {
     customColor: '自定义颜色',
     matchByName: '通过名称匹配',
     switchEvent: '监听切换事件',
-    selectTip: '你切换到了',
   },
   'en-US': {
     badge: 'Show Badge',
@@ -90,7 +89,6 @@ const i18n = {
     customColor: 'Custom Color',
     matchByName: 'Match by name',
     switchEvent: 'Change Event',
-    selectTip: 'You select ',
   },
 };