diff --git a/src/tab/README.md b/src/tab/README.md
index 5417dd81d..7aba05046 100644
--- a/src/tab/README.md
+++ b/src/tab/README.md
@@ -26,11 +26,12 @@ The first tab is actived by default, you can set `v-model:active` to active spec
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      active: 2,
-    };
+  setup() {
+    const active = ref(2);
+    return { active };
   },
 };
 ```
@@ -46,11 +47,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeName: 'a',
-    };
+  setup() {
+    const activeName = ref('a');
+    return { activeName };
   },
 };
 ```
@@ -83,10 +85,14 @@ You can set `disabled` attribute on the corresponding `van-tab`.
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onClickDisabled(name, title) {
-      Toast(title + ' is disabled');
-    },
+  setup() {
+    const onClickDisabled = (name, title) => {
+      Toast(name + ' is disabled');
+    };
+
+    return {
+      onClickDisabled,
+    };
   },
 };
 ```
@@ -117,10 +123,14 @@ Tabs styled as cards.
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onClick(name, title) {
+  setup() {
+    const onClick = (name, title) => {
       Toast(title);
-    },
+    };
+
+    return {
+      onClick,
+    };
   },
 };
 ```
@@ -198,8 +208,8 @@ In scrollspy mode, the list of content will be tiled.
 
 ```js
 export default {
-  methods: {
-    beforeChange(index) {
+  setup() {
+    const beforeChange = (index) => {
       // prevent change
       if (index === 1) {
         return false;
@@ -209,7 +219,11 @@ export default {
       return new Promise((resolve) => {
         resolve(index !== 3);
       });
-    },
+    };
+
+    return {
+      beforeChange,
+    };
   },
 };
 ```
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index 7f8732712..c193ee021 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -27,11 +27,12 @@ app.use(Tabs);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      active: 2,
-    };
+  setup() {
+    const active = ref(2);
+    return { active };
   },
 };
 ```
@@ -49,11 +50,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeName: 'a',
-    };
+  setup() {
+    const activeName = ref('a');
+    return { activeName };
   },
 };
 ```
@@ -86,10 +88,14 @@ export default {
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onClickDisabled(name, title) {
+  setup() {
+    const onClickDisabled = (name, title) => {
       Toast(name + '已被禁用');
-    },
+    };
+
+    return {
+      onClickDisabled,
+    };
   },
 };
 ```
@@ -121,10 +127,14 @@ export default {
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onClick(name, title) {
+  setup() {
+    const onClick = (name, title) => {
       Toast(title);
-    },
+    };
+
+    return {
+      onClick,
+    };
   },
 };
 ```
@@ -204,8 +214,8 @@ export default {
 
 ```js
 export default {
-  methods: {
-    beforeChange(index) {
+  setup() {
+    const beforeChange = (index) => {
       // 返回 false 表示阻止此次切换
       if (index === 1) {
         return false;
@@ -216,7 +226,11 @@ export default {
         // 在 resolve 函数中返回 true 或 false
         resolve(index !== 3);
       });
-    },
+    };
+
+    return {
+      beforeChange,
+    };
   },
 };
 ```
diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue
index cd3a6f628..1bd392713 100644
--- a/src/tab/demo/index.vue
+++ b/src/tab/demo/index.vue
@@ -102,68 +102,80 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
-    'zh-CN': {
-      tab: '标签 ',
-      title2: '标签栏滚动',
-      title3: '禁用标签',
-      title4: '样式风格',
-      title5: '点击事件',
-      title6: '粘性布局',
-      title7: '自定义标签',
-      title8: '切换动画',
-      title9: '滑动切换',
-      title10: '滚动导航',
-      disabled: ' 已被禁用',
-      matchByName: '通过名称匹配',
-      beforeChange: '异步切换',
-    },
-    'en-US': {
-      tab: 'Tab ',
-      content: 'content of tab',
-      title2: 'Swipe Tabs',
-      title3: 'Disabled Tab',
-      title4: 'Card Style',
-      title5: 'Click Event',
-      title6: 'Sticky',
-      title7: 'Custom Tab',
-      title8: 'Switch Animation',
-      title9: 'Swipeable',
-      title10: 'Scrollspy',
-      disabled: ' is disabled',
-      matchByName: 'Match By Name',
-      beforeChange: 'Before Change',
-    },
-  },
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    tab: '标签 ',
+    title2: '标签栏滚动',
+    title3: '禁用标签',
+    title4: '样式风格',
+    title5: '点击事件',
+    title6: '粘性布局',
+    title7: '自定义标签',
+    title8: '切换动画',
+    title9: '滑动切换',
+    title10: '滚动导航',
+    disabled: ' 已被禁用',
+    matchByName: '通过名称匹配',
+    beforeChange: '异步切换',
+  },
+  'en-US': {
+    tab: 'Tab ',
+    content: 'content of tab',
+    title2: 'Swipe Tabs',
+    title3: 'Disabled Tab',
+    title4: 'Card Style',
+    title5: 'Click Event',
+    title6: 'Sticky',
+    title7: 'Custom Tab',
+    title8: 'Switch Animation',
+    title9: 'Swipeable',
+    title10: 'Scrollspy',
+    disabled: ' is disabled',
+    matchByName: 'Match By Name',
+    beforeChange: 'Before Change',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       active: 2,
       activeName: 'b',
-      tabs: [1, 2, 3, 4],
+    });
+
+    const tabs = [1, 2, 3, 4];
+
+    const onClick = (index: number, title: string) => {
+      Toast(title);
     };
-  },
 
-  methods: {
-    onClickDisabled(index, title) {
-      this.$toast(title + this.t('disabled'));
-    },
+    const onClickDisabled = (index: number, title: string) => {
+      Toast(title + t('disabled'));
+    };
 
-    onClick(index, title) {
-      this.$toast(title);
-    },
-
-    beforeChange(name) {
+    const beforeChange = (name: number) => {
       if (name === 1) {
         return false;
       }
-
       return new Promise((resolve) => {
         resolve(name !== 3);
       });
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      tabs,
+      onClick,
+      beforeChange,
+      onClickDisabled,
+    };
   },
 };
 </script>