diff --git a/packages/varlet-ui/src/checkbox-group/example/index.vue b/packages/varlet-ui/src/checkbox-group/example/index.vue
index 2541fa74444..0e97d3303fb 100644
--- a/packages/varlet-ui/src/checkbox-group/example/index.vue
+++ b/packages/varlet-ui/src/checkbox-group/example/index.vue
@@ -59,7 +59,7 @@ import Icon from '../../icon'
 import Button from '../../button'
 import Row from '../../row'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { watchLang } from '../../utils/components'
 import { use, pack } from './locale'
 
@@ -74,29 +74,23 @@ export default {
     AppType,
   },
   setup() {
-    const value = ref(false)
-    const value2 = ref(0)
-    const value3 = ref(false)
-    const value4 = ref(false)
-    const value5 = ref(false)
-    const value6 = ref([])
-    const group = ref(null)
-    const value7 = ref(false)
-    const value8 = ref([])
+    const values = reactive({
+      value: false,
+      value2: 0,
+      value3: false,
+      value4: false,
+      value5: false,
+      value6: [],
+      value7: false,
+      value8: [],
+      group: null
+    })
 
     watchLang(use)
 
     return {
       pack,
-      value,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      group,
-      value7,
-      value8,
+      ...toRefs(values)
     }
   },
 }
diff --git a/packages/varlet-ui/src/collapse/example/index.vue b/packages/varlet-ui/src/collapse/example/index.vue
index c6bae8d056c..b5918bd779d 100644
--- a/packages/varlet-ui/src/collapse/example/index.vue
+++ b/packages/varlet-ui/src/collapse/example/index.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Collapse from '..'
 import CollapseItem from '../../collapse-item'
@@ -67,12 +67,14 @@ export default defineComponent({
     AppType,
   },
   setup() {
-    const disabled = ref(false)
-    const value = ref(['1'])
-    const value1 = ref('')
-    const value2 = ref([1])
-    const value3 = ref(['1'])
-    const value4 = ref(['2'])
+    const values = reactive({
+      disabled: false,
+      value: ['1'],
+      value1: '',
+      value2: [1],
+      value3: ['1'],
+      value4: ['2'],
+    })
 
     const changeHandle = (val) => {
       console.log(val)
@@ -81,12 +83,7 @@ export default defineComponent({
     watchLang(use)
 
     return {
-      disabled,
-      value,
-      value1,
-      value2,
-      value3,
-      value4,
+      ...toRefs(values),
       pack,
       changeHandle,
     }
diff --git a/packages/varlet-ui/src/counter/example/index.vue b/packages/varlet-ui/src/counter/example/index.vue
index 24b2c87c845..3f9b63cb7c8 100644
--- a/packages/varlet-ui/src/counter/example/index.vue
+++ b/packages/varlet-ui/src/counter/example/index.vue
@@ -32,7 +32,7 @@
 <script>
 import Counter from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { watchLang } from '../../utils/components'
 import { use, pack } from './locale'
 
@@ -43,15 +43,17 @@ export default {
     AppType,
   },
   setup() {
-    const value = ref(0)
-    const value2 = ref(0)
-    const value3 = ref(0)
-    const value4 = ref(0)
-    const value5 = ref(0)
-    const value6 = ref(0)
-    const value7 = ref(0)
-    const value8 = ref(0)
-    const value9 = ref(0)
+    const values = reactive({
+      value: 0,
+      value2: 0,
+      value3: 0,
+      value4: 0,
+      value5: 0,
+      value6: 0,
+      value7: 0,
+      value8: 0,
+      value9: 0,
+    })
 
     const handleBeforeChange = (value, change) => {
       setTimeout(() => {
@@ -63,15 +65,7 @@ export default {
 
     return {
       pack,
-      value,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      value7,
-      value8,
-      value9,
+      ...toRefs(values),
       handleBeforeChange,
     }
   },
diff --git a/packages/varlet-ui/src/date-picker/example/index.vue b/packages/varlet-ui/src/date-picker/example/index.vue
index 3c02c031257..1d002ab2970 100644
--- a/packages/varlet-ui/src/date-picker/example/index.vue
+++ b/packages/varlet-ui/src/date-picker/example/index.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import DatePicker from '..'
 import { pack, use } from './locale'
@@ -57,12 +57,15 @@ export default defineComponent({
     [DatePicker.name]: DatePicker,
   },
   setup() {
-    const date = ref('2021-01')
-    const date1 = ref('2021-04-08')
-    const date2 = ref(['', ''])
-    const date3 = ref(['2021-02-01', '2021-02-15'])
-    const date4 = ref('2020-11-11')
-    const date5 = ref('2021-02')
+    const dates = reactive({
+      date: '2021-01',
+      date1: '2021-04-08',
+      date2: ['', ''],
+      date3: ['2021-02-01', '2021-02-15'],
+      date4: '2020-11-11',
+      date5: '2021-02',
+    })
+
     const allowedDates = (val) => {
       return parseInt(val.split('-')[1], 10) % 2 === 1
     }
@@ -76,13 +79,8 @@ export default defineComponent({
     watchLang(use)
 
     return {
+      ...toRefs(dates),
       pack,
-      date,
-      date1,
-      date2,
-      date3,
-      date4,
-      date5,
       change,
       allowedDates,
       allowedDates1,
diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
index d1aa97be485..20e3c522161 100644
--- a/packages/varlet-ui/src/dialog/example/index.vue
+++ b/packages/varlet-ui/src/dialog/example/index.vue
@@ -39,7 +39,7 @@ import Icon from '../../icon'
 import Snackbar from '../../snackbar'
 import Cell from '../../cell'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang } from '../../utils/components'
 
@@ -53,10 +53,12 @@ export default {
     AppType,
   },
   setup() {
-    const show = ref(false)
-    const show1 = ref(false)
-    const show2 = ref(false)
-    const value = ref('')
+    const values = reactive({
+      show: false,
+      show1: false,
+      show2: false,
+      value: ''
+    })
 
     const actions = {
       confirm: () => Snackbar.success('confirm'),
@@ -106,10 +108,7 @@ export default {
 
     return {
       pack,
-      show,
-      show1,
-      show2,
-      value,
+      ...toRefs(values),
       asyncClose,
       createBasic,
       createAction,
diff --git a/packages/varlet-ui/src/form-details/example/index.vue b/packages/varlet-ui/src/form-details/example/index.vue
index f71bcb6c5c5..8256620dabf 100644
--- a/packages/varlet-ui/src/form-details/example/index.vue
+++ b/packages/varlet-ui/src/form-details/example/index.vue
@@ -13,9 +13,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.example {
-	background: antiquewhite;
-}
-</style>
diff --git a/packages/varlet-ui/src/input/example/index.vue b/packages/varlet-ui/src/input/example/index.vue
index 433151d2cf8..d431649472c 100644
--- a/packages/varlet-ui/src/input/example/index.vue
+++ b/packages/varlet-ui/src/input/example/index.vue
@@ -41,7 +41,7 @@ import Input from '..'
 import Button from '../../button'
 import Icon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { use, pack } from './locale'
 import { watchLang } from '../../utils/components'
 
@@ -54,32 +54,26 @@ export default {
     AppType,
   },
   setup() {
-    const value = ref('')
-    const value2 = ref('')
-    const value3 = ref('')
-    const value4 = ref('')
-    const value5 = ref('')
-    const value6 = ref('')
-    const value7 = ref('')
-    const value8 = ref('')
-    const value9 = ref('')
+    const values = reactive({
+      value: '',
+      value2: '',
+      value3: '',
+      value4: '',
+      value5: '',
+      value6: '',
+      value7: '',
+      value8: '',
+      value9: '',
+    })
 
     watchLang((lang) => {
       use(lang)
-      value5.value = pack.value.clearableText
+      values.value5 = pack.value.clearableText
     })
 
     return {
       pack,
-      value,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      value7,
-      value8,
-      value9,
+      ...toRefs(values)
     }
   },
 }
diff --git a/packages/varlet-ui/src/list/example/index.vue b/packages/varlet-ui/src/list/example/index.vue
index 6eb3450c187..790a4b67d0d 100644
--- a/packages/varlet-ui/src/list/example/index.vue
+++ b/packages/varlet-ui/src/list/example/index.vue
@@ -38,7 +38,7 @@ import Tabs from '../../tabs'
 import Tab from '../../tab'
 import TabsItems from '../../tabs-items'
 import TabItem from '../../tab-item'
-import { ref, reactive } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { watchLang } from '../../utils/components'
 import { use, pack } from './locale'
 
@@ -53,72 +53,63 @@ export default {
     [TabItem.name]: TabItem,
   },
   setup() {
-    const loading = ref(false)
-    const loading2 = ref(false)
-    const loading3 = ref(false)
-    const finished = ref(false)
-    const finished2 = ref(false)
-    const finished3 = ref(false)
-    const error = ref(false)
-    const list = reactive([])
-    const list2 = reactive([])
-    const list3 = reactive([])
-
-    const current = ref(0)
+    const values = reactive({
+      loading: false,
+      loading2: false,
+      loading3: false,
+      finished: false,
+      finished2: false,
+      finished3: false,
+      error: false,
+      list: [],
+      list2: [],
+      list3: [],
+      current: 0
+    })
 
     watchLang(use)
 
     return {
       pack,
-      current,
-      error,
-      list,
-      list2,
-      list3,
-      loading,
-      loading2,
-      loading3,
-      finished,
-      finished2,
-      finished3,
+      ...toRefs(values),
       load() {
         setTimeout(() => {
           for (let i = 0; i < 20; i++) {
-            list.push(list.length + 1)
+            values.list.push(values.list.length + 1)
           }
 
-          loading.value = false
+          values.loading = false
 
-          if (list.length >= 60) {
-            finished.value = true
+          if (values.list.length >= 60) {
+            values.finished = true
           }
         }, 1000)
       },
       load2() {
         setTimeout(() => {
-          if (list2.length === 40) {
-            error.value = true
-            loading2.value = false
+          if (values.list2.length === 40) {
+            values.error = true
+            values.loading2 = false
             return
           }
 
           for (let i = 0; i < 20; i++) {
-            list2.push(list2.length + 1)
+            values.list2.push(values.list2.length + 1)
           }
 
-          loading2.value = false
+          values.loading2 = false
         }, 1000)
       },
       load3() {
         setTimeout(() => {
           for (let i = 0; i < 20; i++) {
-            list3.push(list3.length + 1)
+            values.list3.push(values.list3.length + 1)
           }
 
-          loading3.value = false
+          values.loading3 = false
 
-          if (list3.length >= 60) {
-            finished3.value = true
+          if (values.list3.length >= 60) {
+            values.finished3 = true
           }
         }, 1000)
       },
diff --git a/packages/varlet-ui/src/menu/example/index.vue b/packages/varlet-ui/src/menu/example/index.vue
index 8f2df3bb538..5a2a3c73b0e 100644
--- a/packages/varlet-ui/src/menu/example/index.vue
+++ b/packages/varlet-ui/src/menu/example/index.vue
@@ -111,7 +111,7 @@ import Cell from '../../cell'
 import Snackbar from '../../snackbar'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import context from '../../context'
-import { onUnmounted, ref } from 'vue'
+import { onUnmounted, reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform } from '../../utils/components'
 
@@ -124,13 +124,15 @@ export default {
     AppType,
   },
   setup() {
-    const top = ref(false)
-    const bottom = ref(false)
-    const offsetX = ref(false)
-    const offsetX1 = ref(false)
-    const offsetY = ref(false)
-    const offsetY1 = ref(false)
-    const event = ref(false)
+    const values = reactive({
+      top: false,
+      bottom: false,
+      offsetX: false,
+      offsetX1: false,
+      offsetY: false,
+      offsetY1: false,
+      event: false,
+    })
 
     watchLang(use)
 
@@ -146,13 +148,7 @@ export default {
 
     return {
       pack,
-      top,
-      bottom,
-      offsetX,
-      offsetX1,
-      offsetY,
-      offsetY1,
-      event,
+      ...toRefs(values),
       Snackbar,
     }
   },
diff --git a/packages/varlet-ui/src/option/example/index.vue b/packages/varlet-ui/src/option/example/index.vue
index 1ad7916e64f..6db60611b9e 100644
--- a/packages/varlet-ui/src/option/example/index.vue
+++ b/packages/varlet-ui/src/option/example/index.vue
@@ -13,9 +13,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.example {
-	background: antiquewhite;
-}
-</style>
diff --git a/packages/varlet-ui/src/popup/example/index.vue b/packages/varlet-ui/src/popup/example/index.vue
index 1267f62bb85..3dd9f726416 100644
--- a/packages/varlet-ui/src/popup/example/index.vue
+++ b/packages/varlet-ui/src/popup/example/index.vue
@@ -55,7 +55,7 @@ import Button from '../../button'
 import Snackbar from '../../snackbar'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { watchLang } from '../../utils/components'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 
 export default {
@@ -66,27 +66,22 @@ export default {
     AppType,
   },
   setup() {
-    const center = ref(false)
-    const top = ref(false)
-    const bottom = ref(false)
-    const left = ref(false)
-    const right = ref(false)
-    const overlayClass = ref(false)
-    const overlayStyle = ref(false)
-    const event = ref(false)
+    const values = reactive({
+      center: false,
+      top: false,
+      bottom: false,
+      left: false,
+      right: false,
+      overlayClass: false,
+      overlayStyle: false,
+      event: false,
+    })
 
     watchLang(use)
 
     return {
       pack,
-      center,
-      top,
-      bottom,
-      left,
-      right,
-      overlayClass,
-      overlayStyle,
-      event,
+      ...toRefs(values),
       Snackbar,
     }
   },
diff --git a/packages/varlet-ui/src/radio-group/example/index.vue b/packages/varlet-ui/src/radio-group/example/index.vue
index 2025c8b56cd..39704d087f9 100644
--- a/packages/varlet-ui/src/radio-group/example/index.vue
+++ b/packages/varlet-ui/src/radio-group/example/index.vue
@@ -51,7 +51,7 @@ import Icon from '../../icon'
 import Button from '../../button'
 import Row from '../../row'
 import AppType from '@varlet/cli/site/mobile/components/AppType.vue'
-import { ref } from 'vue'
+import { toRefs, reactive } from 'vue'
 import { watchLang } from '../../utils/components'
 import { use, pack } from './locale'
 
@@ -66,27 +66,22 @@ export default {
     AppType,
   },
   setup() {
-    const value = ref(false)
-    const value2 = ref(0)
-    const value3 = ref(false)
-    const value4 = ref(false)
-    const value5 = ref(false)
-    const value6 = ref(0)
-    const value7 = ref(false)
-    const value8 = ref(0)
+    const values = reactive({
+      value: false,
+      value2: 0,
+      value3: false,
+      value4: false,
+      value5: false,
+      value6: 0,
+      value7: false,
+      value8: 0,
+    })
 
     watchLang(use)
 
     return {
       pack,
-      value,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      value7,
-      value8,
+      ...toRefs(values)
     }
   },
 }
diff --git a/packages/varlet-ui/src/radio/example/index.vue b/packages/varlet-ui/src/radio/example/index.vue
index b1459030d0f..09c8958ed4a 100644
--- a/packages/varlet-ui/src/radio/example/index.vue
+++ b/packages/varlet-ui/src/radio/example/index.vue
@@ -33,9 +33,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.example {
-	background: antiquewhite;
-}
-</style>
diff --git a/packages/varlet-ui/src/select/example/index.vue b/packages/varlet-ui/src/select/example/index.vue
index 7a503538b2f..c181bd87af0 100644
--- a/packages/varlet-ui/src/select/example/index.vue
+++ b/packages/varlet-ui/src/select/example/index.vue
@@ -94,7 +94,7 @@ import Select from '..'
 import Option from '../../option'
 import Icon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { watchLang } from '../../utils/components'
 import { use, pack } from './locale'
 
@@ -107,46 +107,38 @@ export default {
     AppType,
   },
   setup() {
-    const value = ref()
-    const value2 = ref()
-    const value3 = ref()
-    const value4 = ref()
-    const value6 = ref()
-    const value5 = ref([])
-    const value7 = ref([])
-    const value8 = ref()
-    const value9 = ref()
-    const value10 = ref([])
-    const value11 = ref()
+    const values = reactive({
+      value: undefined,
+      value2: undefined,
+      value3: undefined,
+      value4: undefined,
+      value5: [],
+      value6: undefined,
+      value7: [],
+      value8: undefined,
+      value9: undefined,
+      value10: [],
+      value11: undefined,
+    })
 
     watchLang((lang) => {
       use(lang)
-      value.value = undefined
-      value2.value = undefined
-      value3.value = undefined
-      value4.value = undefined
-      value6.value = undefined
-      value5.value = []
-      value7.value = []
-      value8.value = undefined
-      value9.value = undefined
-      value10.value = []
-      value11.value = undefined
+      values.value = undefined
+      values.value2 = undefined
+      values.value3 = undefined
+      values.value4 = undefined
+      values.value6 = undefined
+      values.value5 = []
+      values.value7 = []
+      values.value8 = undefined
+      values.value9 = undefined
+      values.value10 = []
+      values.value11 = undefined
     })
 
     return {
       pack,
-      value,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      value7,
-      value8,
-      value9,
-      value10,
-      value11,
+      ...toRefs(values),
     }
   },
 }
diff --git a/packages/varlet-ui/src/slider/example/index.vue b/packages/varlet-ui/src/slider/example/index.vue
index 31960dee5b5..c6879191820 100644
--- a/packages/varlet-ui/src/slider/example/index.vue
+++ b/packages/varlet-ui/src/slider/example/index.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Slider from '..'
 import { pack, use } from './locale'
@@ -60,15 +60,18 @@ export default defineComponent({
     AppType,
   },
   setup() {
-    const value = ref(3)
-    const value1 = ref([24, 50])
-    const value2 = ref(25)
-    const value3 = ref(40)
-    const value4 = ref(20)
-    const value5 = ref(20)
-    const value6 = ref(70)
-    const value7 = ref(50)
-    const value8 = ref(20)
+    const values = reactive({
+      value: 3,
+      value1: [24, 50],
+      value2: 25,
+      value3: 40,
+      value4: 20,
+      value5: 20,
+      value6: 70,
+      value7: 50,
+      value8: 20,
+    })
+
     const handleChange = (v) => {
       console.log(v)
     }
@@ -76,15 +79,7 @@ export default defineComponent({
     watchLang(use)
 
     return {
-      value,
-      value1,
-      value2,
-      value3,
-      value4,
-      value5,
-      value6,
-      value7,
-      value8,
+      ...toRefs(values),
       pack,
       handleChange,
     }
diff --git a/packages/varlet-ui/src/switch/example/index.vue b/packages/varlet-ui/src/switch/example/index.vue
index 8c1ba749cd2..fa7158c3389 100644
--- a/packages/varlet-ui/src/switch/example/index.vue
+++ b/packages/varlet-ui/src/switch/example/index.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Switch from '..'
 import Cell from '../../cell'
@@ -63,20 +63,18 @@ export default defineComponent({
     AppType,
   },
   setup() {
-    const value = ref(true)
-    const value1 = ref(true)
-    const value2 = ref(false)
-    const value3 = ref(true)
-    const value4 = ref(true)
+    const values = reactive({
+      value: true,
+      value1: true,
+      value2: false,
+      value3: true,
+      value4: true,
+    })
 
     watchLang(use)
 
     return {
-      value,
-      value1,
-      value2,
-      value3,
-      value4,
+      ...toRefs(values),
       pack,
     }
   },
diff --git a/packages/varlet-ui/src/tab-item/example/index.vue b/packages/varlet-ui/src/tab-item/example/index.vue
index 6ac256911b7..3ce6ffc4679 100644
--- a/packages/varlet-ui/src/tab-item/example/index.vue
+++ b/packages/varlet-ui/src/tab-item/example/index.vue
@@ -13,9 +13,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.example {
-	background: antiquewhite;
-}
-</style>
diff --git a/packages/varlet-ui/src/tab/example/index.vue b/packages/varlet-ui/src/tab/example/index.vue
index 6ed48ab2494..80284a188c5 100644
--- a/packages/varlet-ui/src/tab/example/index.vue
+++ b/packages/varlet-ui/src/tab/example/index.vue
@@ -13,9 +13,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.example {
-	background: antiquewhite;
-}
-</style>
diff --git a/packages/varlet-ui/src/tabs-items/example/index.vue b/packages/varlet-ui/src/tabs-items/example/index.vue
index 6a01704af1d..695259e8e0e 100644
--- a/packages/varlet-ui/src/tabs-items/example/index.vue
+++ b/packages/varlet-ui/src/tabs-items/example/index.vue
@@ -13,9 +13,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.example {
-	background: antiquewhite;
-}
-</style>
diff --git a/packages/varlet-ui/src/tabs/example/index.vue b/packages/varlet-ui/src/tabs/example/index.vue
index 24313c17475..813c02c0e6b 100644
--- a/packages/varlet-ui/src/tabs/example/index.vue
+++ b/packages/varlet-ui/src/tabs/example/index.vue
@@ -140,7 +140,7 @@ import TabsItems from '../../tabs-items'
 import TabItem from '../../tab-item'
 import context from '../../context'
 import { use, pack } from './locale'
-import { onUnmounted, ref } from 'vue'
+import { onUnmounted, reactive, toRefs } from 'vue'
 import { watchPlatform, watchLang } from '../../utils/components'
 
 export default {
@@ -154,14 +154,16 @@ export default {
     AppType
   },
   setup() {
-    const active = ref(0)
-    const active2 = ref(0)
-    const active3 = ref(0)
-    const active4 = ref(0)
-    const active5 = ref(0)
-    const active6 = ref(0)
-    const active7 = ref(0)
-    const activeRelation = ref(0)
+    const actives = reactive({
+      active: 0,
+      active2: 0,
+      active3: 0,
+      active4: 0,
+      active5: 0,
+      active6: 0,
+      active7: 0,
+      activeRelation: 0,
+    })
 
     watchLang(use)
 
@@ -177,14 +179,7 @@ export default {
 
     return {
       pack,
-      active,
-      active2,
-      active3,
-      active4,
-      active5,
-      active6,
-      active7,
-      activeRelation,
+      ...toRefs(actives),
     }
   },
 }
diff --git a/packages/varlet-ui/src/time-picker/example/index.vue b/packages/varlet-ui/src/time-picker/example/index.vue
index 4b1797ad72c..3dab211a0f4 100644
--- a/packages/varlet-ui/src/time-picker/example/index.vue
+++ b/packages/varlet-ui/src/time-picker/example/index.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import TimePicker from '..'
 import { pack, use } from './locale'
@@ -47,12 +47,14 @@ export default defineComponent({
     AppType,
   },
   setup() {
-    const date = ref('11:20')
-    const date1 = ref('15:10')
-    const date2 = ref('07:10')
-    const date3 = ref('07:10')
-    const date4 = ref('05:10')
-    const date5 = ref('17:36:22')
+    const dates = reactive({
+      date: '11:20',
+      date1: '15:10',
+      date2: '07:10',
+      date3: '07:10',
+      date4: '05:10',
+      date5: '17:36:22',
+    })
 
     const change = (time) => {
       console.log(time)
@@ -61,12 +63,7 @@ export default defineComponent({
     watchLang(use)
 
     return {
-      date,
-      date1,
-      date2,
-      date3,
-      date4,
-      date5,
+      ...toRefs(dates),
       change,
       pack,
     }
diff --git a/packages/varlet-ui/src/uploader/example/index.vue b/packages/varlet-ui/src/uploader/example/index.vue
index 2bbc9358348..f80a5508638 100644
--- a/packages/varlet-ui/src/uploader/example/index.vue
+++ b/packages/varlet-ui/src/uploader/example/index.vue
@@ -38,7 +38,7 @@
 import Uploader from '..'
 import Button from '../../button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
-import { ref } from 'vue'
+import { reactive, toRefs } from 'vue'
 import { watchLang } from '../../utils/components'
 import { use, pack } from './locale'
 
@@ -50,47 +50,49 @@ export default {
     AppType,
   },
   setup() {
-    const files = ref([])
-    const files2 = ref([
-      {
-        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-      },
-      {
-        url: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4',
-        cover: 'https://varlet.gitee.io/varlet-ui/cover.jpg',
-      },
-    ])
-    const files3 = ref([
-      {
-        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-        state: 'loading',
-      },
-      {
-        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-        state: 'success',
-      },
-      {
-        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-        state: 'error',
-      },
-    ])
-    const files4 = ref([])
-    const files5 = ref([])
-    const files6 = ref([])
-    const files7 = ref([])
-    const files8 = ref([])
-    const files9 = ref([])
-    const files10 = ref([
-      {
-        url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-        cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
-        state: 'error',
-      },
-    ])
+    const values = reactive({
+      files: [],
+      files2: [
+        {
+          url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+        },
+        {
+          url: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4',
+          cover: 'https://varlet.gitee.io/varlet-ui/cover.jpg',
+        },
+      ],
+      files3: [
+        {
+          url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          state: 'loading',
+        },
+        {
+          url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          state: 'success',
+        },
+        {
+          url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          state: 'error',
+        },
+      ],
+      files4: [],
+      files5: [],
+      files6: [],
+      files7: [],
+      files8: [],
+      files9: [],
+      files10: [
+        {
+          url: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          cover: 'https://varlet.gitee.io/varlet-ui/cat.jpg',
+          state: 'error',
+        },
+      ],
+    })
 
     const handleAfterRead = (file) => console.log(file)
 
@@ -110,16 +112,7 @@ export default {
 
     return {
       pack,
-      files,
-      files2,
-      files3,
-      files4,
-      files5,
-      files6,
-      files7,
-      files8,
-      files9,
-      files10,
+      ...toRefs(values),
       handleAfterRead,
       handleAfterRead2,
       handleOversize,