diff --git a/src/card/test/__snapshots__/demo.spec.js.snap b/src/card/test/__snapshots__/demo.spec.js.snap
index 567d0486e..73bed95eb 100644
--- a/src/card/test/__snapshots__/demo.spec.js.snap
+++ b/src/card/test/__snapshots__/demo.spec.js.snap
@@ -137,12 +137,12 @@ exports[`should render demo and match snapshot 1`] = `
           <div>
             <transition-stub style="margin-right: 5px;">
               <span class="van-tag van-tag--plain van-tag--danger">
-                标签
+                Tag
               </span>
             </transition-stub>
             <transition-stub>
               <span class="van-tag van-tag--plain van-tag--danger">
-                标签
+                Tag
               </span>
             </transition-stub>
           </div>
diff --git a/src/sidebar/README.md b/src/sidebar/README.md
index 76516bc36..c176b1a3f 100644
--- a/src/sidebar/README.md
+++ b/src/sidebar/README.md
@@ -16,7 +16,7 @@ app.use(SidebarItem);
 ### Basic Usage
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="Title" />
   <van-sidebar-item title="Title" />
   <van-sidebar-item title="Title" />
@@ -24,11 +24,12 @@ app.use(SidebarItem);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeKey: 0,
-    };
+  setup() {
+    const active = ref(0);
+    return { active };
   },
 };
 ```
@@ -36,17 +37,17 @@ export default {
 ### Show Badge
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="Title" dot />
   <van-sidebar-item title="Title" badge="5" />
-  <van-sidebar-item title="Title" badge="99+" />
+  <van-sidebar-item title="Title" badge="20" />
 </van-sidebar>
 ```
 
 ### Disabled
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="Title" />
   <van-sidebar-item title="Title" disabled />
   <van-sidebar-item title="Title" />
@@ -56,26 +57,28 @@ export default {
 ### Change Event
 
 ```html
-<van-sidebar v-model="activeKey" @change="onChange">
-  <van-sidebar-item title="Title1" />
-  <van-sidebar-item title="Title2" />
-  <van-sidebar-item title="Title3" />
+<van-sidebar v-model="active" @change="onChange">
+  <van-sidebar-item title="Title 1" />
+  <van-sidebar-item title="Title 2" />
+  <van-sidebar-item title="Title 3" />
 </van-sidebar>
 ```
 
 ```js
-import { Notify } from 'vant';
+import { ref } from 'vue';
+import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
+    const active = ref(0);
+    const onChange = (index) => {
+      Toast(`Title ${index + 1}`);
+    };
+
     return {
-      activeKey: 0,
+      active,
+      onChange,
     };
-  },
-  methods: {
-    onChange(index) {
-      Notify({ type: 'primary', message: index });
-    },
   },
 };
 ```
diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md
index f27e1ea0e..cedc07b1e 100644
--- a/src/sidebar/README.zh-CN.md
+++ b/src/sidebar/README.zh-CN.md
@@ -18,7 +18,7 @@ app.use(SidebarItem);
 通过 `v-model` 绑定当前选中项的索引。
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" />
@@ -26,11 +26,12 @@ app.use(SidebarItem);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      activeKey: 0,
-    };
+  setup() {
+    const active = ref(0);
+    return { active };
   },
 };
 ```
@@ -40,10 +41,10 @@ export default {
 设置 `dot` 属性后，会在右上角展示一个小红点；设置 `badge` 属性后，会在右上角展示相应的徽标。
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="标签名称" dot />
   <van-sidebar-item title="标签名称" badge="5" />
-  <van-sidebar-item title="标签名称" badge="99+" />
+  <van-sidebar-item title="标签名称" badge="20" />
 </van-sidebar>
 ```
 
@@ -52,7 +53,7 @@ export default {
 通过 `disabled` 属性禁用选项。
 
 ```html
-<van-sidebar v-model="activeKey">
+<van-sidebar v-model="active">
   <van-sidebar-item title="标签名称" />
   <van-sidebar-item title="标签名称" disabled />
   <van-sidebar-item title="标签名称" />
@@ -64,26 +65,28 @@ export default {
 设置 `change` 方法来监听切换导航项时的事件。
 
 ```html
-<van-sidebar v-model="activeKey" @change="onChange">
-  <van-sidebar-item title="标签名1" />
-  <van-sidebar-item title="标签名2" />
-  <van-sidebar-item title="标签名3" />
+<van-sidebar v-model="active" @change="onChange">
+  <van-sidebar-item title="标签名 1" />
+  <van-sidebar-item title="标签名 2" />
+  <van-sidebar-item title="标签名 3" />
 </van-sidebar>
 ```
 
 ```js
-import { Notify } from 'vant';
+import { ref } from 'vue';
+import { Toast } from 'vant';
 
 export default {
-  data() {
+  setup() {
+    const active = ref(0);
+    const onChange = (index) => {
+      Toast(`标签名 ${index + 1}`);
+    };
+
     return {
-      activeKey: 0,
+      active,
+      onChange,
     };
-  },
-  methods: {
-    onChange(index) {
-      Notify({ type: 'primary', message: index });
-    },
   },
 };
 ```
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index c82b67f14..4bd42b640 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -2,7 +2,7 @@
   <van-grid :column-num="2" :border="false">
     <van-grid-item>
       <h3 class="demo-sidebar-title">{{ t('basicUsage') }}</h3>
-      <van-sidebar v-model="activeKey1">
+      <van-sidebar v-model="active1">
         <van-sidebar-item :title="t('title')" />
         <van-sidebar-item :title="t('title')" />
         <van-sidebar-item :title="t('title')" />
@@ -11,16 +11,16 @@
 
     <van-grid-item>
       <h3 class="demo-sidebar-title">{{ t('showBadge') }}</h3>
-      <van-sidebar v-model="activeKey2">
+      <van-sidebar v-model="active2">
         <van-sidebar-item :title="t('title')" dot />
         <van-sidebar-item :title="t('title')" badge="5" />
-        <van-sidebar-item :title="t('title')" badge="99+" />
+        <van-sidebar-item :title="t('title')" badge="20" />
       </van-sidebar>
     </van-grid-item>
 
     <van-grid-item>
       <h3 class="demo-sidebar-title">{{ t('disabled') }}</h3>
-      <van-sidebar v-model="activeKey3">
+      <van-sidebar v-model="active3">
         <van-sidebar-item :title="t('title')" />
         <van-sidebar-item :title="t('title')" disabled />
         <van-sidebar-item :title="t('title')" />
@@ -29,49 +29,53 @@
 
     <van-grid-item>
       <h3 class="demo-sidebar-title">{{ t('changeEvent') }}</h3>
-      <van-sidebar v-model="activeKey4" @change="onChange">
-        <van-sidebar-item :title="t('title') + 1" />
-        <van-sidebar-item :title="t('title') + 2" />
-        <van-sidebar-item :title="t('title') + 3" />
+      <van-sidebar v-model="active4" @change="onChange">
+        <van-sidebar-item :title="`${t('title')} 1`" />
+        <van-sidebar-item :title="`${t('title')} 2`" />
+        <van-sidebar-item :title="`${t('title')} 3`" />
       </van-sidebar>
     </van-grid-item>
   </van-grid>
 </template>
 
-<script>
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    title: '标签名',
+    disabled: '禁用选项',
+    showBadge: '徽标提示',
+    changeEvent: '监听切换事件',
+  },
+  'en-US': {
+    disabled: 'Disabled',
+    showBadge: 'Show Badge',
+    changeEvent: 'Change Event',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      title: '标签名',
-      showBadge: '徽标提示',
-      disabled: '禁用选项',
-      changeEvent: '监听切换事件',
-      selectTip: '你切换到了',
-    },
-    'en-US': {
-      showBadge: 'Show Badge',
-      disabled: 'Disabled',
-      changeEvent: 'Change Event',
-      selectTip: 'You select ',
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
+      active1: 0,
+      active2: 0,
+      active3: 0,
+      active4: 0,
+    });
 
-  data() {
-    return {
-      activeKey1: 0,
-      activeKey2: 0,
-      activeKey3: 0,
-      activeKey4: 0,
+    const onChange = (index: number) => {
+      Toast(`${t('title')} ${index + 1}`);
     };
-  },
 
-  methods: {
-    onChange(index) {
-      this.$notify({
-        type: 'primary',
-        message: `${this.t('selectTip')} ${this.t('title')}${index + 1}`,
-      });
-    },
+    return {
+      ...toRefs(state),
+      t,
+      onChange,
+    };
   },
 };
 </script>
diff --git a/src/sidebar/test/__snapshots__/demo.spec.js.snap b/src/sidebar/test/__snapshots__/demo.spec.js.snap
index d7a1e809b..6f3baf230 100644
--- a/src/sidebar/test/__snapshots__/demo.spec.js.snap
+++ b/src/sidebar/test/__snapshots__/demo.spec.js.snap
@@ -55,7 +55,7 @@ exports[`should render demo and match snapshot 1`] = `
           <div class="van-badge__wrapper van-sidebar-item__text">
             Title
             <div class="van-badge van-badge--fixed">
-              99+
+              20
             </div>
           </div>
         </a>
@@ -98,17 +98,17 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-sidebar">
         <a class="van-sidebar-item van-sidebar-item--select">
           <div class="van-badge__wrapper van-sidebar-item__text">
-            Title1
+            Title 1
           </div>
         </a>
         <a class="van-sidebar-item">
           <div class="van-badge__wrapper van-sidebar-item__text">
-            Title2
+            Title 2
           </div>
         </a>
         <a class="van-sidebar-item">
           <div class="van-badge__wrapper van-sidebar-item__text">
-            Title3
+            Title 3
           </div>
         </a>
       </div>