diff --git a/src/stepper/README.md b/src/stepper/README.md
index dbeded5d3..9358fe55a 100644
--- a/src/stepper/README.md
+++ b/src/stepper/README.md
@@ -19,11 +19,12 @@ app.use(Stepper);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: 1,
-    };
+  setup() {
+    const value = ref(1);
+    return { value };
   },
 };
 ```
@@ -77,24 +78,29 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      value: 1,
-    };
-  },
-  methods: {
-    onChange(value) {
+  setup() {
+    const value = ref(1);
+
+    let timer;
+    const onChange = (newValue) => {
+      if (newValue === value.value) {
+        return;
+      }
+
       Toast.loading({ forbidClick: true });
 
       clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
+      timer = setTimeout(() => {
         Toast.clear();
-        this.value = value;
+        value.value = newValue;
       }, 500);
-    },
+    };
+
+    return { value };
   },
 };
 ```
diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md
index 2328264fe..b57bcbf14 100644
--- a/src/stepper/README.zh-CN.md
+++ b/src/stepper/README.zh-CN.md
@@ -25,11 +25,12 @@ app.use(Stepper);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: 1,
-    };
+  setup() {
+    const value = ref(1);
+    return { value };
   },
 };
 ```
@@ -99,25 +100,29 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
 import { Toast } from 'vant';
 
 export default {
-  data() {
-    return {
-      value: 1,
-    };
-  },
-  methods: {
-    onChange(value) {
+  setup() {
+    const value = ref(1);
+
+    let timer;
+    const onChange = (newValue) => {
+      if (newValue === value.value) {
+        return;
+      }
+
       Toast.loading({ forbidClick: true });
 
       clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
+      timer = setTimeout(() => {
         Toast.clear();
-        // 注意此时修改 value 后会再次触发 change 事件
-        this.value = value;
+        value.value = newValue;
       }, 500);
-    },
+    };
+
+    return { value };
   },
 };
 ```
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index b38603ffe..ac46f0445 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -46,6 +46,9 @@
 </template>
 
 <script>
+import { reactive, toRefs } from 'vue';
+import Toast from '../../toast';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -70,8 +73,8 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const state = reactive({
       stepper1: 1,
       stepper2: 1,
       stepper3: 1,
@@ -82,19 +85,27 @@ export default {
       stepper8: 1,
       stepperRound: 1,
       disabledInput: 1,
-    };
-  },
+    });
 
-  methods: {
-    onChange(value) {
-      this.$toast.loading({ forbidClick: true });
+    let timer;
+    const onChange = (newValue) => {
+      if (newValue === state.stepper6) {
+        return;
+      }
 
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
-        this.stepper6 = value;
-        this.$toast.clear();
+      Toast.loading({ forbidClick: true });
+
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        state.stepper6 = newValue;
+        Toast.clear();
       }, 500);
-    },
+    };
+
+    return {
+      ...toRefs(state),
+      onChange,
+    };
   },
 };
 </script>