diff --git a/src/rate/README.md b/src/rate/README.md
index 7107672e3..30bb1d30c 100644
--- a/src/rate/README.md
+++ b/src/rate/README.md
@@ -19,11 +19,12 @@ app.use(Rate);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: 3,
-    };
+  setup() {
+    const value = ref(3);
+    return { value };
   },
 };
 ```
@@ -53,11 +54,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: 2.5,
-    };
+  setup() {
+    const value = ref(2.5);
+    return { value };
   },
 };
 ```
@@ -87,11 +89,19 @@ export default {
 ```
 
 ```javascript
+import { ref } from 'vue';
+import { Toast } from 'vant';
+
 export default {
-  method: {
-    onChange(value) {
+  setup() {
+    const value = ref(3);
+    const onChange = (value) => {
       Toast('current value:' + value);
-    },
+    };
+    return {
+      value,
+      onChange,
+    };
   },
 };
 ```
diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md
index 9ed73d96d..796808bce 100644
--- a/src/rate/README.zh-CN.md
+++ b/src/rate/README.zh-CN.md
@@ -23,11 +23,12 @@ app.use(Rate);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: 3,
-    };
+  setup() {
+    const value = ref(3);
+    return { value };
   },
 };
 ```
@@ -57,11 +58,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      value: 2.5,
-    };
+  setup() {
+    const value = ref(2.5);
+    return { value };
   },
 };
 ```
@@ -91,11 +93,19 @@ export default {
 ```
 
 ```javascript
+import { ref } from 'vue';
+import { Toast } from 'vant';
+
 export default {
-  method: {
-    onChange(value) {
+  setup() {
+    const value = ref(3);
+    const onChange = (value) => {
       Toast('当前值：' + value);
-    },
+    };
+    return {
+      value,
+      onChange,
+    };
   },
 };
 ```
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index ba85bfac0..74561ed57 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -45,6 +45,10 @@
 </template>
 
 <script>
+import { toRefs, reactive } from 'vue';
+import { useTranslate } from '../../composables/use-translate';
+import Toast from '../../toast';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -69,8 +73,9 @@ export default {
     },
   },
 
-  data() {
-    return {
+  setup() {
+    const t = useTranslate();
+    const state = reactive({
       value1: 3,
       value2: 3,
       value3: 3,
@@ -78,14 +83,17 @@ export default {
       value5: 4,
       value6: 3,
       value7: 2,
-    };
-  },
+    });
 
-  methods: {
-    onChange(value) {
-      this.value7 = value;
-      this.$toast(this.t('toastContent', value));
-    },
+    const onChange = (value) => {
+      Toast(t('toastContent', value));
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      onChange,
+    };
   },
 };
 </script>