diff --git a/examples/sites/demos/mobile/app/actionsheet/clickfn.vue b/examples/sites/demos/mobile/app/actionsheet/clickfn.vue
index b83a0ee8d0..ef83198237 100644
--- a/examples/sites/demos/mobile/app/actionsheet/clickfn.vue
+++ b/examples/sites/demos/mobile/app/actionsheet/clickfn.vue
@@ -15,47 +15,38 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyActionSheet, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyActionSheet,
-    TinyButton
+const activeName = ref('')
+const boxVisibility = ref(false)
+const menus = ref([
+  {
+    id: 1,
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      activeName: '',
-      boxVisibility: false,
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ]
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    },
-    clickItem(value) {
-      console.log(value, '获取了当前点击的返回值')
-    }
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
   }
+])
+
+function fn() {
+  boxVisibility.value = true
+}
+
+function clickItem(value) {
+  console.log(value, '获取了当前点击的返回值')
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue b/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue
index b1890a8228..738b262cae 100644
--- a/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue
+++ b/examples/sites/demos/mobile/app/actionsheet/ellipsis.vue
@@ -15,45 +15,35 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyActionSheet, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyActionSheet,
-    TinyButton
+const activeName = ref('')
+const boxVisibility = ref(false)
+const menus = ref([
+  {
+    id: 1,
+    label:
+      '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      activeName: '',
-      boxVisibility: false,
-      menus: [
-        {
-          id: 1,
-          label:
-            '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ]
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    }
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
   }
+])
+
+function fn() {
+  boxVisibility.value = true
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/actionsheet/slot-action.vue b/examples/sites/demos/mobile/app/actionsheet/slot-action.vue
index 3117eeb4e8..77756f20bc 100644
--- a/examples/sites/demos/mobile/app/actionsheet/slot-action.vue
+++ b/examples/sites/demos/mobile/app/actionsheet/slot-action.vue
@@ -22,63 +22,55 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyActionSheet, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyActionSheet,
-    TinyButton
+const activeName = ref(1)
+const boxVisibility = ref(false)
+const menus = ref([
+  {
+    id: 1,
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      activeName: 1,
-      boxVisibility: false,
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        },
-        {
-          id: 5,
-          label: '我是小茎'
-        },
-        {
-          id: 6,
-          label: '我是小根'
-        },
-        {
-          id: 7,
-          label: '我是小枝'
-        },
-        {
-          id: 8,
-          label: '我是小木'
-        }
-      ]
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {
-    visibleHandle() {
-      this.$refs.action.visibleHandle()
-    },
-    fn() {
-      this.boxVisibility = true
-    }
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
+  },
+  {
+    id: 5,
+    label: '我是小茎'
+  },
+  {
+    id: 6,
+    label: '我是小根'
+  },
+  {
+    id: 7,
+    label: '我是小枝'
+  },
+  {
+    id: 8,
+    label: '我是小木'
   }
+])
+const actionRef = ref()
+
+function visibleHandle() {
+  actionRef.value.visibleHandle()
+}
+
+function fn() {
+  boxVisibility.value = true
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/actionsheet/slot-item.vue b/examples/sites/demos/mobile/app/actionsheet/slot-item.vue
index ac0dfc29c7..0864c95583 100644
--- a/examples/sites/demos/mobile/app/actionsheet/slot-item.vue
+++ b/examples/sites/demos/mobile/app/actionsheet/slot-item.vue
@@ -20,44 +20,34 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyActionSheet, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyActionSheet,
-    TinyButton
+const activeName = ref(1)
+const boxVisibility = ref(false)
+const menus = ref([
+  {
+    id: 1,
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      activeName: 1,
-      boxVisibility: false,
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ]
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    }
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
   }
+])
+
+function fn() {
+  boxVisibility.value = true
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/alert/basic-usage.vue b/examples/sites/demos/mobile/app/alert/basic-usage.vue
index c5eaaa5de2..a1e679312b 100644
--- a/examples/sites/demos/mobile/app/alert/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/alert/basic-usage.vue
@@ -9,14 +9,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyAlert } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyAlert
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/alert/center.vue b/examples/sites/demos/mobile/app/alert/center.vue
index fb92ae4a25..3e4a83b25d 100644
--- a/examples/sites/demos/mobile/app/alert/center.vue
+++ b/examples/sites/demos/mobile/app/alert/center.vue
@@ -2,12 +2,8 @@
   <tiny-alert center description="文字居中"></tiny-alert>
 </template>
 
-<script>
+<script setup>
 import { TinyAlert } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyAlert
-  }
-}
+
 </script>
diff --git a/examples/sites/demos/mobile/app/alert/custom-close.vue b/examples/sites/demos/mobile/app/alert/custom-close.vue
index 36092dc978..1d67acf8bc 100644
--- a/examples/sites/demos/mobile/app/alert/custom-close.vue
+++ b/examples/sites/demos/mobile/app/alert/custom-close.vue
@@ -18,28 +18,18 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyAlert, TinySwitch, TinyToast } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyAlert,
-    TinySwitch
-  },
-  data() {
-    return {
-      autoHide: false,
-      closeText: '自定义关闭'
-    }
-  },
-  methods: {
-    close() {
-      TinyToast.service({
-        text: 'close事件!',
-        time: 100000
-      })
-    }
-  }
+const autoHide = ref(false)
+const closeText = ref('自定义关闭')
+
+function close() {
+  TinyToast.service({
+    text: 'close事件!',
+    time: 100000
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/alert/icon.vue b/examples/sites/demos/mobile/app/alert/icon.vue
index c43a6f01c6..2dc1675e30 100644
--- a/examples/sites/demos/mobile/app/alert/icon.vue
+++ b/examples/sites/demos/mobile/app/alert/icon.vue
@@ -4,20 +4,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyAlert } from '@opentiny/vue-mobile'
 import { iconCustom } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyAlert
-  },
-  data() {
-    return {
-      IconCustom: iconCustom()
-    }
-  }
-}
+const IconCustom = iconCustom()
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/alert/size.vue b/examples/sites/demos/mobile/app/alert/size.vue
index 6a453640ee..e26b81465c 100644
--- a/examples/sites/demos/mobile/app/alert/size.vue
+++ b/examples/sites/demos/mobile/app/alert/size.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyAlert } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyAlert
-  }
-}
+
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/alert/slot-default.vue b/examples/sites/demos/mobile/app/alert/slot-default.vue
index 76b086f173..a653710de4 100644
--- a/examples/sites/demos/mobile/app/alert/slot-default.vue
+++ b/examples/sites/demos/mobile/app/alert/slot-default.vue
@@ -7,14 +7,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyAlert } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyAlert
-  }
-}
+
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/alert/target.vue b/examples/sites/demos/mobile/app/alert/target.vue
index 74c1328e9e..58d8055f62 100644
--- a/examples/sites/demos/mobile/app/alert/target.vue
+++ b/examples/sites/demos/mobile/app/alert/target.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="alert-target-demo">
-    <div class="alert-wrap" ref="target">
+    <div class="alert-wrap" ref="targetRef">
       <tiny-tabs activeName="first" activeColor="blue">
         <tiny-tab-item title="标签1" name="first"> 内容1 </tiny-tab-item>
         <tiny-tab-item title="标签2" name="second"> 内容2 </tiny-tab-item>
@@ -11,16 +11,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyAlert, TinyTabs, TinyTabItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyAlert,
-    TinyTabs,
-    TinyTabItem
-  }
-}
+
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/avatar/avatar-size.vue b/examples/sites/demos/mobile/app/avatar/avatar-size.vue
index fae8c5cd7d..38a0c98b17 100644
--- a/examples/sites/demos/mobile/app/avatar/avatar-size.vue
+++ b/examples/sites/demos/mobile/app/avatar/avatar-size.vue
@@ -19,19 +19,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyAvatar } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyAvatar
-  },
-  data() {
-    return {
-      circleUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/circle.png`
-    }
-  }
-}
+const circleUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/circle.png`)
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/avatar/avatar-src-set.vue b/examples/sites/demos/mobile/app/avatar/avatar-src-set.vue
index cb5d575bdd..1baa573b18 100644
--- a/examples/sites/demos/mobile/app/avatar/avatar-src-set.vue
+++ b/examples/sites/demos/mobile/app/avatar/avatar-src-set.vue
@@ -8,28 +8,23 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyAvatar } from '@opentiny/vue-mobile'
 import { iconClockWork } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyAvatar
-  },
-  data() {
-    const urlPrefix = import.meta.env.VITE_APP_BUILD_BASE_URL
-    return {
-      IconClockWork: iconClockWork(),
-      circleUrl: `${urlPrefix}static/images/circle.png`,
-      circleUrlfit: `${urlPrefix}static/images/dog1.png`,
-      srcSet: `${urlPrefix}static/images/dog1.png 100w,${urlPrefix}static/images/dog2.png 300w,${urlPrefix}static/images/dog3.png 500w`,
-      errorUrl: 'error.png', // 使用错误路径
-      onError() {
-        console.log('加载失败')
-      }
-    }
-  }
-}
+const urlPrefix = import.meta.env.VITE_APP_BUILD_BASE_URL
+const IconClockWork = iconClockWork()
+const circleUrl = ref(`${urlPrefix}static/images/circle.png`)
+const circleUrlfit = ref(`${urlPrefix}static/images/dog1.png`)
+const srcSet = ref(
+  `${urlPrefix}static/images/dog1.png 100w,${urlPrefix}static/images/dog2.png 300w,${urlPrefix}static/images/dog3.png 500w`
+)
+const errorUrl = ref('error.png')
+// 使用错误路径
+const onError = ref(function onError() {
+  console.log('加载失败')
+})
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/badge/content.vue b/examples/sites/demos/mobile/app/badge/content.vue
index 40493e0b5e..35dc5de582 100644
--- a/examples/sites/demos/mobile/app/badge/content.vue
+++ b/examples/sites/demos/mobile/app/badge/content.vue
@@ -7,19 +7,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyBadge } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyBadge
-  },
-  data() {
-    return {
-      value1: 2
-    }
-  }
-}
+const value1 = ref(2)
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/badge/hidden.vue b/examples/sites/demos/mobile/app/badge/hidden.vue
index 66c636a4f3..071d281413 100644
--- a/examples/sites/demos/mobile/app/badge/hidden.vue
+++ b/examples/sites/demos/mobile/app/badge/hidden.vue
@@ -7,25 +7,15 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyBadge, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyBadge,
-    TinyButton
-  },
-  data() {
-    return {
-      unread: 2
-    }
-  },
-  methods: {
-    read() {
-      if (this.unread > 0) {
-        this.unread = this.unread - 1
-      }
-    }
+const unread = ref(2)
+
+function read() {
+  if (unread.value > 0) {
+    unread.value = unread.value - 1
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/badge/href-target.vue b/examples/sites/demos/mobile/app/badge/href-target.vue
index 7fdd0c90d5..f4b9e1f12e 100644
--- a/examples/sites/demos/mobile/app/badge/href-target.vue
+++ b/examples/sites/demos/mobile/app/badge/href-target.vue
@@ -7,19 +7,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyBadge } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyBadge
-  },
-  data() {
-    return {
-      value1: 2
-    }
-  }
-}
+const value1 = ref(2)
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/badge/is-dot.vue b/examples/sites/demos/mobile/app/badge/is-dot.vue
index 2d87726462..9cdf3bf250 100644
--- a/examples/sites/demos/mobile/app/badge/is-dot.vue
+++ b/examples/sites/demos/mobile/app/badge/is-dot.vue
@@ -4,19 +4,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyBadge } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyBadge
-  },
-  data() {
-    return {
-      value1: 2
-    }
-  }
-}
+const value1 = ref(2)
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/badge/is-mini.vue b/examples/sites/demos/mobile/app/badge/is-mini.vue
index c35041148a..e853715375 100644
--- a/examples/sites/demos/mobile/app/badge/is-mini.vue
+++ b/examples/sites/demos/mobile/app/badge/is-mini.vue
@@ -7,19 +7,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyBadge } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyBadge
-  },
-  data() {
-    return {
-      value1: 2
-    }
-  }
-}
+const value1 = ref(2)
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/badge/type.vue b/examples/sites/demos/mobile/app/badge/type.vue
index 533b7b279d..676a430f38 100644
--- a/examples/sites/demos/mobile/app/badge/type.vue
+++ b/examples/sites/demos/mobile/app/badge/type.vue
@@ -19,19 +19,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyBadge } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyBadge
-  },
-  data() {
-    return {
-      value1: 2
-    }
-  }
-}
+const value1 = ref(2)
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/button/base.vue b/examples/sites/demos/mobile/app/button/base.vue
index c170154d35..a47b47f5e2 100644
--- a/examples/sites/demos/mobile/app/button/base.vue
+++ b/examples/sites/demos/mobile/app/button/base.vue
@@ -10,20 +10,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyButton } from '@opentiny/vue-mobile'
 import { iconMail } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyButton
-  },
-  data() {
-    return {
-      IconMail: iconMail()
-    }
-  }
-}
+const IconMail = iconMail()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/button/disabled.vue b/examples/sites/demos/mobile/app/button/disabled.vue
index f88f442704..6561f7a9e2 100644
--- a/examples/sites/demos/mobile/app/button/disabled.vue
+++ b/examples/sites/demos/mobile/app/button/disabled.vue
@@ -10,20 +10,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyButton } from '@opentiny/vue-mobile'
 import { iconMail } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyButton
-  },
-  data() {
-    return {
-      IconMail: iconMail()
-    }
-  }
-}
+const IconMail = iconMail()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/button/event.vue b/examples/sites/demos/mobile/app/button/event.vue
index ca2a63f6d0..402a5101d9 100644
--- a/examples/sites/demos/mobile/app/button/event.vue
+++ b/examples/sites/demos/mobile/app/button/event.vue
@@ -5,28 +5,19 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyButton } from '@opentiny/vue-mobile'
 import { iconMail } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyButton
-  },
-  data() {
-    return {
-      IconMail: iconMail(),
-      loading: false
-    }
-  },
-  methods: {
-    btnClick() {
-      this.loading = true
-      setTimeout(() => {
-        this.loading = false
-      }, 2000)
-    }
-  }
+const IconMail = iconMail()
+const loading = ref(false)
+
+function btnClick() {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 2000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/button/icon.vue b/examples/sites/demos/mobile/app/button/icon.vue
index efd81cbecf..2256b8e1b6 100644
--- a/examples/sites/demos/mobile/app/button/icon.vue
+++ b/examples/sites/demos/mobile/app/button/icon.vue
@@ -10,25 +10,16 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyButton } from '@opentiny/vue-mobile'
 import { iconDel, iconYes, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyButton
-  },
-  data() {
-    return {
-      IconDel: iconDel(),
-      IconYes: iconYes(),
-      IconEdit: iconEdit(),
-      IconMail: iconMail(),
-      IconStarO: iconStarO(),
-      IconSearch: iconSearch()
-    }
-  }
-}
+const IconDel = iconDel()
+const IconYes = iconYes()
+const IconEdit = iconEdit()
+const IconMail = iconMail()
+const IconStarO = iconStarO()
+const IconSearch = iconSearch()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/button/loading.vue b/examples/sites/demos/mobile/app/button/loading.vue
index 04994cf1ef..cd99523ede 100644
--- a/examples/sites/demos/mobile/app/button/loading.vue
+++ b/examples/sites/demos/mobile/app/button/loading.vue
@@ -6,26 +6,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  data() {
-    return {
-      loading: false
-    }
-  },
-  methods: {
-    btnClick() {
-      this.loading = true
-      setTimeout(() => {
-        this.loading = false
-      }, 2000)
-    }
-  }
+const loading = ref(false)
+
+function btnClick() {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 2000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/button/reset-time.vue b/examples/sites/demos/mobile/app/button/reset-time.vue
index e9ab306156..b1d45614cd 100644
--- a/examples/sites/demos/mobile/app/button/reset-time.vue
+++ b/examples/sites/demos/mobile/app/button/reset-time.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/button/size.vue b/examples/sites/demos/mobile/app/button/size.vue
index 7b987faaa3..a67bce5849 100644
--- a/examples/sites/demos/mobile/app/button/size.vue
+++ b/examples/sites/demos/mobile/app/button/size.vue
@@ -12,28 +12,19 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyButton } from '@opentiny/vue-mobile'
 import { iconMail } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyButton
-  },
-  data() {
-    return {
-      IconMail: iconMail(),
-      loading: false
-    }
-  },
-  methods: {
-    btnClick() {
-      this.loading = true
-      setTimeout(() => {
-        this.loading = false
-      }, 2000)
-    }
-  }
+const IconMail = iconMail()
+const loading = ref(false)
+
+function btnClick() {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 2000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/checkbox/basic-usage.vue b/examples/sites/demos/mobile/app/checkbox/basic-usage.vue
index 5b951db8a7..60eb16c45d 100644
--- a/examples/sites/demos/mobile/app/checkbox/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/checkbox/basic-usage.vue
@@ -10,20 +10,12 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyCheckbox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox
-  },
-  data() {
-    return {
-      checked1: true,
-      checked2: false
-    }
-  }
-}
+const checked1 = ref(true)
+const checked2 = ref(false)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/checkbox/checkbox-group.vue b/examples/sites/demos/mobile/app/checkbox/checkbox-group.vue
index f91dbf37cd..d2ae0c0160 100644
--- a/examples/sites/demos/mobile/app/checkbox/checkbox-group.vue
+++ b/examples/sites/demos/mobile/app/checkbox/checkbox-group.vue
@@ -8,20 +8,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox,
-    TinyCheckboxGroup
-  },
-  data() {
-    return {
-      checked: ['复选框1']
-    }
-  }
-}
+const checked = ref(['复选框1'])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/checkbox/disabled.vue b/examples/sites/demos/mobile/app/checkbox/disabled.vue
index b4b3cfd95d..4314a23cee 100644
--- a/examples/sites/demos/mobile/app/checkbox/disabled.vue
+++ b/examples/sites/demos/mobile/app/checkbox/disabled.vue
@@ -10,20 +10,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox,
-    TinyCheckboxGroup
-  },
-  data() {
-    return {
-      checked: ['复选框1', '复选框2']
-    }
-  }
-}
+const checked = ref(['复选框1', '复选框2'])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/checkbox/event-change.vue b/examples/sites/demos/mobile/app/checkbox/event-change.vue
index 428bc1e22e..89beeb6783 100644
--- a/examples/sites/demos/mobile/app/checkbox/event-change.vue
+++ b/examples/sites/demos/mobile/app/checkbox/event-change.vue
@@ -4,23 +4,14 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyCheckbox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox
-  },
-  data() {
-    return {
-      checked: true
-    }
-  },
-  methods: {
-    handleChange(val) {
-      console.log('当前值为：' + val)
-    }
-  }
+const checked = ref(true)
+
+function handleChange(val) {
+  console.log('当前值为：' + val)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/checkbox/icon-position.vue b/examples/sites/demos/mobile/app/checkbox/icon-position.vue
index 75d0ec942f..eed8d56253 100644
--- a/examples/sites/demos/mobile/app/checkbox/icon-position.vue
+++ b/examples/sites/demos/mobile/app/checkbox/icon-position.vue
@@ -23,21 +23,12 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox,
-    TinyCheckboxGroup
-  },
-  data() {
-    return {
-      checked1: ['复选框1'],
-      checked2: false
-    }
-  }
-}
+const checked1 = ref(['复选框1'])
+const checked2 = ref(false)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/checkbox/indeterminate.vue b/examples/sites/demos/mobile/app/checkbox/indeterminate.vue
index 9625b67c11..ede8071573 100644
--- a/examples/sites/demos/mobile/app/checkbox/indeterminate.vue
+++ b/examples/sites/demos/mobile/app/checkbox/indeterminate.vue
@@ -7,44 +7,32 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
 import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox,
-    TinyCheckboxGroup
-  },
-  data() {
-    return {
-      checkboxGroup: ['北京'],
-      cities: ['上海', '北京', '广州', '深圳']
-    }
-  },
-  methods: {
-    all() {
-      this.checkAll = this.isIndeterminate
-    }
+const checkboxGroup = ref(['北京'])
+const cities = ref(['上海', '北京', '广州', '深圳'])
+const isIndeterminate = computed({
+  get() {
+    return !(checkboxGroup.value.length === 0 || checkboxGroup.value.length === cities.value.length)
+  }
+})
+const checkAll = computed({
+  get() {
+    return checkboxGroup.value.length === cities.value.length
   },
-  computed: {
-    isIndeterminate: {
-      get() {
-        return !(this.checkboxGroup.length === 0 || this.checkboxGroup.length === this.cities.length)
-      }
-    },
-    checkAll: {
-      get() {
-        return this.checkboxGroup.length === this.cities.length
-      },
-      set(val) {
-        if (val) {
-          this.checkboxGroup = [...this.cities]
-        } else {
-          this.checkboxGroup = []
-        }
-      }
+  set(val) {
+    if (val) {
+      checkboxGroup.value = [...cities.value]
+    } else {
+      checkboxGroup.value = []
     }
   }
+})
+
+function all() {
+  checkAll.value = isIndeterminate.value
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/checkbox/true-false-label.vue b/examples/sites/demos/mobile/app/checkbox/true-false-label.vue
index 4d109b8ef5..df4bdfb231 100644
--- a/examples/sites/demos/mobile/app/checkbox/true-false-label.vue
+++ b/examples/sites/demos/mobile/app/checkbox/true-false-label.vue
@@ -6,19 +6,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyCheckbox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox
-  },
-  data() {
-    return {
-      checked: 'yes'
-    }
-  }
-}
+const checked = ref('yes')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/checkboxgroup/disabled.vue b/examples/sites/demos/mobile/app/checkboxgroup/disabled.vue
index 7b21c1cf30..c77cf4bc6d 100644
--- a/examples/sites/demos/mobile/app/checkboxgroup/disabled.vue
+++ b/examples/sites/demos/mobile/app/checkboxgroup/disabled.vue
@@ -8,21 +8,12 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox,
-    TinyCheckboxGroup
-  },
-  data() {
-    return {
-      checkboxGroup: ['北京'],
-      cities: ['上海', '北京', '广州', '深圳']
-    }
-  }
-}
+const checkboxGroup = ref(['北京'])
+const cities = ref(['上海', '北京', '广州', '深圳'])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/checkboxgroup/event-change.vue b/examples/sites/demos/mobile/app/checkboxgroup/event-change.vue
index 16a3a94a3c..aa2f216913 100644
--- a/examples/sites/demos/mobile/app/checkboxgroup/event-change.vue
+++ b/examples/sites/demos/mobile/app/checkboxgroup/event-change.vue
@@ -6,25 +6,15 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox,
-    TinyCheckboxGroup
-  },
-  data() {
-    return {
-      checkboxGroup: ['北京'],
-      cities: ['上海', '北京', '广州', '深圳']
-    }
-  },
-  methods: {
-    handleChange(val) {
-      console.log('当前值为：' + val)
-    }
-  }
+const checkboxGroup = ref(['北京'])
+const cities = ref(['上海', '北京', '广州', '深圳'])
+
+function handleChange(val) {
+  console.log('当前值为：' + val)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/checkboxgroup/min-max.vue b/examples/sites/demos/mobile/app/checkboxgroup/min-max.vue
index 1a6168a973..d0ab05fc14 100644
--- a/examples/sites/demos/mobile/app/checkboxgroup/min-max.vue
+++ b/examples/sites/demos/mobile/app/checkboxgroup/min-max.vue
@@ -6,21 +6,12 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox,
-    TinyCheckboxGroup
-  },
-  data() {
-    return {
-      checkboxGroup: ['北京'],
-      cities: ['上海', '北京', '广州', '深圳']
-    }
-  }
-}
+const checkboxGroup = ref(['北京'])
+const cities = ref(['上海', '北京', '广州', '深圳'])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/checkboxgroup/vertical.vue b/examples/sites/demos/mobile/app/checkboxgroup/vertical.vue
index 0a991acc9e..8946c92688 100644
--- a/examples/sites/demos/mobile/app/checkboxgroup/vertical.vue
+++ b/examples/sites/demos/mobile/app/checkboxgroup/vertical.vue
@@ -6,21 +6,12 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyCheckbox,
-    TinyCheckboxGroup
-  },
-  data() {
-    return {
-      checkboxGroup: ['北京'],
-      cities: ['上海', '北京', '广州', '深圳']
-    }
-  }
-}
+const checkboxGroup = ref(['北京'])
+const cities = ref(['上海', '北京', '广州', '深圳'])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/container/basic-usage.vue b/examples/sites/demos/mobile/app/container/basic-usage.vue
index b625655de4..f7ca30f1c9 100644
--- a/examples/sites/demos/mobile/app/container/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/container/basic-usage.vue
@@ -37,21 +37,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyContainer, TinyRadio, TinyRadioGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyContainer,
-    TinyRadio,
-    TinyRadioGroup
-  },
-  data() {
-    return {
-      pattern: 'default'
-    }
-  }
-}
+const pattern = ref('default')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/container/custom-width.vue b/examples/sites/demos/mobile/app/container/custom-width.vue
index 9b188e2286..1b5191fe29 100644
--- a/examples/sites/demos/mobile/app/container/custom-width.vue
+++ b/examples/sites/demos/mobile/app/container/custom-width.vue
@@ -23,23 +23,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyContainer, TinyRadio, TinyRadioGroup } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyContainer,
-    TinyRadio,
-    TinyRadioGroup
-  },
-  data() {
-    return {
-      pattern: 'default',
-      leftWidth: 80,
-      rightWidth: 80
-    }
-  }
-}
+const pattern = ref('default')
+const leftWidth = ref(80)
+const rightWidth = ref(80)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/dialog-box/append-to-body.vue b/examples/sites/demos/mobile/app/dialog-box/append-to-body.vue
index cfc56fcd86..3b6bd4d358 100644
--- a/examples/sites/demos/mobile/app/dialog-box/append-to-body.vue
+++ b/examples/sites/demos/mobile/app/dialog-box/append-to-body.vue
@@ -7,18 +7,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      boxVisibility: false
-    }
-  }
-}
+const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/mobile/app/dialog-box/cancel-confirm.vue b/examples/sites/demos/mobile/app/dialog-box/cancel-confirm.vue
index c87d29675f..5790073cf3 100644
--- a/examples/sites/demos/mobile/app/dialog-box/cancel-confirm.vue
+++ b/examples/sites/demos/mobile/app/dialog-box/cancel-confirm.vue
@@ -14,29 +14,21 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      boxVisibility: false
-    }
-  },
-  methods: {
-    cancel() {
-      console.log('取消按钮的回调')
-    },
-    confirm() {
-      console.log('确定按钮的回调')
-    },
-    getTime(now) {
-      return [now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()].join(':')
-    }
-  }
+const boxVisibility = ref(false)
+
+function cancel() {
+  console.log('取消按钮的回调')
+}
+
+function confirm() {
+  console.log('确定按钮的回调')
+}
+
+function getTime(now) {
+  return [now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()].join(':')
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/dialog-box/close-on-click-modal.vue b/examples/sites/demos/mobile/app/dialog-box/close-on-click-modal.vue
index 0b98f69255..732adf8ca4 100644
--- a/examples/sites/demos/mobile/app/dialog-box/close-on-click-modal.vue
+++ b/examples/sites/demos/mobile/app/dialog-box/close-on-click-modal.vue
@@ -13,18 +13,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      boxVisibility: false
-    }
-  }
-}
+const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/mobile/app/dialog-box/events-open-close.vue b/examples/sites/demos/mobile/app/dialog-box/events-open-close.vue
index 3c077192fd..d83648fcaf 100644
--- a/examples/sites/demos/mobile/app/dialog-box/events-open-close.vue
+++ b/examples/sites/demos/mobile/app/dialog-box/events-open-close.vue
@@ -14,29 +14,21 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      boxVisibility: false
-    }
-  },
-  methods: {
-    open() {
-      console.log('窗口弹出')
-    },
-    close() {
-      console.log('窗口关闭')
-    },
-    getTime(now) {
-      return [now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()].join(':')
-    }
-  }
+const boxVisibility = ref(false)
+
+function open() {
+  console.log('窗口弹出')
+}
+
+function close() {
+  console.log('窗口关闭')
+}
+
+function getTime(now) {
+  return [now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds()].join(':')
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/dialog-box/lock-scroll.vue b/examples/sites/demos/mobile/app/dialog-box/lock-scroll.vue
index bf969c526a..cfebdd7a9e 100644
--- a/examples/sites/demos/mobile/app/dialog-box/lock-scroll.vue
+++ b/examples/sites/demos/mobile/app/dialog-box/lock-scroll.vue
@@ -13,18 +13,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      boxVisibility: false
-    }
-  }
-}
+const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/mobile/app/dialog-box/show-header.vue b/examples/sites/demos/mobile/app/dialog-box/show-header.vue
index 067da3350f..d2394ba6f2 100644
--- a/examples/sites/demos/mobile/app/dialog-box/show-header.vue
+++ b/examples/sites/demos/mobile/app/dialog-box/show-header.vue
@@ -13,18 +13,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      boxVisibility1: false
-    }
-  }
-}
+const boxVisibility1 = ref(false)
 </script>
diff --git a/examples/sites/demos/mobile/app/dialog-box/slot-footer.vue b/examples/sites/demos/mobile/app/dialog-box/slot-footer.vue
index 520c6b1f19..2f6fe00ea6 100644
--- a/examples/sites/demos/mobile/app/dialog-box/slot-footer.vue
+++ b/examples/sites/demos/mobile/app/dialog-box/slot-footer.vue
@@ -15,18 +15,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      boxVisibility: false
-    }
-  }
-}
+const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/mobile/app/dialog-box/slot-title.vue b/examples/sites/demos/mobile/app/dialog-box/slot-title.vue
index bd8db9b657..4207ca1912 100644
--- a/examples/sites/demos/mobile/app/dialog-box/slot-title.vue
+++ b/examples/sites/demos/mobile/app/dialog-box/slot-title.vue
@@ -15,18 +15,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      boxVisibility: false
-    }
-  }
-}
+const boxVisibility = ref(false)
 </script>
diff --git a/examples/sites/demos/mobile/app/dialog-box/with-input.vue b/examples/sites/demos/mobile/app/dialog-box/with-input.vue
index 42190653d6..2d893905de 100644
--- a/examples/sites/demos/mobile/app/dialog-box/with-input.vue
+++ b/examples/sites/demos/mobile/app/dialog-box/with-input.vue
@@ -18,23 +18,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyDialogBox, TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyDialogBox,
-    TinyInput
-  },
-  data() {
-    return {
-      boxVisibility1: false,
-      boxVisibility2: false,
-      input: ''
-    }
-  }
-}
+const boxVisibility1 = ref(false)
+const boxVisibility2 = ref(false)
+const input = ref('')
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/activeColor.vue b/examples/sites/demos/mobile/app/dropdownmenu/activeColor.vue
index 3cf8863009..50a761b3f1 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/activeColor.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/activeColor.vue
@@ -8,51 +8,42 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOutside.vue b/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOutside.vue
index 6fb2c25139..55729b18eb 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOutside.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOutside.vue
@@ -8,57 +8,48 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref(0)
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+])
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: 0,
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 }
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOverlay.vue b/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOverlay.vue
index eafa3be694..63722de3ec 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOverlay.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/closeOnClickOverlay.vue
@@ -8,57 +8,48 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref(0)
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+])
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: 0,
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 }
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/direction.vue b/examples/sites/demos/mobile/app/dropdownmenu/direction.vue
index 3b4a2f009c..b9b18d1d5a 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/direction.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/direction.vue
@@ -8,57 +8,48 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref(0)
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+])
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: 0,
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 }
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/duration.vue b/examples/sites/demos/mobile/app/dropdownmenu/duration.vue
index 742f59bf12..52aae916d8 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/duration.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/duration.vue
@@ -8,57 +8,48 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref(0)
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+])
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: 0,
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 }
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/event.vue b/examples/sites/demos/mobile/app/dropdownmenu/event.vue
index e3e740d3b0..1a143dd585 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/event.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/event.vue
@@ -23,80 +23,76 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref(0)
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+])
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: 0,
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 }
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
   },
-  methods: {
-    open() {
-      console.log('open----')
-    },
-    close() {
-      console.log('close----')
-    },
-    opened() {
-      console.log('anima--------------')
-    },
-    change(val) {
-      console.log(val, '--------------')
-    },
-    sort(val) {
-      console.log(val)
-    },
-    confirm(ary) {
-      console.log(ary)
-    },
-    reset(ary) {
-      console.log(ary)
-    }
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
+])
+
+function open() {
+  console.log('open----')
+}
+
+function close() {
+  console.log('close----')
+}
+
+function opened() {
+  console.log('anima--------------')
+}
+
+function change(val) {
+  console.log(val, '--------------')
+}
+
+function sort(val) {
+  console.log(val)
+}
+
+function confirm(ary) {
+  console.log(ary)
+}
+
+function reset(ary) {
+  console.log(ary)
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/icon.vue b/examples/sites/demos/mobile/app/dropdownmenu/icon.vue
index e2561fcd29..5d33dc25ae 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/icon.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/icon.vue
@@ -6,25 +6,16 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 import { iconAdministrator } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
-  },
-  data() {
-    return {
-      icon: iconAdministrator(),
-      value2: 'a',
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ]
-    }
-  }
-}
+const icon = ref(iconAdministrator())
+const value2 = ref('a')
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/item-disabled.vue b/examples/sites/demos/mobile/app/dropdownmenu/item-disabled.vue
index 82954b0225..05b5876e04 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/item-disabled.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/item-disabled.vue
@@ -8,57 +8,48 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref(0)
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+])
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: 0,
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 }
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/overlay.vue b/examples/sites/demos/mobile/app/dropdownmenu/overlay.vue
index e5b066bb8b..a233669f3b 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/overlay.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/overlay.vue
@@ -8,52 +8,43 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref(0)
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: 0,
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/screen-funnel.vue b/examples/sites/demos/mobile/app/dropdownmenu/screen-funnel.vue
index 346ee02cb0..79f3874485 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/screen-funnel.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/screen-funnel.vue
@@ -15,56 +15,47 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref('0')
+const value2 = ref('2')
+const value3 = ref('')
+const value4 = ref([[1, 0], [1], [3]])
+const activeColor = ref('violet')
+const option2 = ref([
+  { text: '审批中', value: '0' },
+  { text: '被驳回', value: '1' },
+  { text: '完成', value: '2' },
+  { text: '求助', value: '3' },
+  { text: '讨论', value: '4' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: '0',
-      value2: '2',
-      value3: '',
-      value4: [[1, 0], [1], [3]],
-      activeColor: 'violet',
-      option2: [
-        { text: '审批中', value: '0' },
-        { text: '被驳回', value: '1' },
-        { text: '完成', value: '2' },
-        { text: '求助', value: '3' },
-        { text: '讨论', value: '4' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: 1, text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: 1, text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: 1, text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: 1, text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/slot.vue b/examples/sites/demos/mobile/app/dropdownmenu/slot.vue
index da306e6a34..33d387db74 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/slot.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/slot.vue
@@ -4,7 +4,7 @@
       <tiny-dropdown-item v-model="value1" :options="option1">
         <template #icon>
           <div>
-            <icon-association></icon-association>
+            <tiny-icon-association></tiny-icon-association>
           </div>
         </template>
         <template #title="data">
@@ -19,61 +19,52 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 import { iconAssociation } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem,
-    IconAssociation: iconAssociation()
+const value1 = ref(0)
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+])
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: 0,
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 }
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
+const TinyIconAssociation = iconAssociation()
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/title-class.vue b/examples/sites/demos/mobile/app/dropdownmenu/title-class.vue
index 47c697b9f5..4c040a5a77 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/title-class.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/title-class.vue
@@ -15,56 +15,47 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref('0')
+const value2 = ref('2')
+const value3 = ref('')
+const value4 = ref([[1, 0], [1], [3]])
+const activeColor = ref('violet')
+const option2 = ref([
+  { text: '审批中', value: '0' },
+  { text: '被驳回', value: '1' },
+  { text: '完成', value: '2' },
+  { text: '求助', value: '3' },
+  { text: '讨论', value: '4' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: '0',
-      value2: '2',
-      value3: '',
-      value4: [[1, 0], [1], [3]],
-      activeColor: 'violet',
-      option2: [
-        { text: '审批中', value: '0' },
-        { text: '被驳回', value: '1' },
-        { text: '完成', value: '2' },
-        { text: '求助', value: '3' },
-        { text: '讨论', value: '4' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: 1, text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: 1, text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: 1, text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: 1, text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/dropdownmenu/type.vue b/examples/sites/demos/mobile/app/dropdownmenu/type.vue
index 468702623d..8a4d20cec4 100644
--- a/examples/sites/demos/mobile/app/dropdownmenu/type.vue
+++ b/examples/sites/demos/mobile/app/dropdownmenu/type.vue
@@ -8,57 +8,48 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyDropdownMenu,
-    TinyDropdownItem
+const value1 = ref(0)
+const value2 = ref('a')
+const value3 = ref('')
+const value4 = ref([[1, 2], [], []])
+const activeColor = ref('violet')
+const option1 = ref([
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 }
+])
+const option2 = ref([
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' }
+])
+const options4 = ref([
+  {
+    title: '性别',
+    data: [
+      { value: 1, text: '女' },
+      { value: 2, text: '男' }
+    ]
   },
-  data() {
-    return {
-      value1: 0,
-      value2: 'a',
-      value3: '',
-      value4: [[1, 2], [], []],
-      activeColor: 'violet',
-      option1: [
-        { text: '全部商品', value: 0 },
-        { text: '新款商品', value: 1 },
-        { text: '活动商品', value: 2 }
-      ],
-      option2: [
-        { text: '默认排序', value: 'a' },
-        { text: '好评排序', value: 'b' },
-        { text: '销量排序', value: 'c' }
-      ],
-      options4: [
-        {
-          title: '性别',
-          data: [
-            { value: 1, text: '女' },
-            { value: 2, text: '男' }
-          ]
-        },
-        {
-          title: '店铺类型',
-          data: [
-            { value: '1', text: '旗舰店' },
-            { value: 2, text: '专卖店' },
-            { value: 3, text: '专营店' }
-          ]
-        },
-        {
-          title: '商品类型',
-          data: [
-            { value: '1', text: '通用排序' },
-            { value: 2, text: '天猫直送' },
-            { value: 3, text: '公益宝贝' }
-          ]
-        }
-      ]
-    }
+  {
+    title: '店铺类型',
+    data: [
+      { value: '1', text: '旗舰店' },
+      { value: 2, text: '专卖店' },
+      { value: 3, text: '专营店' }
+    ]
+  },
+  {
+    title: '商品类型',
+    data: [
+      { value: '1', text: '通用排序' },
+      { value: 2, text: '天猫直送' },
+      { value: 3, text: '公益宝贝' }
+    ]
   }
-}
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/exception/buttonText.vue b/examples/sites/demos/mobile/app/exception/buttonText.vue
index 303661bb51..ab6beac379 100644
--- a/examples/sites/demos/mobile/app/exception/buttonText.vue
+++ b/examples/sites/demos/mobile/app/exception/buttonText.vue
@@ -4,22 +4,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyException } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyException
-  },
-  data() {
-    return {
-      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
-    }
-  },
-  methods: {
-    test() {
-      alert(11)
-    }
-  }
+const imageUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`)
+
+function test() {
+  alert(11)
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/exception/exceptionClass.vue b/examples/sites/demos/mobile/app/exception/exceptionClass.vue
index 2e6f37030b..800a72a01f 100644
--- a/examples/sites/demos/mobile/app/exception/exceptionClass.vue
+++ b/examples/sites/demos/mobile/app/exception/exceptionClass.vue
@@ -10,21 +10,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { Exception } from '@opentiny/vue'
 
-export default {
-  components: {
-    TinyException: Exception
-  },
-  data() {
-    return {
-      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`,
-      exceptionClass: 'no-problem'
-    }
-  },
-  methods: {}
-}
+const imageUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`)
+const exceptionClass = ref('no-problem')
+const TinyException = Exception
 </script>
 
 <style lang="less">
diff --git a/examples/sites/demos/mobile/app/exception/message.vue b/examples/sites/demos/mobile/app/exception/message.vue
index 01f3792e2b..79233e4e71 100644
--- a/examples/sites/demos/mobile/app/exception/message.vue
+++ b/examples/sites/demos/mobile/app/exception/message.vue
@@ -4,20 +4,10 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyException } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyException
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    test() {
-      alert(11)
-    }
-  }
+function test() {
+  alert(11)
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/exception/mobileexception.vue b/examples/sites/demos/mobile/app/exception/mobileexception.vue
index 162b86d3d9..333310a4fa 100644
--- a/examples/sites/demos/mobile/app/exception/mobileexception.vue
+++ b/examples/sites/demos/mobile/app/exception/mobileexception.vue
@@ -100,21 +100,12 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyException, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyException
-  },
-  data() {
-    return {
-      gits: false,
-      types: ''
-    }
-  }
-}
+const gits = ref(false)
+const types = ref('')
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/exception/subMessage.vue b/examples/sites/demos/mobile/app/exception/subMessage.vue
index c5cbe84f07..3b36cdabf3 100644
--- a/examples/sites/demos/mobile/app/exception/subMessage.vue
+++ b/examples/sites/demos/mobile/app/exception/subMessage.vue
@@ -4,16 +4,8 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyException } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyException
-  },
-  data() {
-    return {}
-  },
-  methods: {}
-}
+
 </script>
diff --git a/examples/sites/demos/mobile/app/exception/type.vue b/examples/sites/demos/mobile/app/exception/type.vue
index 6688ff299e..8d924c8208 100644
--- a/examples/sites/demos/mobile/app/exception/type.vue
+++ b/examples/sites/demos/mobile/app/exception/type.vue
@@ -9,22 +9,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyException } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyException
-  },
-  data() {
-    return {
-      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
-    }
-  },
-  methods: {
-    test() {
-      alert(11)
-    }
-  }
+const imageUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`)
+
+function test() {
+  alert(11)
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/abort-quest.vue b/examples/sites/demos/mobile/app/file-upload/abort-quest.vue
index eb3f818c0c..1924bfc9c3 100644
--- a/examples/sites/demos/mobile/app/file-upload/abort-quest.vue
+++ b/examples/sites/demos/mobile/app/file-upload/abort-quest.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="content">
-    <tiny-file-upload ref="upload" :action="action">
+    <tiny-file-upload ref="uploadRef" :action="action">
       <template #trigger>
         <div>
-          <icon-upload></icon-upload>
+          <tiny-icon-upload></tiny-icon-upload>
         </div>
       </template>
     </tiny-file-upload>
@@ -12,25 +12,16 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyButton } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyButton,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      action: '' // 此处可写自定义服务
-    }
-  },
-  methods: {
-    cancelUpload() {
-      this.$refs.upload.abort()
-    }
-  }
+const action = ref('')
+const uploadRef = ref()
+const TinyIconUpload = iconUpload()
+
+function cancelUpload() {
+  uploadRef.value.abort()
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/accept-file.vue b/examples/sites/demos/mobile/app/file-upload/accept-file.vue
index fb8dcadb7a..5aaa805b00 100644
--- a/examples/sites/demos/mobile/app/file-upload/accept-file.vue
+++ b/examples/sites/demos/mobile/app/file-upload/accept-file.vue
@@ -1,25 +1,18 @@
 <template>
   <tiny-file-upload :action="action" accept=".doc,.docx" :file-list="fileList">
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      action: '', // 此处可写自定义服务
-      fileList: []
-    }
-  }
-}
+const action = ref('')
+// 此处可写自定义服务
+const fileList = ref([])
+const TinyIconUpload = iconUpload()
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/clear-files.vue b/examples/sites/demos/mobile/app/file-upload/clear-files.vue
index 2bcd3b6a29..adc8ad5502 100644
--- a/examples/sites/demos/mobile/app/file-upload/clear-files.vue
+++ b/examples/sites/demos/mobile/app/file-upload/clear-files.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="content">
-    <tiny-file-upload ref="upload" :action="action" :file-list="fileList">
+    <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList">
       <template #trigger>
-        <icon-upload></icon-upload>
+        <tiny-icon-upload></tiny-icon-upload>
       </template>
     </tiny-file-upload>
     <br />
@@ -10,35 +10,26 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyButton } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyButton,
-    IconUpload: iconUpload()
+const action = ref('http://localhost:3000/api/upload')
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        }
-      ]
-    }
-  },
-  methods: {
-    cancelUpload() {
-      this.$refs.upload.clearFiles()
-    }
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
   }
+])
+const uploadRef = ref()
+const TinyIconUpload = iconUpload()
+
+function cancelUpload() {
+  uploadRef.value.clearFiles()
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/custom-trigger.vue b/examples/sites/demos/mobile/app/file-upload/custom-trigger.vue
index ae551a850d..2c00d4bd1b 100644
--- a/examples/sites/demos/mobile/app/file-upload/custom-trigger.vue
+++ b/examples/sites/demos/mobile/app/file-upload/custom-trigger.vue
@@ -1,23 +1,14 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :header-show="false">
+  <tiny-file-upload ref="uploadRef" :action="action" :header-show="false">
     <template #trigger>
       <tiny-button type="primary">我是触发源</tiny-button>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyButton
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload'
-    }
-  }
-}
+const action = ref('http://localhost:3000/api/upload')
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue b/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue
index fda7957776..1c4cbec2e6 100644
--- a/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue
+++ b/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue
@@ -1,25 +1,17 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" accept=".jpg,.png">
+  <tiny-file-upload ref="uploadRef" :action="action" accept=".jpg,.png">
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
     <template #tip> 只能上传 jpg/png 文件，且不超过500 kb </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload'
-    }
-  }
-}
+const action = ref('http://localhost:3000/api/upload')
+const TinyIconUpload = iconUpload()
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/data.vue b/examples/sites/demos/mobile/app/file-upload/data.vue
index 94fb7d8c16..73caa5c43a 100644
--- a/examples/sites/demos/mobile/app/file-upload/data.vue
+++ b/examples/sites/demos/mobile/app/file-upload/data.vue
@@ -5,36 +5,28 @@
       <p class="page__desc">上传组件</p>
     </div>
     <tiny-file-upload
-      ref="upload"
+      ref="uploadRef"
       :action="action"
       :data="requestData"
       file-title="头部标题"
       :upload-icon="true"
       name="name"
     >
-      <icon-upload #trigger></icon-upload>
+      <tiny-icon-upload #trigger></tiny-icon-upload>
     </tiny-file-upload>
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      requestData: {
-        id: 123
-      },
-      action: ''
-    }
-  }
-}
+const requestData = ref({
+  id: 123
+})
+const action = ref('')
+const TinyIconUpload = iconUpload()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/file-upload/dynamic-disable.vue b/examples/sites/demos/mobile/app/file-upload/dynamic-disable.vue
index 03c3c98e11..0730f24ba3 100644
--- a/examples/sites/demos/mobile/app/file-upload/dynamic-disable.vue
+++ b/examples/sites/demos/mobile/app/file-upload/dynamic-disable.vue
@@ -1,29 +1,20 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" disabled>
+  <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" disabled>
     <template #trigger>
       <tiny-button type="primary" disabled>选取文件</tiny-button>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyButton
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        }
-      ]
-    }
+const action = ref('http://localhost:3000/api/upload')
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   }
-}
+])
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/file-icon-list.vue b/examples/sites/demos/mobile/app/file-upload/file-icon-list.vue
index 7eba9480e1..2c0fc69ec7 100644
--- a/examples/sites/demos/mobile/app/file-upload/file-icon-list.vue
+++ b/examples/sites/demos/mobile/app/file-upload/file-icon-list.vue
@@ -1,54 +1,46 @@
 <template>
   <tiny-file-upload
-    ref="upload"
+    ref="uploadRef"
     :action="action"
     file-title="我是标题"
     :file-list="fileList"
     :file-icon-list="iconList"
   >
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
+const action = ref('http://localhost:3000/api/upload')
+const fileList = ref([
+  {
+    name: 'test1名字很长名字很长名字很长名字很长名字很长名字很长',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
+    size: '1M',
+    fileType: 'png'
   },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: [
-        {
-          name: 'test1名字很长名字很长名字很长名字很长名字很长名字很长',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
-          size: '1M',
-          fileType: 'png'
-        },
-        {
-          name: 'test2',
-          url: 'http://localhost:3000/upload/test2.xlsx',
-          size: '1M',
-          fileType: 'xlsx'
-        }
-      ],
-      iconList: [
-        {
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
-          type: 'png'
-        },
-        {
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
-          type: 'xlsx'
-        }
-      ]
-    }
+  {
+    name: 'test2',
+    url: 'http://localhost:3000/upload/test2.xlsx',
+    size: '1M',
+    fileType: 'xlsx'
   }
-}
+])
+const iconList = ref([
+  {
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
+    type: 'png'
+  },
+  {
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
+    type: 'xlsx'
+  }
+])
+const TinyIconUpload = iconUpload()
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/file-picture-card.vue b/examples/sites/demos/mobile/app/file-upload/file-picture-card.vue
index 7391638933..2054e029f3 100644
--- a/examples/sites/demos/mobile/app/file-upload/file-picture-card.vue
+++ b/examples/sites/demos/mobile/app/file-upload/file-picture-card.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="content">
     <tiny-file-upload :action="action" class="upload-demo picture-demo" :file-list="fileList" list-type="picture-card">
-      <icon-plus v-slot class="tiny-svg-size" />
+      <tiny-icon-plus v-slot class="tiny-svg-size" />
       <template #file="data">
         <div>
           <img class="tiny-upload-list__item-thumbnail" :src="data.file.url" alt="" />
           <span class="tiny-upload-list__item-actions">
             <span class="tiny-upload-list__item-preview">
-              <icon-view class="tiny-svg-size" />
+              <tiny-icon-view class="tiny-svg-size" />
             </span>
             <span v-if="!disabled" class="tiny-upload-list__item-delete">
-              <icon-download class="tiny-svg-size" />
+              <tiny-icon-download class="tiny-svg-size" />
             </span>
             <span v-if="!disabled" class="tiny-upload-list__item-delete">
-              <icon-del class="tiny-svg-size" />
+              <tiny-icon-del class="tiny-svg-size" />
             </span>
           </span>
         </div>
@@ -25,52 +25,43 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue-mobile'
 import { iconPlus, iconView, iconDownload, iconDel } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyDialogBox,
-    IconPlus: iconPlus(),
-    IconView: iconView(),
-    IconDownload: iconDownload(),
-    IconDel: iconDel()
+const action = ref('http://localhost:3000/api/upload')
+const dialogVisible = ref(false)
+const dialogImageUrl = ref('')
+const disabled = ref(false)
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      dialogVisible: false,
-      dialogImageUrl: '',
-      disabled: false,
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        },
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        },
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        }
-      ]
-    }
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
+  },
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
+  },
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
+  },
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
+  },
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
   }
-}
+])
+const TinyIconPlus = iconPlus()
+const TinyIconView = iconView()
+const TinyIconDownload = iconDownload()
+const TinyIconDel = iconDel()
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/header-show.vue b/examples/sites/demos/mobile/app/file-upload/header-show.vue
index 72e76ed084..14b97e99dd 100644
--- a/examples/sites/demos/mobile/app/file-upload/header-show.vue
+++ b/examples/sites/demos/mobile/app/file-upload/header-show.vue
@@ -1,24 +1,15 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :header-show="false">
+  <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :header-show="false">
     <template #trigger>
       <tiny-button type="primary">选取文件</tiny-button>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyButton
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: []
-    }
-  }
-}
+const action = ref('http://localhost:3000/api/upload')
+const fileList = ref([])
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/manual-upload.vue b/examples/sites/demos/mobile/app/file-upload/manual-upload.vue
index 2294a982a5..70a6269054 100644
--- a/examples/sites/demos/mobile/app/file-upload/manual-upload.vue
+++ b/examples/sites/demos/mobile/app/file-upload/manual-upload.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :auto-upload="false" :header-show="false">
+  <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :auto-upload="false" :header-show="false">
     <template #trigger>
       <tiny-button type="primary">选取文件</tiny-button>
     </template>
@@ -7,24 +7,15 @@
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyButton
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: []
-    }
-  },
-  methods: {
-    submitUpload() {
-      this.$refs.upload.submit()
-    }
-  }
+const action = ref('http://localhost:3000/api/upload')
+const fileList = ref([])
+const uploadRef = ref()
+
+function submitUpload() {
+  uploadRef.value.submit()
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/max-file-count.vue b/examples/sites/demos/mobile/app/file-upload/max-file-count.vue
index e26d820514..f6ac1dd7d9 100644
--- a/examples/sites/demos/mobile/app/file-upload/max-file-count.vue
+++ b/examples/sites/demos/mobile/app/file-upload/max-file-count.vue
@@ -1,25 +1,17 @@
 <template>
   <tiny-file-upload :action="action" :limit="limit">
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      limit: 1
-    }
-  }
-}
+const action = ref('http://localhost:3000/api/upload')
+const limit = ref(1)
+const TinyIconUpload = iconUpload()
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/mini-mode.vue b/examples/sites/demos/mobile/app/file-upload/mini-mode.vue
index 5e758d9113..75341fd613 100644
--- a/examples/sites/demos/mobile/app/file-upload/mini-mode.vue
+++ b/examples/sites/demos/mobile/app/file-upload/mini-mode.vue
@@ -1,30 +1,22 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :mini-mode="true">
+  <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :mini-mode="true">
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      action: '',
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        }
-      ]
-    }
+const action = ref('')
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   }
-}
+])
+const TinyIconUpload = iconUpload()
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/multiple-file.vue b/examples/sites/demos/mobile/app/file-upload/multiple-file.vue
index 4e2352e430..df7b3144b4 100644
--- a/examples/sites/demos/mobile/app/file-upload/multiple-file.vue
+++ b/examples/sites/demos/mobile/app/file-upload/multiple-file.vue
@@ -1,24 +1,16 @@
 <template>
   <tiny-file-upload :action="action" :multiple="true">
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload'
-    }
-  }
-}
+const action = ref('http://localhost:3000/api/upload')
+const TinyIconUpload = iconUpload()
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/picture-card.vue b/examples/sites/demos/mobile/app/file-upload/picture-card.vue
index 39fce480d2..beaed4d3f6 100644
--- a/examples/sites/demos/mobile/app/file-upload/picture-card.vue
+++ b/examples/sites/demos/mobile/app/file-upload/picture-card.vue
@@ -8,7 +8,7 @@
         :action="action"
         list-type="picture-card"
       >
-        <icon-plus class="tiny-svg-size" />
+        <tiny-icon-plus class="tiny-svg-size" />
       </tiny-file-upload>
       <tiny-dialog-box v-model="dialogVisible1">
         <img width="100%" :src="dialogImageUrl1" alt="" />
@@ -23,7 +23,7 @@
         :action="action"
         list-type="picture-card"
       >
-        <icon-plus class="tiny-svg-size" />
+        <tiny-icon-plus class="tiny-svg-size" />
       </tiny-file-upload>
       <tiny-dialog-box v-model="dialogVisible1">
         <img width="100%" :src="dialogImageUrl1" alt="" />
@@ -32,60 +32,51 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyDialogBox } from '@opentiny/vue-mobile'
 import { iconPlus } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyDialogBox,
-    IconPlus: iconPlus()
+const action = ref('http://localhost:3000/api/upload')
+const dialogVisible1 = ref(false)
+const dialogImageUrl1 = ref('')
+const fileList1 = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      dialogVisible1: false,
-      dialogImageUrl1: '',
-      fileList1: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        },
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        },
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        }
-      ],
-      fileList2: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        }
-      ]
-    }
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
+  },
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
+  },
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
+  },
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
+  },
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
   }
-}
+])
+const fileList2 = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
+  },
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
+  }
+])
+const TinyIconPlus = iconPlus()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/file-upload/prevent-delete-file.vue b/examples/sites/demos/mobile/app/file-upload/prevent-delete-file.vue
index 128ab055ec..01134ce42b 100644
--- a/examples/sites/demos/mobile/app/file-upload/prevent-delete-file.vue
+++ b/examples/sites/demos/mobile/app/file-upload/prevent-delete-file.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-file-upload
-    ref="upload"
+    ref="uploadRef"
     :action="action"
     :file-list="fileList"
     :auto-upload="false"
@@ -8,39 +8,30 @@
     success-statistics
   >
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyModal } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      action: '',
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        }
-      ]
-    }
-  },
-  methods: {
-    beforeRemove(file) {
-      return new Promise((resolve, reject) => {
-        TinyModal.confirm(`确定移除 ${file.name}？`).then((res) => {
-          res === 'confirm' ? resolve() : reject(new Error('取消移除'))
-        })
-      })
-    }
+const action = ref('')
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   }
+])
+const TinyIconUpload = iconUpload()
+
+function beforeRemove(file) {
+  return new Promise((resolve, reject) => {
+    TinyModal.confirm(`确定移除 ${file.name}？`).then((res) => {
+      res === 'confirm' ? resolve() : reject(new Error('取消移除'))
+    })
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/size.vue b/examples/sites/demos/mobile/app/file-upload/size.vue
index 32142a0dc0..51cfaf9727 100644
--- a/examples/sites/demos/mobile/app/file-upload/size.vue
+++ b/examples/sites/demos/mobile/app/file-upload/size.vue
@@ -1,23 +1,14 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :header-show="false" size="medium">
+  <tiny-file-upload ref="uploadRef" :action="action" :header-show="false" size="medium">
     <template #trigger>
       <tiny-button size="medium">上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyButton
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload'
-    }
-  }
-}
+const action = ref('http://localhost:3000/api/upload')
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-events.vue b/examples/sites/demos/mobile/app/file-upload/upload-events.vue
index 323e270015..3fdeece98b 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-events.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-events.vue
@@ -14,58 +14,57 @@
       :file-list="fileList"
     >
       <template #trigger>
-        <icon-upload></icon-upload>
+        <tiny-icon-upload></tiny-icon-upload>
       </template>
     </tiny-file-upload>
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
+const action = ref('http://localhost:3000/api/upload')
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        }
-      ]
-    }
-  },
-  methods: {
-    handleRemove(file, fileList) {
-      console.log('触发删除文件回调事件')
-    },
-    handlePreview(file) {
-      console.log('文件的链接', file.url)
-    },
-    progressEvent(file) {
-      console.log('文件上传时的回调 返回进程')
-    },
-    errorEvent(file) {
-      console.log('文件上传失败回调')
-    },
-    handleExceed(files, fileList) {
-      console.log('触发文件超出个数限制回调事件')
-    },
-    handleAvatarSuccess(res, file) {
-      console.log('触发上传文件成功回调事件')
-    },
-    handleChange(res) {
-      console.log('触发上传文件改变回调事件')
-    }
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
   }
+])
+const TinyIconUpload = iconUpload()
+
+function handleRemove(file, fileList) {
+  // NISVUE3 FIXME: fileList重复定义，请手工修改
+  console.log('触发删除文件回调事件')
+}
+
+function handlePreview(file) {
+  console.log('文件的链接', file.url)
+}
+
+function progressEvent(file) {
+  console.log('文件上传时的回调 返回进程')
+}
+
+function errorEvent(file) {
+  console.log('文件上传失败回调')
+}
+
+function handleExceed(files, fileList) {
+  // NISVUE3 FIXME: fileList重复定义，请手工修改
+  console.log('触发文件超出个数限制回调事件')
+}
+
+function handleAvatarSuccess(res, file) {
+  console.log('触发上传文件成功回调事件')
+}
+
+function handleChange(res) {
+  console.log('触发上传文件改变回调事件')
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-file-list.vue b/examples/sites/demos/mobile/app/file-upload/upload-file-list.vue
index a93987ddbe..5851d31d9f 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-file-list.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-file-list.vue
@@ -1,34 +1,26 @@
 <template>
   <tiny-file-upload :action="action" :file-list="fileList">
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
+const action = ref('http://localhost:3000/api/upload')
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        },
-        {
-          name: 'test2',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        }
-      ]
-    }
+  {
+    name: 'test2',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
   }
-}
+])
+const TinyIconUpload = iconUpload()
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-http-request.vue b/examples/sites/demos/mobile/app/file-upload/upload-http-request.vue
index 3670d4b1b5..f4178c7154 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-http-request.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-http-request.vue
@@ -1,39 +1,32 @@
 <template>
-  <tiny-file-upload ref="upload" :file-list="fileList" :http-request="httpRequest" :before-upload="beforeUpload">
+  <tiny-file-upload ref="uploadRef" :file-list="fileList" :http-request="httpRequest" :before-upload="beforeUpload">
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      httpRequest: () =>
-        new Promise((resolve) => {
-          // 此处服务为 自定义上传服务
-        }),
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        }
-      ]
-    }
-  },
-  methods: {
-    beforeUpload(file) {
-      console.log('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
-      return true
-    }
+const httpRequest = ref(
+  () =>
+    new Promise((resolve) => {
+      // 此处服务为 自定义上传服务
+    })
+)
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   }
+])
+const TinyIconUpload = iconUpload()
+
+function beforeUpload(file) {
+  console.log('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+  return true
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-request.vue b/examples/sites/demos/mobile/app/file-upload/upload-request.vue
index 8c2e0222fb..da43e0d962 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-request.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-request.vue
@@ -1,46 +1,37 @@
 <template>
   <tiny-file-upload
-    ref="upload"
+    ref="uploadRef"
     :action="action"
     :file-list="fileList"
     :headers="headers"
     :before-upload="beforeUpload"
   >
     <template #trigger>
-      <icon-upload></icon-upload>
+      <tiny-icon-upload></tiny-icon-upload>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconUpload } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconUpload: iconUpload()
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      fileList: [
-        {
-          name: 'test1',
-          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        }
-      ],
-      headers: {
-        'Accept-Language': 'en,zh',
-        Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ='
-      }
-    }
-  },
-  methods: {
-    beforeUpload(file) {
-      console.log('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
-      return true
-    }
+const action = ref('http://localhost:3000/api/upload')
+const fileList = ref([
+  {
+    name: 'test1',
+    url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   }
+])
+const headers = ref({
+  'Accept-Language': 'en,zh',
+  Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ='
+})
+const TinyIconUpload = iconUpload()
+
+function beforeUpload(file) {
+  console.log('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+  return true
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/file-upload/upload-user-head.vue b/examples/sites/demos/mobile/app/file-upload/upload-user-head.vue
index 306b3d63e9..6acd19bcfe 100644
--- a/examples/sites/demos/mobile/app/file-upload/upload-user-head.vue
+++ b/examples/sites/demos/mobile/app/file-upload/upload-user-head.vue
@@ -7,30 +7,21 @@
     :header-show="false"
   >
     <img v-if="imageUrl" :src="imageUrl" class="upload-avatar-demo" />
-    <icon-plus class="tiny-svg-size" />
+    <tiny-icon-plus class="tiny-svg-size" />
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload } from '@opentiny/vue-mobile'
 import { iconPlus } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyFileUpload,
-    IconPlus: iconPlus()
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload',
-      imageUrl: ''
-    }
-  },
-  methods: {
-    handleAvatarSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw)
-    }
-  }
+const action = ref('http://localhost:3000/api/upload')
+const imageUrl = ref('')
+const TinyIconPlus = iconPlus()
+
+function handleAvatarSuccess(res, file) {
+  imageUrl.value = URL.createObjectURL(file.raw)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/file-upload/with-credentials.vue b/examples/sites/demos/mobile/app/file-upload/with-credentials.vue
index ba24785e17..68f4fc129d 100644
--- a/examples/sites/demos/mobile/app/file-upload/with-credentials.vue
+++ b/examples/sites/demos/mobile/app/file-upload/with-credentials.vue
@@ -1,24 +1,15 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :with-credentials="true" :file-list="fileList">
+  <tiny-file-upload ref="uploadRef" :action="action" :with-credentials="true" :file-list="fileList">
     <template #trigger>
       <tiny-button type="primary">选取文件</tiny-button>
     </template>
   </tiny-file-upload>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyFileUpload, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyFileUpload,
-    TinyButton
-  },
-  data() {
-    return {
-      fileList: [],
-      action: ''
-    }
-  }
-}
+const fileList = ref([])
+const action = ref('')
 </script>
diff --git a/examples/sites/demos/mobile/app/form/auto-wordwrap.vue b/examples/sites/demos/mobile/app/form/auto-wordwrap.vue
index 30d5129116..33bf82d67d 100644
--- a/examples/sites/demos/mobile/app/form/auto-wordwrap.vue
+++ b/examples/sites/demos/mobile/app/form/auto-wordwrap.vue
@@ -5,7 +5,7 @@
       <p class="page__desc">表单（校验显示位置）</p>
     </div>
     <div class="demo-form-position-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="100px" label-position="left">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" label-position="left">
         <tiny-form-item label="你真的好优秀呀！" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
@@ -28,38 +28,27 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyForm,
-    TinyFormItem,
-    TinyInput,
-    TinyButton,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      createData: {
-        users: '',
-        user: ''
-      },
-      rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }]
-      },
-      boxVisibility: false
-    }
-  },
-  methods: {
-    handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.boxVisibility = true
-        }
-      })
+const createData = ref({
+  users: '',
+  user: ''
+})
+const rules = ref({
+  users: [{ required: true, message: '必填', trigger: 'change' }]
+})
+const boxVisibility = ref(false)
+const formNameRef = ref()
+
+function handleSubmit(formName) {
+  // FIXIME $refs自动转换失败，请手工修改
+$refs[formName].validate((valid) => {
+    if (valid) {
+      boxVisibility.value = true
     }
-  }
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/form/form-label-suffix.vue b/examples/sites/demos/mobile/app/form/form-label-suffix.vue
index 612a4955bc..23312c4911 100644
--- a/examples/sites/demos/mobile/app/form/form-label-suffix.vue
+++ b/examples/sites/demos/mobile/app/form/form-label-suffix.vue
@@ -6,7 +6,7 @@
     </div>
     <div class="demo-form-padds">
       <tiny-form
-        ref="ruleForm"
+        ref="ruleFormRef"
         :model="createData"
         :rules="rules"
         label-width="100px"
@@ -33,58 +33,49 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyForm,
-    TinyFormItem,
-    TinyInput,
-    TinyButton
+const menus = ref([
+  {
+    id: 1,
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ],
-      createData: {
-        users: '',
-        user: ''
-      },
-      rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }]
-      }
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {
-    gev() {
-      console.log(this.createData.users)
-    },
-    handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          TinyModal.alert('提交成功')
-        }
-      })
-    }
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
   }
+])
+const createData = ref({
+  users: '',
+  user: ''
+})
+const rules = ref({
+  users: [{ required: true, message: '必填', trigger: 'change' }]
+})
+const formNameRef = ref()
+
+function gev() {
+  console.log(createData.value.users)
+}
+
+function handleSubmit(formName) {
+  // FIXIME $refs自动转换失败，请手工修改
+$refs[formName].validate((valid) => {
+    if (valid) {
+      TinyModal.alert('提交成功')
+    }
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/form/form-select.vue b/examples/sites/demos/mobile/app/form/form-select.vue
index b7d3557363..006d2dc0cf 100644
--- a/examples/sites/demos/mobile/app/form/form-select.vue
+++ b/examples/sites/demos/mobile/app/form/form-select.vue
@@ -5,7 +5,7 @@
       <p class="page__desc">表单（选择）</p>
     </div>
     <div class="demo-form-select-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules">
         <tiny-form-item label="标题">
           <tiny-input
             v-model="createData.user1"
@@ -18,7 +18,7 @@
       </tiny-form>
     </div>
     <div class="demo-form-select-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-position="left">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-position="left">
         <tiny-form-item label="标题">
           <tiny-input
             v-model="createData.user1"
@@ -31,7 +31,7 @@
       </tiny-form>
     </div>
     <div class="demo-form-select-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-position="left">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-position="left">
         <tiny-form-item label="标题">
           <tiny-input
             v-model="createData.user1"
@@ -47,7 +47,7 @@
       </tiny-form>
     </div>
     <div class="demo-form-select-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-position="left">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-position="left">
         <tiny-form-item label="标题">
           <tiny-input
             v-model="createData.user1"
@@ -81,7 +81,7 @@
       </tiny-form>
     </div>
     <div class="demo-form-select-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-position="top">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-position="top">
         <tiny-form-item label="标题" vertical>
           <tiny-input
             v-model="createData.user2"
@@ -116,50 +116,39 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyForm,
-    TinyFormItem,
-    TinyInput
+const menus = ref([
+  {
+    id: '小花',
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      menus: [
-        {
-          id: '小花',
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: '小树',
-          label: '我是小树'
-        },
-        {
-          id: '小草',
-          label: '我是小草'
-        },
-        {
-          id: '小叶',
-          label: '我是小叶',
-          warn: true
-        }
-      ],
-      createData: {
-        users: '',
-        user1: '',
-        user2: '',
-        user3: '',
-        user4: ''
-      },
-      rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }]
-      }
-    }
+  {
+    id: '小树',
+    label: '我是小树'
   },
-  methods: {}
-}
+  {
+    id: '小草',
+    label: '我是小草'
+  },
+  {
+    id: '小叶',
+    label: '我是小叶',
+    warn: true
+  }
+])
+const createData = ref({
+  users: '',
+  user1: '',
+  user2: '',
+  user3: '',
+  user4: ''
+})
+const rules = ref({
+  users: [{ required: true, message: '必填', trigger: 'change' }]
+})
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/form/form-tabselect.vue b/examples/sites/demos/mobile/app/form/form-tabselect.vue
index 0a11ff80af..deaa93a882 100644
--- a/examples/sites/demos/mobile/app/form/form-tabselect.vue
+++ b/examples/sites/demos/mobile/app/form/form-tabselect.vue
@@ -38,24 +38,15 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  data() {
-    return {
-      dat: 0,
-      active: 0
-    }
-  },
-  methods: {
-    change(activeVal) {
-      this.active = activeVal
-    }
-  }
+const dat = ref(0)
+const active = ref(0)
+
+function change(activeVal) {
+  active.value = activeVal
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/form/form-writeone.vue b/examples/sites/demos/mobile/app/form/form-writeone.vue
index 749f7c427c..25e43bf233 100644
--- a/examples/sites/demos/mobile/app/form/form-writeone.vue
+++ b/examples/sites/demos/mobile/app/form/form-writeone.vue
@@ -5,7 +5,7 @@
       <p class="page__desc">表单（文本框）</p>
     </div>
     <div class="demo-form-writeone-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120px" :hide-required-asterisk="true">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="120px" :hide-required-asterisk="true">
         <tiny-form-item label="标题" prop="title1" vertical>
           <tiny-input v-model="createData.title1" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
@@ -32,7 +32,7 @@
     </div>
     <div class="demo-form-writeone-padds">
       <tiny-form
-        ref="ruleForm1"
+        ref="ruleForm1Ref"
         :model="createData"
         :rules="rules"
         label-width="60px"
@@ -70,40 +70,30 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyForm,
-    TinyFormItem,
-    TinyInput,
-    TinyDialogBox
-  },
-  data() {
-    return {
-      rules: {
-        title3: [{ required: true, message: '错误信息文本，右对齐', trigger: 'change' }],
-        title5: [{ required: true, message: '错误信息文本左对齐', trigger: 'change' }]
-      },
-      createData: {
-        title1: '',
-        title2: '已填写有内容',
-        title3: '',
-        title4: ''
-      },
-      boxVisibility: false
-    }
-  },
-  methods: {
-    handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.boxVisibility = true
-        }
-      })
+const rules = ref({
+  title3: [{ required: true, message: '错误信息文本，右对齐', trigger: 'change' }],
+  title5: [{ required: true, message: '错误信息文本左对齐', trigger: 'change' }]
+})
+const createData = ref({
+  title1: '',
+  title2: '已填写有内容',
+  title3: '',
+  title4: ''
+})
+const boxVisibility = ref(false)
+const formNameRef = ref()
+
+function handleSubmit(formName) {
+  // FIXIME $refs自动转换失败，请手工修改
+$refs[formName].validate((valid) => {
+    if (valid) {
+      boxVisibility.value = true
     }
-  }
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/form/form-writetwo.vue b/examples/sites/demos/mobile/app/form/form-writetwo.vue
index 4b0db6c4f5..4b108848fb 100644
--- a/examples/sites/demos/mobile/app/form/form-writetwo.vue
+++ b/examples/sites/demos/mobile/app/form/form-writetwo.vue
@@ -40,30 +40,21 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      createData: {
-        title1: '标题',
-        text1: '',
-        ttext2: '已填写有内容',
-        text3: '',
-        title4: '',
-        arr: ['常用', '备用', '常用3']
-      }
-    }
-  },
-  methods: {
-    check(val) {
-      this.createData.text3 += val
-    }
-  }
+const createData = ref({
+  title1: '标题',
+  text1: '',
+  ttext2: '已填写有内容',
+  text3: '',
+  title4: '',
+  arr: ['常用', '备用', '常用3']
+})
+
+function check(val) {
+  createData.value.text3 += val
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/form/hide-required-asterisk.vue b/examples/sites/demos/mobile/app/form/hide-required-asterisk.vue
index e7b5415f70..212c044901 100644
--- a/examples/sites/demos/mobile/app/form/hide-required-asterisk.vue
+++ b/examples/sites/demos/mobile/app/form/hide-required-asterisk.vue
@@ -5,7 +5,7 @@
       <p class="page__desc">表单（纯展示）</p>
     </div>
     <div class="demo-form-mobile-hide-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" :hide-required-asterisk="false" :inline="false">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :hide-required-asterisk="false" :inline="false">
         <tiny-form-item label="优秀" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
@@ -34,57 +34,46 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyForm,
-    TinyFormItem,
-    TinyInput,
-    TinyButton,
-    TinyDialogBox
+const menus = ref([
+  {
+    id: 1,
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ],
-      createData: {
-        users: '',
-        user: ''
-      },
-      rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }]
-      },
-      boxVisibility: false
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {
-    handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.boxVisibility = true
-        }
-      })
-    }
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
   }
+])
+const createData = ref({
+  users: '',
+  user: ''
+})
+const rules = ref({
+  users: [{ required: true, message: '必填', trigger: 'change' }]
+})
+const boxVisibility = ref(false)
+const formNameRef = ref()
+
+function handleSubmit(formName) {
+  // FIXIME $refs自动转换失败，请手工修改
+$refs[formName].validate((valid) => {
+    if (valid) {
+      boxVisibility.value = true
+    }
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/form/label-width.vue b/examples/sites/demos/mobile/app/form/label-width.vue
index a1f96cb8b8..675eaca7c4 100644
--- a/examples/sites/demos/mobile/app/form/label-width.vue
+++ b/examples/sites/demos/mobile/app/form/label-width.vue
@@ -5,7 +5,7 @@
       <p class="page__desc">表单（设置标签宽度）</p>
     </div>
     <div class="demo-form-label-width-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="100px" label-position="left">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" label-position="left">
         <tiny-form-item label="优秀" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
@@ -34,60 +34,50 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyForm,
-    TinyFormItem,
-    TinyInput,
-    TinyButton,
-    TinyDialogBox
+const menus = ref([
+  {
+    id: 1,
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ],
-      createData: {
-        users: '',
-        user: ''
-      },
-      rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }]
-      },
-      boxVisibility: false
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {
-    gev() {
-      console.log(this.createData.users)
-    },
-    handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.boxVisibility = true
-        }
-      })
-    }
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
   }
+])
+const createData = ref({
+  users: '',
+  user: ''
+})
+const rules = ref({
+  users: [{ required: true, message: '必填', trigger: 'change' }]
+})
+const boxVisibility = ref(false)
+const formNameRef = ref()
+
+function gev() {
+  console.log(createData.value.users)
+}
+
+function handleSubmit(formName) {
+  // FIXIME $refs自动转换失败，请手工修改
+$refs[formName].validate((valid) => {
+    if (valid) {
+      boxVisibility.value = true
+    }
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/form/only-read.vue b/examples/sites/demos/mobile/app/form/only-read.vue
index b137fd1b65..03d31b804d 100644
--- a/examples/sites/demos/mobile/app/form/only-read.vue
+++ b/examples/sites/demos/mobile/app/form/only-read.vue
@@ -5,7 +5,7 @@
       <p class="page__desc">表单（纯展示）</p>
     </div>
     <div class="padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120px">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="120px">
         <tiny-form-item label="个人交养老险" prop="users">
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form" readonly></tiny-input>
         </tiny-form-item>
@@ -21,7 +21,7 @@
       </tiny-form>
     </div>
     <div class="padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120px">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="120px">
         <tiny-form-item label="个人交养老险" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form" readonly></tiny-input>
         </tiny-form-item>
@@ -37,7 +37,7 @@
       </tiny-form>
     </div>
     <div class="padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="120px" label-position="top">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="120px" label-position="top">
         <tiny-form-item label="个人交养老险" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form" readonly></tiny-input>
         </tiny-form-item>
@@ -65,50 +65,39 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyForm,
-    TinyFormItem,
-    TinyInput
+const menus = ref([
+  {
+    id: 1,
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ],
-      createData: {
-        users: '-500.00',
-        user: '',
-        one: '-200.00',
-        two: '-252.50',
-        three: '-1458.60',
-        text1:
-          '很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本'
-      },
-      rules: {}
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {}
-}
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
+  }
+])
+const createData = ref({
+  users: '-500.00',
+  user: '',
+  one: '-200.00',
+  two: '-252.50',
+  three: '-1458.60',
+  text1:
+    '很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本很长的文本'
+})
+const rules = ref({})
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/form/validate-position.vue b/examples/sites/demos/mobile/app/form/validate-position.vue
index ccadaecf84..c7f672a073 100644
--- a/examples/sites/demos/mobile/app/form/validate-position.vue
+++ b/examples/sites/demos/mobile/app/form/validate-position.vue
@@ -5,7 +5,7 @@
       <p class="page__desc">表单（校验显示位置）</p>
     </div>
     <div class="demo-form-position-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" validate-position="left" label-position="left">
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" validate-position="left" label-position="left">
         <tiny-form-item label="优秀" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
@@ -34,58 +34,47 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyForm,
-    TinyFormItem,
-    TinyInput,
-    TinyButton,
-    TinyDialogBox
+const menus = ref([
+  {
+    id: 1,
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ],
-      createData: {
-        users: '',
-        user: ''
-      },
-      rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }],
-        user: [{ required: true, message: '必填', trigger: 'change' }]
-      },
-      boxVisibility: false
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {
-    handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.boxVisibility = true
-        }
-      })
-    }
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
   }
+])
+const createData = ref({
+  users: '',
+  user: ''
+})
+const rules = ref({
+  users: [{ required: true, message: '必填', trigger: 'change' }],
+  user: [{ required: true, message: '必填', trigger: 'change' }]
+})
+const boxVisibility = ref(false)
+const formNameRef = ref()
+
+function handleSubmit(formName) {
+  // FIXIME $refs自动转换失败，请手工修改
+$refs[formName].validate((valid) => {
+    if (valid) {
+      boxVisibility.value = true
+    }
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/form/validate.vue b/examples/sites/demos/mobile/app/form/validate.vue
index 0faf1c4b8b..07c85239c0 100644
--- a/examples/sites/demos/mobile/app/form/validate.vue
+++ b/examples/sites/demos/mobile/app/form/validate.vue
@@ -5,7 +5,7 @@
       <p class="page__desc">表单校验</p>
     </div>
     <div class="demo-form-validate-padds">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules" inline-message>
+      <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" inline-message>
         <tiny-form-item label="优秀" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
@@ -36,63 +36,56 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyDialogBox } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyForm,
-    TinyFormItem,
-    TinyInput,
-    TinyButton,
-    TinyDialogBox
+const menus = ref([
+  {
+    id: 1,
+    label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
   },
-  data() {
-    return {
-      menus: [
-        {
-          id: 1,
-          label: '我是小花,我是小花,我是小花,我是小花,我是小花,我是小花,我是小花'
-        },
-        {
-          id: 2,
-          label: '我是小树'
-        },
-        {
-          id: 3,
-          label: '我是小草'
-        },
-        {
-          id: 4,
-          label: '我是小叶',
-          warn: true
-        }
-      ],
-      createData: {
-        users: '',
-        user: ''
-      },
-      rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }]
-      },
-      boxVisibility: false
-    }
+  {
+    id: 2,
+    label: '我是小树'
   },
-  methods: {
-    clearValidate(formName) {
-      this.$refs[formName].clearValidate()
-    },
-    resetFields(formName) {
-      this.$refs[formName].resetFields()
-    },
-    handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.boxVisibility = true
-        }
-      })
-    }
+  {
+    id: 3,
+    label: '我是小草'
+  },
+  {
+    id: 4,
+    label: '我是小叶',
+    warn: true
   }
+])
+const createData = ref({
+  users: '',
+  user: ''
+})
+const rules = ref({
+  users: [{ required: true, message: '必填', trigger: 'change' }]
+})
+const boxVisibility = ref(false)
+const formNameRef = ref()
+
+function clearValidate(formName) {
+  // FIXIME $refs自动转换失败，请手工修改
+$refs[formName].clearValidate()
+}
+
+function resetFields(formName) {
+  // FIXIME $refs自动转换失败，请手工修改
+$refs[formName].resetFields()
+}
+
+function handleSubmit(formName) {
+  // FIXIME $refs自动转换失败，请手工修改
+$refs[formName].validate((valid) => {
+    if (valid) {
+      boxVisibility.value = true
+    }
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/icon/icon-set.vue b/examples/sites/demos/mobile/app/icon/icon-set.vue
index 1a3562d6ba..a01967c423 100644
--- a/examples/sites/demos/mobile/app/icon/icon-set.vue
+++ b/examples/sites/demos/mobile/app/icon/icon-set.vue
@@ -7,100 +7,96 @@
     <h3 class="title">12*12</h3>
     <div class="icon-demo">
       <div>
-        <icon-share class="size12 ico"></icon-share>
+        <tiny-icon-share class="size12 ico"></tiny-icon-share>
         <p>IconShare</p>
       </div>
       <div>
-        <icon-del class="size12 ico"></icon-del>
+        <tiny-icon-del class="size12 ico"></tiny-icon-del>
         <p>IconDel</p>
       </div>
       <div>
-        <icon-writing class="size12 ico"></icon-writing>
+        <tiny-icon-writing class="size12 ico"></tiny-icon-writing>
         <p>IconWriting</p>
       </div>
       <div>
-        <icon-ascending class="size12 ico"></icon-ascending>
+        <tiny-icon-ascending class="size12 ico"></tiny-icon-ascending>
         <p>IconAscending</p>
       </div>
       <div>
-        <icon-clock-work class="size12 ico"></icon-clock-work>
+        <tiny-icon-clock-work class="size12 ico"></tiny-icon-clock-work>
         <p>IconClockWork</p>
       </div>
       <div>
-        <icon-calculator class="size12 ico"></icon-calculator>
+        <tiny-icon-calculator class="size12 ico"></tiny-icon-calculator>
         <p>IconCalculator</p>
       </div>
     </div>
     <h3 class="title">16*16</h3>
     <div class="icon-demo">
       <div>
-        <icon-share class="size16 ico"></icon-share>
+        <tiny-icon-share class="size16 ico"></tiny-icon-share>
         <p>IconShare</p>
       </div>
       <div>
-        <icon-del class="size16 ico"></icon-del>
+        <tiny-icon-del class="size16 ico"></tiny-icon-del>
         <p>IconDel</p>
       </div>
       <div>
-        <icon-writing class="size16 ico"></icon-writing>
+        <tiny-icon-writing class="size16 ico"></tiny-icon-writing>
         <p>IconWriting</p>
       </div>
       <div>
-        <icon-ascending class="size16 ico"></icon-ascending>
+        <tiny-icon-ascending class="size16 ico"></tiny-icon-ascending>
         <p>IconAscending</p>
       </div>
       <div>
-        <icon-clock-work class="size16 ico"></icon-clock-work>
+        <tiny-icon-clock-work class="size16 ico"></tiny-icon-clock-work>
         <p>IconClockWork</p>
       </div>
       <div>
-        <icon-calculator class="size16 ico"></icon-calculator>
+        <tiny-icon-calculator class="size16 ico"></tiny-icon-calculator>
         <p>IconCalculator</p>
       </div>
     </div>
     <h3 class="title">24*24</h3>
     <div class="icon-demo">
       <div>
-        <icon-share class="size24 ico"></icon-share>
+        <tiny-icon-share class="size24 ico"></tiny-icon-share>
         <p>IconShare</p>
       </div>
       <div>
-        <icon-del class="size24 ico"></icon-del>
+        <tiny-icon-del class="size24 ico"></tiny-icon-del>
         <p>IconDel</p>
       </div>
       <div>
-        <icon-writing class="size24 ico"></icon-writing>
+        <tiny-icon-writing class="size24 ico"></tiny-icon-writing>
         <p>IconWriting</p>
       </div>
       <div>
-        <icon-ascending class="size24 ico"></icon-ascending>
+        <tiny-icon-ascending class="size24 ico"></tiny-icon-ascending>
         <p>IconAscending</p>
       </div>
       <div>
-        <icon-clock-work class="size24 ico"></icon-clock-work>
+        <tiny-icon-clock-work class="size24 ico"></tiny-icon-clock-work>
         <p>IconClockWork</p>
       </div>
       <div>
-        <icon-calculator class="size24 ico"></icon-calculator>
+        <tiny-icon-calculator class="size24 ico"></tiny-icon-calculator>
         <p>IconCalculator</p>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { iconShare, iconDel, iconWriting, iconAscending, iconClockWork, iconCalculator } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    IconShare: iconShare(),
-    IconDel: iconDel(),
-    IconWriting: iconWriting(),
-    IconAscending: iconAscending(),
-    IconClockWork: iconClockWork(),
-    IconCalculator: iconCalculator()
-  }
-}
+const TinyIconShare = iconShare()
+const TinyIconDel = iconDel()
+const TinyIconWriting = iconWriting()
+const TinyIconAscending = iconAscending()
+const TinyIconClockWork = iconClockWork()
+const TinyIconCalculator = iconCalculator()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/imageviewer/events-change-close.vue b/examples/sites/demos/mobile/app/imageviewer/events-change-close.vue
index 0f98577f25..a44557c6bd 100644
--- a/examples/sites/demos/mobile/app/imageviewer/events-change-close.vue
+++ b/examples/sites/demos/mobile/app/imageviewer/events-change-close.vue
@@ -14,34 +14,26 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyImageViewer, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyImageViewer,
-    TinyButton
-  },
-  data() {
-    return {
-      srcList: [
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
-      ],
-      shows: false
-    }
-  },
-  methods: {
-    fn() {
-      this.shows = true
-    },
-    handleChange(index, url) {
-      console.log('当前图片索引：' + index + '，当前图片路径：' + url)
-    },
-    handleClose(index, url) {
-      console.log('当前图片索引：' + index + '，当前图片路径：' + url)
-    }
-  }
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
+])
+const shows = ref(false)
+
+function fn() {
+  shows.value = true
+}
+
+function handleChange(index, url) {
+  console.log('当前图片索引：' + index + '，当前图片路径：' + url)
+}
+
+function handleClose(index, url) {
+  console.log('当前图片索引：' + index + '，当前图片路径：' + url)
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/imageviewer/image-full-current.vue b/examples/sites/demos/mobile/app/imageviewer/image-full-current.vue
index fa11b8ac6d..3735fcc2d6 100644
--- a/examples/sites/demos/mobile/app/imageviewer/image-full-current.vue
+++ b/examples/sites/demos/mobile/app/imageviewer/image-full-current.vue
@@ -12,28 +12,18 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyImageViewer, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyImageViewer,
-    TinyButton
-  },
-  data() {
-    return {
-      srcList: [
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
-      ],
-      shows: false
-    }
-  },
-  methods: {
-    fn() {
-      this.shows = true
-    }
-  }
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
+])
+const shows = ref(false)
+
+function fn() {
+  shows.value = true
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/imageviewer/slot-index.vue b/examples/sites/demos/mobile/app/imageviewer/slot-index.vue
index fa033fd354..037a63ef88 100644
--- a/examples/sites/demos/mobile/app/imageviewer/slot-index.vue
+++ b/examples/sites/demos/mobile/app/imageviewer/slot-index.vue
@@ -17,29 +17,19 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyImageViewer, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyImageViewer,
-    TinyButton
-  },
-  data() {
-    return {
-      zIndex: 200,
-      srcList: [
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
-      ],
-      shows: false
-    }
-  },
-  methods: {
-    fn() {
-      this.shows = true
-    }
-  }
+const zIndex = ref(200)
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
+])
+const shows = ref(false)
+
+function fn() {
+  shows.value = true
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/imageviewer/start-position.vue b/examples/sites/demos/mobile/app/imageviewer/start-position.vue
index 0d96757806..c4451ce20e 100644
--- a/examples/sites/demos/mobile/app/imageviewer/start-position.vue
+++ b/examples/sites/demos/mobile/app/imageviewer/start-position.vue
@@ -13,28 +13,18 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyImageViewer, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyImageViewer,
-    TinyButton
-  },
-  data() {
-    return {
-      srcList: [
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
-        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
-      ],
-      shows: false
-    }
-  },
-  methods: {
-    fn() {
-      this.shows = true
-    }
-  }
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
+])
+const shows = ref(false)
+
+function fn() {
+  shows.value = true
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/index-bar/base.vue b/examples/sites/demos/mobile/app/index-bar/base.vue
index 4ae3e58fb6..576b3931fc 100644
--- a/examples/sites/demos/mobile/app/index-bar/base.vue
+++ b/examples/sites/demos/mobile/app/index-bar/base.vue
@@ -13,29 +13,20 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref, onMounted } from 'vue'
 import { TinyIndexBar, TinyIndexBarAnchor } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyIndexBar,
-    TinyIndexBarAnchor
-  },
-  data() {
-    return {
-      indexList: [],
-      num: 8
-    }
-  },
-  mounted() {
-    this.indexList = Array.from(new Array(this.num), (ele, index) => String.fromCharCode(65 + index))
-  },
-  methods: {
-    addData() {
-      this.num += 2
-      this.indexList = Array.from(new Array(this.num), (ele, index) => String.fromCharCode(65 + index))
-    }
-  }
+const indexList = ref([])
+const num = ref(8)
+
+onMounted(() => {
+  indexList.value = Array.from(new Array(num.value), (ele, index) => String.fromCharCode(65 + index))
+})
+
+function addData() {
+  num.value += 2
+  indexList.value = Array.from(new Array(num.value), (ele, index) => String.fromCharCode(65 + index))
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/index-bar/event.vue b/examples/sites/demos/mobile/app/index-bar/event.vue
index 0cbe59b13c..83c18c0ad5 100644
--- a/examples/sites/demos/mobile/app/index-bar/event.vue
+++ b/examples/sites/demos/mobile/app/index-bar/event.vue
@@ -12,30 +12,22 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref, onMounted } from 'vue'
 import { TinyIndexBar, TinyIndexBarAnchor, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyIndexBar,
-    TinyIndexBarAnchor
-  },
-  data() {
-    return {
-      indexList: []
-    }
-  },
-  mounted() {
-    this.indexList = Array.from(new Array(26), (ele, index) => String.fromCharCode(65 + index))
-  },
-  methods: {
-    indexChange(value) {
-      TinyModal.message({ message: 'change事件:' + value })
-    },
-    selectIndex(value) {
-      TinyModal.message({ message: 'select事件:' + value })
-    }
-  }
+const indexList = ref([])
+
+onMounted(() => {
+  indexList.value = Array.from(new Array(26), (ele, index) => String.fromCharCode(65 + index))
+})
+
+function indexChange(value) {
+  TinyModal.message({ message: 'change事件:' + value })
+}
+
+function selectIndex(value) {
+  TinyModal.message({ message: 'select事件:' + value })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/input/basic-usage.vue b/examples/sites/demos/mobile/app/input/basic-usage.vue
index d8b28bdc77..97910326b4 100644
--- a/examples/sites/demos/mobile/app/input/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/input/basic-usage.vue
@@ -6,21 +6,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      input: '',
-      textareaVal: '',
-      placeholder: '请输入内容'
-    }
-  }
-}
+const input = ref('')
+const textareaVal = ref('')
+const placeholder = ref('请输入内容')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/clearable.vue b/examples/sites/demos/mobile/app/input/clearable.vue
index 7fbbff67c2..fd9f6801b0 100644
--- a/examples/sites/demos/mobile/app/input/clearable.vue
+++ b/examples/sites/demos/mobile/app/input/clearable.vue
@@ -4,19 +4,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      input: '可一键清空'
-    }
-  }
-}
+const input = ref('可一键清空')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/counter.vue b/examples/sites/demos/mobile/app/input/counter.vue
index 4b5550a02b..a535ec4a13 100644
--- a/examples/sites/demos/mobile/app/input/counter.vue
+++ b/examples/sites/demos/mobile/app/input/counter.vue
@@ -6,20 +6,12 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      input1: 'counter 示例',
-      input2: 'show-word-limit 示例'
-    }
-  }
-}
+const input1 = ref('counter 示例')
+const input2 = ref('show-word-limit 示例')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/disabled.vue b/examples/sites/demos/mobile/app/input/disabled.vue
index 16f5ea60fb..7e21f929f6 100644
--- a/examples/sites/demos/mobile/app/input/disabled.vue
+++ b/examples/sites/demos/mobile/app/input/disabled.vue
@@ -6,21 +6,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      input: '',
-      text: '已输入值',
-      placeholder: '请输入内容'
-    }
-  }
-}
+const input = ref('')
+const text = ref('已输入值')
+const placeholder = ref('请输入内容')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/events.vue b/examples/sites/demos/mobile/app/input/events.vue
index 4ffaee449b..11e89650a2 100644
--- a/examples/sites/demos/mobile/app/input/events.vue
+++ b/examples/sites/demos/mobile/app/input/events.vue
@@ -7,38 +7,33 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      inputValue: '',
-      inputChange: '',
-      focusBlur: '',
-      clearValue: 'clear event'
-    }
-  },
-  methods: {
-    onChange() {
-      TinyModal.message('change')
-    },
-    onInput() {
-      TinyModal.message('input')
-    },
-    onBlur() {
-      TinyModal.message('blur')
-    },
-    onFocus() {
-      TinyModal.message('focus')
-    },
-    onClear() {
-      TinyModal.message('clear')
-    }
-  }
+const inputValue = ref('')
+const inputChange = ref('')
+const focusBlur = ref('')
+const clearValue = ref('clear event')
+
+function onChange() {
+  TinyModal.message('change')
+}
+
+function onInput() {
+  TinyModal.message('input')
+}
+
+function onBlur() {
+  TinyModal.message('blur')
+}
+
+function onFocus() {
+  TinyModal.message('focus')
+}
+
+function onClear() {
+  TinyModal.message('clear')
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/input/max-min-length.vue b/examples/sites/demos/mobile/app/input/max-min-length.vue
index 073ebf6fb5..8ad0de0fad 100644
--- a/examples/sites/demos/mobile/app/input/max-min-length.vue
+++ b/examples/sites/demos/mobile/app/input/max-min-length.vue
@@ -4,19 +4,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      input: '测试长度'
-    }
-  }
-}
+const input = ref('测试长度')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/methods.vue b/examples/sites/demos/mobile/app/input/methods.vue
index 015e2c72af..8cbaac117c 100644
--- a/examples/sites/demos/mobile/app/input/methods.vue
+++ b/examples/sites/demos/mobile/app/input/methods.vue
@@ -3,40 +3,34 @@
     <section>
       <tiny-button plain @click="focus">focus</tiny-button>
       <tiny-button plain @click="blur">blur</tiny-button>
-      <tiny-input ref="inputRef" v-model="value" placeholder="Please input"></tiny-input>
+      <tiny-input ref="inputRefRef" v-model="value" placeholder="Please input"></tiny-input>
     </section>
     <section>
       <tiny-button plain @click="select">select</tiny-button>
-      <tiny-input ref="selectRef" v-model="selectValue" placeholder="Please input"></tiny-input>
+      <tiny-input ref="selectRefRef" v-model="selectValue" placeholder="Please input"></tiny-input>
     </section>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput,
-    TinyButton
-  },
-  data() {
-    return {
-      value: '',
-      selectValue: '123456'
-    }
-  },
-  methods: {
-    select() {
-      this.$refs.selectRef.select()
-    },
-    blur() {
-      this.$refs.inputRef.blur()
-    },
-    focus() {
-      this.$refs.inputRef.focus()
-    }
-  }
+const value = ref('')
+const selectValue = ref('123456')
+const selectRefRef = ref()
+const inputRefRef = ref()
+
+function select() {
+  selectRefRef.value.select()
+}
+
+function blur() {
+  inputRefRef.value.blur()
+}
+
+function focus() {
+  inputRefRef.value.focus()
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/input/native-attributes.vue b/examples/sites/demos/mobile/app/input/native-attributes.vue
index 193b874c6e..03963084bf 100644
--- a/examples/sites/demos/mobile/app/input/native-attributes.vue
+++ b/examples/sites/demos/mobile/app/input/native-attributes.vue
@@ -25,23 +25,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      autofocusVal: '',
-      input: 'readonly',
-      inputStep: 2,
-      inputAutocomplete: '',
-      username: ''
-    }
-  }
-}
+const autofocusVal = ref('')
+const input = ref('readonly')
+const inputStep = ref(2)
+const inputAutocomplete = ref('')
+const username = ref('')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/prefix-suffix-icon.vue b/examples/sites/demos/mobile/app/input/prefix-suffix-icon.vue
index 39a39d6a52..74ef33dbb2 100644
--- a/examples/sites/demos/mobile/app/input/prefix-suffix-icon.vue
+++ b/examples/sites/demos/mobile/app/input/prefix-suffix-icon.vue
@@ -5,21 +5,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 import { iconSearch } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      value: '',
-      IconSearch: iconSearch()
-    }
-  }
-}
+const value = ref('')
+const IconSearch = iconSearch()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/show-password.vue b/examples/sites/demos/mobile/app/input/show-password.vue
index fa66b900e7..2e0bd98b25 100644
--- a/examples/sites/demos/mobile/app/input/show-password.vue
+++ b/examples/sites/demos/mobile/app/input/show-password.vue
@@ -4,19 +4,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      input: 'abcdefg'
-    }
-  }
-}
+const input = ref('abcdefg')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/slots.vue b/examples/sites/demos/mobile/app/input/slots.vue
index ebe1965a19..31e1cbc7c2 100644
--- a/examples/sites/demos/mobile/app/input/slots.vue
+++ b/examples/sites/demos/mobile/app/input/slots.vue
@@ -30,22 +30,14 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 import { IconSearch, IconCalendar } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyInput,
-    TinyIconSearch: IconSearch(),
-    TinyIconCalendar: IconCalendar()
-  },
-  data() {
-    return {
-      input: ''
-    }
-  }
-}
+const input = ref('')
+const TinyIconSearch = IconSearch()
+const TinyIconCalendar = IconCalendar()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue b/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue
index 995164e4d0..89e0531612 100644
--- a/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue
+++ b/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue
@@ -5,21 +5,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      value: '杭州西湖是我国著名的旅游胜地，其位于浙江省杭州市西部。西湖是中国最美丽的湖泊之一。',
-      rows: 3,
-      cols: 30
-    }
-  }
-}
+const value = ref('杭州西湖是我国著名的旅游胜地，其位于浙江省杭州市西部。西湖是中国最美丽的湖泊之一。')
+const rows = ref(3)
+const cols = ref(30)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/textarea-scalable.vue b/examples/sites/demos/mobile/app/input/textarea-scalable.vue
index b37d9fde4e..83be799028 100644
--- a/examples/sites/demos/mobile/app/input/textarea-scalable.vue
+++ b/examples/sites/demos/mobile/app/input/textarea-scalable.vue
@@ -17,24 +17,16 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      value1: '',
-      value2: '',
-      value3: '',
-      value4: '',
-      value5: '',
-      value6: ''
-    }
-  }
-}
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+const value4 = ref('')
+const value5 = ref('')
+const value6 = ref('')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/type-select.vue b/examples/sites/demos/mobile/app/input/type-select.vue
index 3ff7e93b16..df2e8e1b48 100644
--- a/examples/sites/demos/mobile/app/input/type-select.vue
+++ b/examples/sites/demos/mobile/app/input/type-select.vue
@@ -4,38 +4,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
+const input = ref('hello mobile')
+const menus = ref([
+  {
+    id: 1,
+    label: '很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。'
   },
-  data() {
-    return {
-      input: 'hello mobile',
-      menus: [
-        {
-          id: 1,
-          label: '很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。很长的选项。'
-        },
-        {
-          id: 2,
-          label: '选项2'
-        },
-        {
-          id: 3,
-          label: '选项3'
-        },
-        {
-          id: 4,
-          label: 'warn 为true的选项',
-          warn: true
-        }
-      ]
-    }
+  {
+    id: 2,
+    label: '选项2'
+  },
+  {
+    id: 3,
+    label: '选项3'
+  },
+  {
+    id: 4,
+    label: 'warn 为true的选项',
+    warn: true
   }
-}
+])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/type.vue b/examples/sites/demos/mobile/app/input/type.vue
index 5748709fce..75563b8bd2 100644
--- a/examples/sites/demos/mobile/app/input/type.vue
+++ b/examples/sites/demos/mobile/app/input/type.vue
@@ -15,33 +15,25 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput
-  },
-  data() {
-    return {
-      text: '',
-      password: '',
-      textarea: '',
-      email: '',
-      number: '',
-      tel: '',
-      url: '',
-      color: '#000000',
-      date: '',
-      month: '',
-      week: '',
-      datetime: '',
-      time: '',
-      file: '',
-      range: ''
-    }
-  }
-}
+const text = ref('')
+const password = ref('')
+const textarea = ref('')
+const email = ref('')
+const number = ref('')
+const tel = ref('')
+const url = ref('')
+const color = ref('#000000')
+const date = ref('')
+const month = ref('')
+const week = ref('')
+const datetime = ref('')
+const time = ref('')
+const file = ref('')
+const range = ref('')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/input/validate-event.vue b/examples/sites/demos/mobile/app/input/validate-event.vue
index d3dbe093b3..096b0e0ad8 100644
--- a/examples/sites/demos/mobile/app/input/validate-event.vue
+++ b/examples/sites/demos/mobile/app/input/validate-event.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-input">
     <div class="page__hd">
-      <tiny-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-form">
+      <tiny-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-form">
         <tiny-form-item label="活动名称" prop="name">
           <tiny-input v-model="ruleForm.name" validate-event></tiny-input>
         </tiny-form-item>
@@ -10,29 +10,19 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyInput, TinyForm, TinyFormItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyInput,
-    TinyForm,
-    TinyFormItem
-  },
-  data() {
-    return {
-      ruleForm: {
-        name: ''
-      },
-      rules: {
-        name: [
-          { required: true, message: '请输入活动名称', trigger: 'blur' },
-          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
-        ]
-      }
-    }
-  }
-}
+const ruleForm = ref({
+  name: ''
+})
+const rules = ref({
+  name: [
+    { required: true, message: '请输入活动名称', trigger: 'blur' },
+    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
+  ]
+})
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/base.vue b/examples/sites/demos/mobile/app/label/base.vue
index 3c635cfc57..85c207633a 100644
--- a/examples/sites/demos/mobile/app/label/base.vue
+++ b/examples/sites/demos/mobile/app/label/base.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/bold.vue b/examples/sites/demos/mobile/app/label/bold.vue
index 1467c959b8..96e0284670 100644
--- a/examples/sites/demos/mobile/app/label/bold.vue
+++ b/examples/sites/demos/mobile/app/label/bold.vue
@@ -4,14 +4,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/color.vue b/examples/sites/demos/mobile/app/label/color.vue
index 19ed4e5d47..18c4fc3898 100644
--- a/examples/sites/demos/mobile/app/label/color.vue
+++ b/examples/sites/demos/mobile/app/label/color.vue
@@ -11,14 +11,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/decimal.vue b/examples/sites/demos/mobile/app/label/decimal.vue
index 3b35045517..be406b5822 100644
--- a/examples/sites/demos/mobile/app/label/decimal.vue
+++ b/examples/sites/demos/mobile/app/label/decimal.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/ellipsis.vue b/examples/sites/demos/mobile/app/label/ellipsis.vue
index f4e06f25b8..f7eb1efb8b 100644
--- a/examples/sites/demos/mobile/app/label/ellipsis.vue
+++ b/examples/sites/demos/mobile/app/label/ellipsis.vue
@@ -7,19 +7,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  },
-  data() {
-    return {
-      text: '12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890'
-    }
-  }
-}
+const text = ref('12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/limit.vue b/examples/sites/demos/mobile/app/label/limit.vue
index 5cdd641209..77f7635cba 100644
--- a/examples/sites/demos/mobile/app/label/limit.vue
+++ b/examples/sites/demos/mobile/app/label/limit.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/position.vue b/examples/sites/demos/mobile/app/label/position.vue
index 32470d8c27..0ac0d7ad4b 100644
--- a/examples/sites/demos/mobile/app/label/position.vue
+++ b/examples/sites/demos/mobile/app/label/position.vue
@@ -7,14 +7,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/required.vue b/examples/sites/demos/mobile/app/label/required.vue
index 5225975e40..f8a412825f 100644
--- a/examples/sites/demos/mobile/app/label/required.vue
+++ b/examples/sites/demos/mobile/app/label/required.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/size.vue b/examples/sites/demos/mobile/app/label/size.vue
index 723647f646..9ab20ad1c8 100644
--- a/examples/sites/demos/mobile/app/label/size.vue
+++ b/examples/sites/demos/mobile/app/label/size.vue
@@ -8,14 +8,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/type.vue b/examples/sites/demos/mobile/app/label/type.vue
index 480b185127..582b2c57c6 100644
--- a/examples/sites/demos/mobile/app/label/type.vue
+++ b/examples/sites/demos/mobile/app/label/type.vue
@@ -7,14 +7,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/label/wholeline.vue b/examples/sites/demos/mobile/app/label/wholeline.vue
index 37906c15a1..d8661e47f7 100644
--- a/examples/sites/demos/mobile/app/label/wholeline.vue
+++ b/examples/sites/demos/mobile/app/label/wholeline.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyLabel } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyLabel
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/list/double-line.vue b/examples/sites/demos/mobile/app/list/double-line.vue
index 2d7ba19ee1..20748da12d 100644
--- a/examples/sites/demos/mobile/app/list/double-line.vue
+++ b/examples/sites/demos/mobile/app/list/double-line.vue
@@ -7,39 +7,31 @@
     <div class="demo-item">
       <tiny-list v-for="item of dataList" :key="item.id" :content="item.content" :content-des="item.des">
         <template #suffix>
-          <icon-chevron-right />
+          <tiny-icon-chevron-right />
         </template>
       </tiny-list>
     </div>
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyList } from '@opentiny/vue-mobile'
 import { iconChevronRight } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyList,
-    IconChevronRight: iconChevronRight()
+const dataList = ref([
+  {
+    id: 1,
+    content: '主文本，文本较多换行时，列表高度相应增高，文本与列表上下间距不变',
+    des: '此处是辅助说明文体，说明文本'
   },
-  data() {
-    return {
-      dataList: [
-        {
-          id: 1,
-          content: '主文本，文本较多换行时，列表高度相应增高，文本与列表上下间距不变',
-          des: '此处是辅助说明文体，说明文本'
-        },
-        {
-          id: 2,
-          content: '主文本',
-          des: '此处是辅助说明文体，说明文本，文本较多换行时，列表高度相应增高，文本与列表上下间距不变'
-        }
-      ]
-    }
+  {
+    id: 2,
+    content: '主文本',
+    des: '此处是辅助说明文体，说明文本，文本较多换行时，列表高度相应增高，文本与列表上下间距不变'
   }
-}
+])
+const TinyIconChevronRight = iconChevronRight()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/list/double-list.vue b/examples/sites/demos/mobile/app/list/double-list.vue
index 48a8ac3717..95b4343092 100644
--- a/examples/sites/demos/mobile/app/list/double-list.vue
+++ b/examples/sites/demos/mobile/app/list/double-list.vue
@@ -14,32 +14,24 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyList } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyList
+const dataList = ref([
+  {
+    id: 1,
+    content: '主文本，文本较多换行时，列表高度相应增高，文本与列表上下间距不变',
+    contentdes: '此处是辅助说明文体，说明文本',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
   },
-  data() {
-    return {
-      dataList: [
-        {
-          id: 1,
-          content: '主文本，文本较多换行时，列表高度相应增高，文本与列表上下间距不变',
-          contentdes: '此处是辅助说明文体，说明文本',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
-        },
-        {
-          id: 2,
-          content: '主文本',
-          contentdes: '此处是辅助说明文体，说明文本，文本较多换行时，列表高度相应增高，文本与列表上下间距不变',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
-        }
-      ]
-    }
+  {
+    id: 2,
+    content: '主文本',
+    contentdes: '此处是辅助说明文体，说明文本，文本较多换行时，列表高度相应增高，文本与列表上下间距不变',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
   }
-}
+])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/list/imformation-list.vue b/examples/sites/demos/mobile/app/list/imformation-list.vue
index 7b248ae145..aa47bc83d4 100644
--- a/examples/sites/demos/mobile/app/list/imformation-list.vue
+++ b/examples/sites/demos/mobile/app/list/imformation-list.vue
@@ -41,7 +41,9 @@
           </div>
         </template>
         <template #description>
-          <div class="demo-description"><icon-dialog class="demo-icon"></icon-dialog> {{ item.contentdes }}</div>
+          <div class="demo-description">
+            <tiny-icon-dialog class="demo-icon"></tiny-icon-dialog> {{ item.contentdes }}
+          </div>
         </template>
       </tiny-list>
     </div>
@@ -58,7 +60,7 @@
             </div>
           </template>
           <template #description>
-            <div class="demo-description"><icon-dialog></icon-dialog> {{ item.contentdes }}</div>
+            <div class="demo-description"><tiny-icon-dialog></tiny-icon-dialog> {{ item.contentdes }}</div>
           </template>
         </tiny-list>
       </div>
@@ -81,83 +83,75 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyList } from '@opentiny/vue-mobile'
 import { iconDialog } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyList,
-    IconDialog: iconDialog()
+const dataList = ref([
+  {
+    id: 1,
+    content: 'AI系列培训-Introduction to AI & ML-分布式',
+    subtext: '',
+    contentdes: '',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/px.png`
+  }
+])
+const dataList1 = ref([
+  {
+    id: 1,
+    content:
+      'AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流',
+    subtext: '',
+    contentdes: '01-14 00:00',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/zh.png`
+  }
+])
+const dataList2 = ref([
+  {
+    id: 1,
+    content:
+      'AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流',
+    subtext: '',
+    contentdes: '1235评论',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`
+  }
+])
+const dataList3 = ref([
+  {
+    id: 1,
+    content:
+      'AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流',
+    subtext: '',
+    contentdes: '1235播放',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
   },
-  data() {
-    return {
-      dataList: [
-        {
-          id: 1,
-          content: 'AI系列培训-Introduction to AI & ML-分布式',
-          subtext: '',
-          contentdes: '',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/px.png`
-        }
-      ],
-      dataList1: [
-        {
-          id: 1,
-          content:
-            'AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流',
-          subtext: '',
-          contentdes: '01-14 00:00',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/zh.png`
-        }
-      ],
-      dataList2: [
-        {
-          id: 1,
-          content:
-            'AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流',
-          subtext: '',
-          contentdes: '1235评论',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`
-        }
-      ],
-      dataList3: [
-        {
-          id: 1,
-          content:
-            'AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流',
-          subtext: '',
-          contentdes: '1235播放',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
-        },
-        {
-          id: 2,
-          content: 'AI系列培训',
-          subtext: '',
-          contentdes: '1235播放',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
-        }
-      ],
-      dataList4: [
-        {
-          id: 1,
-          content:
-            'AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流',
-          subtext: '',
-          contentdes: '1235播放',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/jz.png`
-        },
-        {
-          id: 2,
-          content: 'AI系列培训',
-          subtext: '',
-          contentdes: '1235播放',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dh.png`
-        }
-      ]
-    }
+  {
+    id: 2,
+    content: 'AI系列培训',
+    subtext: '',
+    contentdes: '1235播放',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
   }
-}
+])
+const dataList4 = ref([
+  {
+    id: 1,
+    content:
+      'AI系列培训-Introduction to AI & ML-分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流,分布式与并行与交流，分布式与并行与交流',
+    subtext: '',
+    contentdes: '1235播放',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/jz.png`
+  },
+  {
+    id: 2,
+    content: 'AI系列培训',
+    subtext: '',
+    contentdes: '1235播放',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dh.png`
+  }
+])
+const TinyIconDialog = iconDialog()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/list/single-line.vue b/examples/sites/demos/mobile/app/list/single-line.vue
index 1a1f2d762b..c0bd5da1dc 100644
--- a/examples/sites/demos/mobile/app/list/single-line.vue
+++ b/examples/sites/demos/mobile/app/list/single-line.vue
@@ -8,7 +8,7 @@
       <p>主文本+次文本(可选)+提示性图标</p>
       <tiny-list v-for="item of dataList" :key="item.id" :content="content" :sub-text="text">
         <template #suffix>
-          <icon-chevron-right />
+          <tiny-icon-chevron-right />
         </template>
       </tiny-list>
     </div>
@@ -16,7 +16,7 @@
       <p>操作性图标+主文本</p>
       <tiny-list v-for="item of dataList" :key="item.id" :content="content">
         <template #prefix>
-          <icon-help />
+          <tiny-icon-help />
         </template>
       </tiny-list>
     </div>
@@ -24,10 +24,10 @@
       <p>主文本+次文本(可选)+提示性图标</p>
       <tiny-list v-for="item of dataList" :key="item.id" :content="content">
         <template #prefix>
-          <icon-help />
+          <tiny-icon-help />
         </template>
         <template #suffix>
-          <icon-chevron-right />
+          <tiny-icon-chevron-right />
         </template>
       </tiny-list>
     </div>
@@ -38,7 +38,7 @@
           <img :src="item.img" alt="list des" style="display: block; width: 100px" />
         </template>
         <template #suffix>
-          <icon-chevron-right />
+          <tiny-icon-chevron-right />
         </template>
       </tiny-list>
     </div>
@@ -59,37 +59,29 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyList } from '@opentiny/vue-mobile'
 import { iconHelp, iconChevronRight } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyList,
-    IconHelp: iconHelp(),
-    IconChevronRight: iconChevronRight()
+const content = ref('主文本')
+const text = ref('次文本')
+const des = ref('辅助说明文字')
+const imgsrc = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`)
+const dataList = ref([
+  {
+    id: 1,
+    content: '相机胶卷（2023）',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`
   },
-  data() {
-    return {
-      content: '主文本',
-      text: '次文本',
-      des: '辅助说明文字',
-      imgsrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`,
-      dataList: [
-        {
-          id: 1,
-          content: '相机胶卷（2023）',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`
-        },
-        {
-          id: 2,
-          content: '相机胶卷（2023）',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
-        }
-      ]
-    }
+  {
+    id: 2,
+    content: '相机胶卷（2023）',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
   }
-}
+])
+const TinyIconHelp = iconHelp()
+const TinyIconChevronRight = iconChevronRight()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/list/slots.vue b/examples/sites/demos/mobile/app/list/slots.vue
index d4a81bbaa6..456558966c 100644
--- a/examples/sites/demos/mobile/app/list/slots.vue
+++ b/examples/sites/demos/mobile/app/list/slots.vue
@@ -9,47 +9,39 @@
         <img :src="item.img" style="height: 40px; width: 40px" />
       </template>
       <template #suffix>
-        <icon-rightward></icon-rightward>
+        <tiny-icon-rightward></tiny-icon-rightward>
       </template>
     </tiny-list>
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyList } from '@opentiny/vue-mobile'
 import { iconRightward } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyList,
-    IconRightward: iconRightward()
+const dataList = ref([
+  {
+    id: 1,
+    content: '主文本1',
+    subtext: '次文本1',
+    contentdes: '这是描述文本1',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`
   },
-  data() {
-    return {
-      dataList: [
-        {
-          id: 1,
-          content: '主文本1',
-          subtext: '次文本1',
-          contentdes: '这是描述文本1',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`
-        },
-        {
-          id: 2,
-          content: '主文本2',
-          subtext: '次文本2',
-          contentdes: '这是描述文本2',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
-        },
-        {
-          id: 3,
-          content: '主文本3',
-          subtext: '次文本3',
-          contentdes: '这是描述文本3',
-          img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
-        }
-      ]
-    }
+  {
+    id: 2,
+    content: '主文本2',
+    subtext: '次文本2',
+    contentdes: '这是描述文本2',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
+  },
+  {
+    id: 3,
+    content: '主文本3',
+    subtext: '次文本3',
+    contentdes: '这是描述文本3',
+    img: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`
   }
-}
+])
+const TinyIconRightward = iconRightward()
 </script>
diff --git a/examples/sites/demos/mobile/app/loading/background.vue b/examples/sites/demos/mobile/app/loading/background.vue
index cb4f4f75ab..106ee5eeaf 100644
--- a/examples/sites/demos/mobile/app/loading/background.vue
+++ b/examples/sites/demos/mobile/app/loading/background.vue
@@ -2,19 +2,18 @@
   <div id="demo-loading"></div>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue'
 import { TinyLoading } from '@opentiny/vue-mobile'
 
-export default {
-  mounted() {
-    TinyLoading.service({
-      background: '#19191960',
-      text: '自定义遮罩层背景色',
-      target: document.getElementById('demo-loading'),
-      tiny_mode: 'mobile'
-    })
-  }
-}
+onMounted(() => {
+  TinyLoading.service({
+    background: '#19191960',
+    text: '自定义遮罩层背景色',
+    target: document.getElementById('demo-loading'),
+    tiny_mode: 'mobile'
+  })
+})
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/loading/base.vue b/examples/sites/demos/mobile/app/loading/base.vue
index e973e8921a..2f90d4f193 100644
--- a/examples/sites/demos/mobile/app/loading/base.vue
+++ b/examples/sites/demos/mobile/app/loading/base.vue
@@ -5,29 +5,21 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from 'vue'
 import { TinyLoading, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  data() {
-    return {
-      loadingInstance: null
-    }
-  },
-  mounted() {
-    this.loadingInstance = TinyLoading.service({
-      tiny_mode: 'mobile',
-      target: document.getElementById('loading-box')
-    })
-  },
-  methods: {
-    closeLoading() {
-      this.loadingInstance.close()
-    }
-  }
+const loadingInstance = ref(null)
+
+onMounted(() => {
+  loadingInstance.value = TinyLoading.service({
+    tiny_mode: 'mobile',
+    target: document.getElementById('loading-box')
+  })
+})
+
+function closeLoading() {
+  loadingInstance.value.close()
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/loading/custom-class.vue b/examples/sites/demos/mobile/app/loading/custom-class.vue
index 1a13882f24..4c2a526b31 100644
--- a/examples/sites/demos/mobile/app/loading/custom-class.vue
+++ b/examples/sites/demos/mobile/app/loading/custom-class.vue
@@ -2,19 +2,18 @@
   <div id="demo-loading"></div>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue'
 import { TinyLoading } from '@opentiny/vue-mobile'
 
-export default {
-  mounted() {
-    TinyLoading.service({
-      text: '自定义 loading 类名',
-      customClass: 'my-loading',
-      target: document.getElementById('demo-loading'),
-      tiny_mode: 'mobile'
-    })
-  }
-}
+onMounted(() => {
+  TinyLoading.service({
+    text: '自定义 loading 类名',
+    customClass: 'my-loading',
+    target: document.getElementById('demo-loading'),
+    tiny_mode: 'mobile'
+  })
+})
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/loading/global-registry.vue b/examples/sites/demos/mobile/app/loading/global-registry.vue
index 61573f20a0..3527d6f4cd 100644
--- a/examples/sites/demos/mobile/app/loading/global-registry.vue
+++ b/examples/sites/demos/mobile/app/loading/global-registry.vue
@@ -8,39 +8,31 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, getCurrentInstance } from 'vue'
 import { TinyLoading, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  directives: {
-    loading: TinyLoading.directive
-  },
-  data() {
-    return {
-      showLoading: false
-    }
-  },
-  methods: {
-    handleClick() {
-      this.showLoading = true
-      setTimeout(() => {
-        this.showLoading = false
-      }, 3000)
-    },
-    handleClick2() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Loading',
-        tiny_mode: 'mobile'
-      })
-      setTimeout(() => {
-        loading.close()
-      }, 3000)
-    }
-  }
+const showLoading = ref(false)
+const instance = getCurrentInstance()
+const { $loading } = instance.appContext.config.globalProperties
+const vLoading = TinyLoading.directive
+
+function handleClick() {
+  showLoading.value = true
+  setTimeout(() => {
+    showLoading.value = false
+  }, 3000)
+}
+
+function handleClick2() {
+  const loading = $loading({
+    lock: true,
+    text: 'Loading',
+    tiny_mode: 'mobile'
+  })
+  setTimeout(() => {
+    loading.close()
+  }, 3000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/loading/size.vue b/examples/sites/demos/mobile/app/loading/size.vue
index 8fdfdda622..2c3965113d 100644
--- a/examples/sites/demos/mobile/app/loading/size.vue
+++ b/examples/sites/demos/mobile/app/loading/size.vue
@@ -7,44 +7,43 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue'
 import { TinyLoading } from '@opentiny/vue-mobile'
 
-export default {
-  mounted() {
-    // mini 尺寸
-    TinyLoading.service({
-      size: 'mini',
-      text: 'mini 尺寸',
-      target: '#loading-box0',
-      tiny_mode: 'mobile'
-    })
+onMounted(() => {
+  // mini 尺寸
+  TinyLoading.service({
+    size: 'mini',
+    text: 'mini 尺寸',
+    target: '#loading-box0',
+    tiny_mode: 'mobile'
+  })
 
-    // small 尺寸
-    TinyLoading.service({
-      size: 'small',
-      text: 'small 尺寸',
-      target: '#loading-box1',
-      tiny_mode: 'mobile'
-    })
+  // small 尺寸
+  TinyLoading.service({
+    size: 'small',
+    text: 'small 尺寸',
+    target: '#loading-box1',
+    tiny_mode: 'mobile'
+  })
 
-    // medium 尺寸
-    TinyLoading.service({
-      size: 'medium',
-      text: 'medium 尺寸',
-      target: '#loading-box2',
-      tiny_mode: 'mobile'
-    })
+  // medium 尺寸
+  TinyLoading.service({
+    size: 'medium',
+    text: 'medium 尺寸',
+    target: '#loading-box2',
+    tiny_mode: 'mobile'
+  })
 
-    // large 尺寸
-    TinyLoading.service({
-      size: 'large',
-      text: 'large 尺寸',
-      target: '#loading-box3',
-      tiny_mode: 'mobile'
-    })
-  }
-}
+  // large 尺寸
+  TinyLoading.service({
+    size: 'large',
+    text: 'large 尺寸',
+    target: '#loading-box3',
+    tiny_mode: 'mobile'
+  })
+})
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/loading/spinner.vue b/examples/sites/demos/mobile/app/loading/spinner.vue
index 5d91b5509e..e135a484c1 100644
--- a/examples/sites/demos/mobile/app/loading/spinner.vue
+++ b/examples/sites/demos/mobile/app/loading/spinner.vue
@@ -2,21 +2,20 @@
   <div id="demo-loading"></div>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue'
 import { TinyLoading } from '@opentiny/vue-mobile'
 import { iconLoading } from '@opentiny/vue-icon'
 
-export default {
-  mounted() {
-    TinyLoading.service({
-      spinner: iconLoading(),
-      text: '自定义 loading 图标',
-      target: document.getElementById('demo-loading'),
-      background: '#fff',
-      tiny_mode: 'mobile'
-    })
-  }
-}
+onMounted(() => {
+  TinyLoading.service({
+    spinner: iconLoading(),
+    text: '自定义 loading 图标',
+    target: document.getElementById('demo-loading'),
+    background: '#fff',
+    tiny_mode: 'mobile'
+  })
+})
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/loading/tip-text.vue b/examples/sites/demos/mobile/app/loading/tip-text.vue
index bd7dc53057..cd14cdb44b 100644
--- a/examples/sites/demos/mobile/app/loading/tip-text.vue
+++ b/examples/sites/demos/mobile/app/loading/tip-text.vue
@@ -2,18 +2,17 @@
   <div id="demo-loading"></div>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue'
 import { TinyLoading } from '@opentiny/vue-mobile'
 
-export default {
-  mounted() {
-    TinyLoading.service({
-      text: '加载中...',
-      tiny_mode: 'mobile',
-      target: document.getElementById('demo-loading')
-    })
-  }
-}
+onMounted(() => {
+  TinyLoading.service({
+    text: '加载中...',
+    tiny_mode: 'mobile',
+    target: document.getElementById('demo-loading')
+  })
+})
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/loading/type.vue b/examples/sites/demos/mobile/app/loading/type.vue
index 1f4970576c..800bf4f3b0 100644
--- a/examples/sites/demos/mobile/app/loading/type.vue
+++ b/examples/sites/demos/mobile/app/loading/type.vue
@@ -4,26 +4,21 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref, onMounted } from 'vue'
 import { TinyLoading } from '@opentiny/vue-mobile'
 
-export default {
-  data() {
-    return {
-      loadingInstance: null
-    }
-  },
-  mounted() {
-    this.loadingInstance = TinyLoading.service({
-      tiny_mode: 'mobile',
-      target: document.getElementById('tiny-mobile-loading2'),
-      type: 'simple'
-    })
-  },
-  methods: {
-    closeLoading() {
-      this.loadingInstance.close()
-    }
-  }
+const loadingInstance = ref(null)
+
+onMounted(() => {
+  loadingInstance.value = TinyLoading.service({
+    tiny_mode: 'mobile',
+    target: document.getElementById('tiny-mobile-loading2'),
+    type: 'simple'
+  })
+})
+
+function closeLoading() {
+  loadingInstance.value.close()
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/mask/basic-usage.vue b/examples/sites/demos/mobile/app/mask/basic-usage.vue
index af43697635..d6fa6323f3 100644
--- a/examples/sites/demos/mobile/app/mask/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/mask/basic-usage.vue
@@ -8,25 +8,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMask, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMask,
-    TinyButton
-  },
-  data() {
-    return {
-      visible: false,
-      showMsg: false
-    }
-  },
-  methods: {
-    handleClick() {
-      this.showMsg = true
-    }
-  }
+const visible = ref(false)
+const showMsg = ref(false)
+
+function handleClick() {
+  showMsg.value = true
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/mask/click-no-hide.vue b/examples/sites/demos/mobile/app/mask/click-no-hide.vue
index 4ff898598f..bb1231abcc 100644
--- a/examples/sites/demos/mobile/app/mask/click-no-hide.vue
+++ b/examples/sites/demos/mobile/app/mask/click-no-hide.vue
@@ -8,20 +8,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMask, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMask,
-    TinyButton
-  },
-  data() {
-    return {
-      visible: false
-    }
-  }
-}
+const visible = ref(false)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/mask/slot-default.vue b/examples/sites/demos/mobile/app/mask/slot-default.vue
index c026152d9b..22c5b51102 100644
--- a/examples/sites/demos/mobile/app/mask/slot-default.vue
+++ b/examples/sites/demos/mobile/app/mask/slot-default.vue
@@ -9,20 +9,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMask, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMask,
-    TinyButton
-  },
-  data() {
-    return {
-      visible: false
-    }
-  }
-}
+const visible = ref(false)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/mask/z-index.vue b/examples/sites/demos/mobile/app/mask/z-index.vue
index 852c09fd84..f18f4bd260 100644
--- a/examples/sites/demos/mobile/app/mask/z-index.vue
+++ b/examples/sites/demos/mobile/app/mask/z-index.vue
@@ -5,21 +5,12 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMask, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMask,
-    TinyButton
-  },
-  data() {
-    return {
-      visible: false,
-      zIndex: 9999
-    }
-  }
-}
+const visible = ref(false)
+const zIndex = ref(9999)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/minipicker/cancel-button-text.vue b/examples/sites/demos/mobile/app/minipicker/cancel-button-text.vue
index d7fc536419..1992949360 100644
--- a/examples/sites/demos/mobile/app/minipicker/cancel-button-text.vue
+++ b/examples/sites/demos/mobile/app/minipicker/cancel-button-text.vue
@@ -18,39 +18,28 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyMiniPicker } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyForm,
-    TinyFormItem,
-    TinyInput
+const boxVisibility = ref(false)
+const val = ref('')
+const columns2 = ref([
+  {
+    values: ['周一', '周二', '周三', '周四', '周五'],
+    defaultIndex: 2
   },
-  data() {
-    return {
-      boxVisibility: false,
-      val: '',
-      columns2: [
-        {
-          values: ['周一', '周二', '周三', '周四', '周五'],
-          defaultIndex: 2
-        },
-        {
-          values: ['上午', '下午', '晚上'],
-          defaultIndex: 1
-        }
-      ]
-    }
-  },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    },
-    getVal(val) {
-      this.val = val.join(',')
-    }
+  {
+    values: ['上午', '下午', '晚上'],
+    defaultIndex: 1
   }
+])
+
+function fn() {
+  boxVisibility.value = true
+}
+
+function getVal(val) { // NISVUE3 FIXME: val重复定义，请手工修改
+  val.value = val.join(',')
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/minipicker/cancel.vue b/examples/sites/demos/mobile/app/minipicker/cancel.vue
index d2b6747739..85761e0e32 100644
--- a/examples/sites/demos/mobile/app/minipicker/cancel.vue
+++ b/examples/sites/demos/mobile/app/minipicker/cancel.vue
@@ -12,30 +12,22 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyMiniPicker, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyButton
-  },
-  data() {
-    return {
-      boxVisibility: false,
-      columns1: ['小花', '小草', '小叶', '小树', '小星', '小月']
-    }
-  },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    },
-    Ecancel() {
-      console.log('取消')
-    },
-    Econfirm() {
-      console.log('确定')
-    }
-  }
+const boxVisibility = ref(false)
+const columns1 = ref(['小花', '小草', '小叶', '小树', '小星', '小月'])
+
+function fn() {
+  boxVisibility.value = true
+}
+
+function Ecancel() {
+  console.log('取消')
+}
+
+function Econfirm() {
+  console.log('确定')
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/minipicker/cascad.vue b/examples/sites/demos/mobile/app/minipicker/cascad.vue
index d44219ecf5..ff392902eb 100644
--- a/examples/sites/demos/mobile/app/minipicker/cascad.vue
+++ b/examples/sites/demos/mobile/app/minipicker/cascad.vue
@@ -7,7 +7,7 @@
     </tiny-form>
     <tiny-mini-picker
       @confirm="getVal"
-      ref="picker"
+      ref="pickerRef"
       title="我是级联选择器"
       :columns="columns3"
       :visible="boxVisibility"
@@ -16,109 +16,98 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyMiniPicker } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyForm,
-    TinyFormItem,
-    TinyInput
+const boxVisibility = ref(false)
+const val = ref('')
+const columns3 = ref([
+  {
+    text: '浙江',
+    children: [
+      {
+        text: '杭州',
+        children: [{ text: '西湖区' }, { text: '余杭区' }]
+      },
+      {
+        text: '温州',
+        children: [{ text: '鹿城区' }, { text: '瓯海区' }]
+      }
+    ]
   },
-  data() {
-    return {
-      boxVisibility: false,
-      val: '',
-      columns3: [
-        {
-          text: '浙江',
-          children: [
-            {
-              text: '杭州',
-              children: [{ text: '西湖区' }, { text: '余杭区' }]
-            },
-            {
-              text: '温州',
-              children: [{ text: '鹿城区' }, { text: '瓯海区' }]
-            }
-          ]
-        },
-        {
-          text: '福建',
-          children: [
-            {
-              text: '福州',
-              children: [{ text: '鼓楼区' }, { text: '台江区' }]
-            },
-            {
-              text: '厦门',
-              children: [{ text: '思明区' }, { text: '海沧区' }]
-            }
-          ]
-        },
-        {
-          text: '湖南',
-          children: [
-            {
-              text: '长沙',
-              children: [{ text: '天心区' }, { text: '雨花区' }]
-            },
-            {
-              text: '株洲',
-              children: [{ text: '芦淞区' }, { text: '天元区' }]
-            }
-          ]
-        },
-        {
-          text: '广东',
-          children: [
-            {
-              text: '深圳',
-              children: [{ text: '福田区' }, { text: '罗湖区' }]
-            },
-            {
-              text: '珠海',
-              children: [{ text: '香洲区' }, { text: '斗门区' }]
-            }
-          ]
-        },
-        {
-          text: '湖北',
-          children: [
-            {
-              text: '武汉',
-              children: [{ text: 'aa区' }, { text: 'bb区' }]
-            },
-            {
-              text: '荆州',
-              children: [{ text: 'cc区' }, { text: 'dd区' }]
-            }
-          ]
-        },
-        {
-          text: '江苏',
-          children: [
-            {
-              text: 'ww',
-              children: [{ text: 'ja区' }, { text: 'jb区' }]
-            },
-            {
-              text: 'ee',
-              children: [{ text: 'jc区' }, { text: 'jd区' }]
-            }
-          ]
-        }
-      ]
-    }
+  {
+    text: '福建',
+    children: [
+      {
+        text: '福州',
+        children: [{ text: '鼓楼区' }, { text: '台江区' }]
+      },
+      {
+        text: '厦门',
+        children: [{ text: '思明区' }, { text: '海沧区' }]
+      }
+    ]
   },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    },
-    getVal(val) {
-      this.val = val.join(',')
-    }
+  {
+    text: '湖南',
+    children: [
+      {
+        text: '长沙',
+        children: [{ text: '天心区' }, { text: '雨花区' }]
+      },
+      {
+        text: '株洲',
+        children: [{ text: '芦淞区' }, { text: '天元区' }]
+      }
+    ]
+  },
+  {
+    text: '广东',
+    children: [
+      {
+        text: '深圳',
+        children: [{ text: '福田区' }, { text: '罗湖区' }]
+      },
+      {
+        text: '珠海',
+        children: [{ text: '香洲区' }, { text: '斗门区' }]
+      }
+    ]
+  },
+  {
+    text: '湖北',
+    children: [
+      {
+        text: '武汉',
+        children: [{ text: 'aa区' }, { text: 'bb区' }]
+      },
+      {
+        text: '荆州',
+        children: [{ text: 'cc区' }, { text: 'dd区' }]
+      }
+    ]
+  },
+  {
+    text: '江苏',
+    children: [
+      {
+        text: 'ww',
+        children: [{ text: 'ja区' }, { text: 'jb区' }]
+      },
+      {
+        text: 'ee',
+        children: [{ text: 'jc区' }, { text: 'jd区' }]
+      }
+    ]
   }
+])
+
+function fn() {
+  boxVisibility.value = true
+}
+
+function getVal(val) { // NISVUE3 FIXME: val重复定义，请手工修改
+  val.value = val.join(',')
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/minipicker/change.vue b/examples/sites/demos/mobile/app/minipicker/change.vue
index c99cfabd3d..c925fad286 100644
--- a/examples/sites/demos/mobile/app/minipicker/change.vue
+++ b/examples/sites/demos/mobile/app/minipicker/change.vue
@@ -11,27 +11,18 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyMiniPicker, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyButton
-  },
-  data() {
-    return {
-      boxVisibility: false,
-      columns1: ['小花', '小草', '小叶', '小树', '小星', '小月']
-    }
-  },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    },
-    Echange(value) {
-      console.log(value, '改变后的值')
-    }
-  }
+const boxVisibility = ref(false)
+const columns1 = ref(['小花', '小草', '小叶', '小树', '小星', '小月'])
+
+function fn() {
+  boxVisibility.value = true
+}
+
+function Echange(value) {
+  console.log(value, '改变后的值')
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/minipicker/column.vue b/examples/sites/demos/mobile/app/minipicker/column.vue
index 49059bc015..cfea61e2d8 100644
--- a/examples/sites/demos/mobile/app/minipicker/column.vue
+++ b/examples/sites/demos/mobile/app/minipicker/column.vue
@@ -3,7 +3,7 @@
     <tiny-button @click="fn">cliclk me!</tiny-button>
     <tiny-mini-picker
       title="触发change事件"
-      ref="picker"
+      ref="pickerRef"
       @confirm="getVal"
       :columns="columns1"
       :visible="boxVisibility"
@@ -12,33 +12,25 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyMiniPicker, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyButton
-  },
-  data() {
-    return {
-      optionIndex: '0',
-      boxVisibility: false,
-      columns1: ['小花', '小草', '小叶', '小树', '小星', '小月']
-    }
-  },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    },
-    getVal() {
-      const values = this.$refs.picker.getColumnValues(this.optionIndex)
-      const value = this.$refs.picker.getColumnValue(this.optionIndex)
-      const index = this.$refs.picker.getColumnIndex(this.optionIndex)
-      console.log('对应列中所有选项', values)
-      console.log('对应列选中的值:', value)
-      console.log('对应列选中项的索引', index)
-    }
-  }
+const optionIndex = ref('0')
+const boxVisibility = ref(false)
+const columns1 = ref(['小花', '小草', '小叶', '小树', '小星', '小月'])
+const pickerRef = ref()
+
+function fn() {
+  boxVisibility.value = true
+}
+
+function getVal() {
+  const values = pickerRef.value.getColumnValues(optionIndex.value)
+  const value = pickerRef.value.getColumnValue(optionIndex.value)
+  const index = pickerRef.value.getColumnIndex(optionIndex.value)
+  console.log('对应列中所有选项', values)
+  console.log('对应列选中的值:', value)
+  console.log('对应列选中项的索引', index)
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/minipicker/defaultindex.vue b/examples/sites/demos/mobile/app/minipicker/defaultindex.vue
index b16267ce77..f707675902 100644
--- a/examples/sites/demos/mobile/app/minipicker/defaultindex.vue
+++ b/examples/sites/demos/mobile/app/minipicker/defaultindex.vue
@@ -11,24 +11,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyMiniPicker, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyButton
-  },
-  data() {
-    return {
-      boxVisibility: false,
-      columns1: ['小花', '小草', '小叶', '小树', '小星', '小月']
-    }
-  },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    }
-  }
+const boxVisibility = ref(false)
+const columns1 = ref(['小花', '小草', '小叶', '小树', '小星', '小月'])
+
+function fn() {
+  boxVisibility.value = true
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/minipicker/itemheight.vue b/examples/sites/demos/mobile/app/minipicker/itemheight.vue
index 67fbc8b56e..9ebae75c92 100644
--- a/examples/sites/demos/mobile/app/minipicker/itemheight.vue
+++ b/examples/sites/demos/mobile/app/minipicker/itemheight.vue
@@ -11,24 +11,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyMiniPicker, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyButton
-  },
-  data() {
-    return {
-      boxVisibility: false,
-      columns1: ['小花', '小草', '小叶', '小树', '小星', '小月']
-    }
-  },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    }
-  }
+const boxVisibility = ref(false)
+const columns1 = ref(['小花', '小草', '小叶', '小树', '小星', '小月'])
+
+function fn() {
+  boxVisibility.value = true
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/minipicker/methods.vue b/examples/sites/demos/mobile/app/minipicker/methods.vue
index 8126aae788..1df56e6309 100644
--- a/examples/sites/demos/mobile/app/minipicker/methods.vue
+++ b/examples/sites/demos/mobile/app/minipicker/methods.vue
@@ -3,7 +3,7 @@
     <tiny-button @click="fn">cliclk me!</tiny-button>
     <tiny-mini-picker
       title="设置初始值索引"
-      ref="picker"
+      ref="pickerRef"
       @change="change"
       :columns="columns1"
       :visible="boxVisibility"
@@ -13,29 +13,21 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyMiniPicker, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyButton
-  },
-  data() {
-    return {
-      boxVisibility: false,
-      columns1: ['小花', '小草', '小叶', '小树', '小星', '小月']
-    }
-  },
-  methods: {
-    change() {
-      let indexes = this.$refs.picker.getIndexes()
-      let values = this.$refs.picker.getValues()
-      console.log(indexes, values)
-    },
-    fn() {
-      this.boxVisibility = true
-    }
-  }
+const boxVisibility = ref(false)
+const columns1 = ref(['小花', '小草', '小叶', '小树', '小星', '小月'])
+const pickerRef = ref()
+
+function change() {
+  let indexes = pickerRef.value.getIndexes()
+  let values = pickerRef.value.getValues()
+  console.log(indexes, values)
+}
+
+function fn() {
+  boxVisibility.value = true
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/minipicker/multicolumn.vue b/examples/sites/demos/mobile/app/minipicker/multicolumn.vue
index 1b02c40d2a..349c8e67da 100644
--- a/examples/sites/demos/mobile/app/minipicker/multicolumn.vue
+++ b/examples/sites/demos/mobile/app/minipicker/multicolumn.vue
@@ -15,39 +15,28 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyMiniPicker } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyForm,
-    TinyFormItem,
-    TinyInput
+const boxVisibility = ref(false)
+const val = ref('')
+const columns2 = ref([
+  {
+    values: ['周一', '周二', '周三', '周四', '周五'],
+    defaultIndex: 2
   },
-  data() {
-    return {
-      boxVisibility: false,
-      val: '',
-      columns2: [
-        {
-          values: ['周一', '周二', '周三', '周四', '周五'],
-          defaultIndex: 2
-        },
-        {
-          values: ['上午', '下午', '晚上'],
-          defaultIndex: 1
-        }
-      ]
-    }
-  },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    },
-    getVal(val) {
-      this.val = val.join(',')
-    }
+  {
+    values: ['上午', '下午', '晚上'],
+    defaultIndex: 1
   }
+])
+
+function fn() {
+  boxVisibility.value = true
+}
+
+function getVal(val) { // NISVUE3 FIXME: val重复定义，请手工修改
+  val.value = val.join(',')
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/minipicker/toolbar.vue b/examples/sites/demos/mobile/app/minipicker/toolbar.vue
index f6a9212398..97e65079d8 100644
--- a/examples/sites/demos/mobile/app/minipicker/toolbar.vue
+++ b/examples/sites/demos/mobile/app/minipicker/toolbar.vue
@@ -23,31 +23,21 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyMiniPicker } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyForm,
-    TinyFormItem,
-    TinyInput
-  },
-  data() {
-    return {
-      boxVisibility: false,
-      columns1: ['小花', '小草', '小叶', '小树', '小星', '小月'],
-      val: ''
-    }
-  },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    },
-    getVal(val) {
-      this.val = val
-    }
-  }
+const boxVisibility = ref(false)
+const columns1 = ref(['小花', '小草', '小叶', '小树', '小星', '小月'])
+const val = ref('')
+
+function fn() {
+  boxVisibility.value = true
+}
+
+function getVal(val) { // NISVUE3 FIXME: val重复定义，请手工修改
+  // NISVUE3 FIXME: val重复定义，请手工修改
+  val.value = val
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/minipicker/visibleitemcount.vue b/examples/sites/demos/mobile/app/minipicker/visibleitemcount.vue
index 6f59dcb3fd..3f6af82cd3 100644
--- a/examples/sites/demos/mobile/app/minipicker/visibleitemcount.vue
+++ b/examples/sites/demos/mobile/app/minipicker/visibleitemcount.vue
@@ -11,24 +11,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyMiniPicker, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMiniPicker,
-    TinyButton
-  },
-  data() {
-    return {
-      boxVisibility: false,
-      columns1: ['小花', '小草', '小叶', '小树', '小星', '小月']
-    }
-  },
-  methods: {
-    fn() {
-      this.boxVisibility = true
-    }
-  }
+const boxVisibility = ref(false)
+const columns1 = ref(['小花', '小草', '小叶', '小树', '小星', '小月'])
+
+function fn() {
+  boxVisibility.value = true
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/base.vue b/examples/sites/demos/mobile/app/modal/base.vue
index aade73529b..90fe999ebd 100644
--- a/examples/sites/demos/mobile/app/modal/base.vue
+++ b/examples/sites/demos/mobile/app/modal/base.vue
@@ -8,34 +8,31 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    baseClick1() {
-      TinyModal.alert({ message: '单行居中对齐，多行居左对齐', showHeader: false, tiny_mode: 'mobile' })
-    },
-    baseClick2() {
-      TinyModal.alert({ message: '单行居中对齐，多行居左对齐', title: '标题', tiny_mode: 'mobile' })
-    },
-    baseClick3() {
-      TinyModal.alert({
-        message:
-          '单行居中对齐，多行居左对齐,单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐',
-        title: '标题',
-        tiny_mode: 'mobile'
-      })
-    },
-    baseClick4() {
-      TinyModal.confirm({ message: '您确定要删除吗？', tiny_mode: 'mobile' }).then((res) => {})
-    },
-    baseClick5() {
-      TinyModal.confirm({ message: '您确定要删除吗？', showHeader: false, tiny_mode: 'mobile' }).then((res) => {})
-    }
-  }
+function baseClick1() {
+  TinyModal.alert({ message: '单行居中对齐，多行居左对齐', showHeader: false, tiny_mode: 'mobile' })
+}
+
+function baseClick2() {
+  TinyModal.alert({ message: '单行居中对齐，多行居左对齐', title: '标题', tiny_mode: 'mobile' })
+}
+
+function baseClick3() {
+  TinyModal.alert({
+    message:
+      '单行居中对齐，多行居左对齐,单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐单行居中对齐，多行居左对齐',
+    title: '标题',
+    tiny_mode: 'mobile'
+  })
+}
+
+function baseClick4() {
+  TinyModal.confirm({ message: '您确定要删除吗？', tiny_mode: 'mobile' }).then((res) => {})
+}
+
+function baseClick5() {
+  TinyModal.confirm({ message: '您确定要删除吗？', showHeader: false, tiny_mode: 'mobile' }).then((res) => {})
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/cancel-event.vue b/examples/sites/demos/mobile/app/modal/cancel-event.vue
index 0a5f8226fc..9902da9552 100644
--- a/examples/sites/demos/mobile/app/modal/cancel-event.vue
+++ b/examples/sites/demos/mobile/app/modal/cancel-event.vue
@@ -9,23 +9,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyModal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    cancelClick() {
-      TinyModal.message({ message: '点击取消按钮时触发事件', tiny_mode: 'mobile' })
-    }
-  }
+const value1 = ref(false)
+
+function cancelClick() {
+  TinyModal.message({ message: '点击取消按钮时触发事件', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/close-event.vue b/examples/sites/demos/mobile/app/modal/close-event.vue
index 095dc3ae17..0eb0b0e336 100644
--- a/examples/sites/demos/mobile/app/modal/close-event.vue
+++ b/examples/sites/demos/mobile/app/modal/close-event.vue
@@ -9,23 +9,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyModal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    closeClick() {
-      TinyModal.message({ message: '点击关闭按钮时触发事件', tiny_mode: 'mobile' })
-    }
-  }
+const value1 = ref(false)
+
+function closeClick() {
+  TinyModal.message({ message: '点击关闭按钮时触发事件', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/confirm-event.vue b/examples/sites/demos/mobile/app/modal/confirm-event.vue
index 9b05cb0cca..e8e73985d5 100644
--- a/examples/sites/demos/mobile/app/modal/confirm-event.vue
+++ b/examples/sites/demos/mobile/app/modal/confirm-event.vue
@@ -9,23 +9,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyModal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    confirmClick() {
-      TinyModal.message({ message: '点击确定按钮时触发事件', tiny_mode: 'mobile' })
-    }
-  }
+const value1 = ref(false)
+
+function confirmClick() {
+  TinyModal.message({ message: '点击确定按钮时触发事件', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/duration.vue b/examples/sites/demos/mobile/app/modal/duration.vue
index fe82b6dd57..47ac9cde45 100644
--- a/examples/sites/demos/mobile/app/modal/duration.vue
+++ b/examples/sites/demos/mobile/app/modal/duration.vue
@@ -6,33 +6,28 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    baseClick() {
-      TinyModal.message({ message: '默认3000ms后自动关闭提示框', tiny_mode: 'mobile' })
-    },
-    successClick() {
-      TinyModal.message({
-        message: '500ms后自动关闭提示框',
-        status: 'success',
-        duration: '500',
-        tiny_mode: 'mobile'
-      })
-    },
-    errorClick() {
-      TinyModal.message({
-        message: '5000ms后自动关闭提示框',
-        status: 'error',
-        duration: '5000',
-        tiny_mode: 'mobile'
-      })
-    }
-  }
+function baseClick() {
+  TinyModal.message({ message: '默认3000ms后自动关闭提示框', tiny_mode: 'mobile' })
+}
+
+function successClick() {
+  TinyModal.message({
+    message: '500ms后自动关闭提示框',
+    status: 'success',
+    duration: '500',
+    tiny_mode: 'mobile'
+  })
+}
+
+function errorClick() {
+  TinyModal.message({
+    message: '5000ms后自动关闭提示框',
+    status: 'error',
+    duration: '5000',
+    tiny_mode: 'mobile'
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/esc-closable.vue b/examples/sites/demos/mobile/app/modal/esc-closable.vue
index 22930941b4..23f719854d 100644
--- a/examples/sites/demos/mobile/app/modal/esc-closable.vue
+++ b/examples/sites/demos/mobile/app/modal/esc-closable.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">按 Esc 键可以关闭弹出框</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({ message: '按 Esc 键可以关闭', escClosable: true, tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({ message: '按 Esc 键可以关闭', escClosable: true, tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/footer-slot.vue b/examples/sites/demos/mobile/app/modal/footer-slot.vue
index b36b20a6cc..2654f1d606 100644
--- a/examples/sites/demos/mobile/app/modal/footer-slot.vue
+++ b/examples/sites/demos/mobile/app/modal/footer-slot.vue
@@ -9,18 +9,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyModal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  }
-}
+const value1 = ref(false)
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/fullscreen.vue b/examples/sites/demos/mobile/app/modal/fullscreen.vue
index 9bc6d30308..63f0ef482a 100644
--- a/examples/sites/demos/mobile/app/modal/fullscreen.vue
+++ b/examples/sites/demos/mobile/app/modal/fullscreen.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">最大化显示</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({ message: '最大化显示', fullscreen: true, tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({ message: '最大化显示', fullscreen: true, tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/hide-event.vue b/examples/sites/demos/mobile/app/modal/hide-event.vue
index 0f0b6dd957..8795f35c2d 100644
--- a/examples/sites/demos/mobile/app/modal/hide-event.vue
+++ b/examples/sites/demos/mobile/app/modal/hide-event.vue
@@ -9,23 +9,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyModal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    hideClick() {
-      TinyModal.message({ message: '在窗口关闭时会触发事件', tiny_mode: 'mobile' })
-    }
-  }
+const value1 = ref(false)
+
+function hideClick() {
+  TinyModal.message({ message: '在窗口关闭时会触发事件', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/id.vue b/examples/sites/demos/mobile/app/modal/id.vue
index 795d6c713e..5d88aff566 100644
--- a/examples/sites/demos/mobile/app/modal/id.vue
+++ b/examples/sites/demos/mobile/app/modal/id.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">不允许重复点击</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.message({ message: '不允许重复点击', id: 'unique', tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.message({ message: '不允许重复点击', id: 'unique', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/is-form-reset.vue b/examples/sites/demos/mobile/app/modal/is-form-reset.vue
index c8af43587e..6627a98733 100644
--- a/examples/sites/demos/mobile/app/modal/is-form-reset.vue
+++ b/examples/sites/demos/mobile/app/modal/is-form-reset.vue
@@ -15,28 +15,15 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal, TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyModal,
-    TinyForm,
-    TinyFormItem,
-    TinyInput
-  },
-  data() {
-    return {
-      value1: false,
-      createData: {
-        username: '',
-        password: ''
-      }
-    }
-  },
-  methods: {
-    closeClick() {}
-  }
-}
+const value1 = ref(false)
+const createData = ref({
+  username: '',
+  password: ''
+})
+
+function closeClick() {}
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/lock-scroll.vue b/examples/sites/demos/mobile/app/modal/lock-scroll.vue
index 11a8dc4e4c..f6f3b3685c 100644
--- a/examples/sites/demos/mobile/app/modal/lock-scroll.vue
+++ b/examples/sites/demos/mobile/app/modal/lock-scroll.vue
@@ -2,22 +2,15 @@
   <tiny-button @click="btnClick" :reset-time="0">不锁住滚动条不要遮罩层</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({
-        message: '不锁住滚动条不要遮罩层',
-        lockScroll: false,
-        mask: false,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({
+    message: '不锁住滚动条不要遮罩层',
+    lockScroll: false,
+    mask: false,
+    tiny_mode: 'mobile'
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/lock-view.vue b/examples/sites/demos/mobile/app/modal/lock-view.vue
index c2cfe27915..b6c4209316 100644
--- a/examples/sites/demos/mobile/app/modal/lock-view.vue
+++ b/examples/sites/demos/mobile/app/modal/lock-view.vue
@@ -2,22 +2,15 @@
   <tiny-button @click="btnClick" :reset-time="0">不锁界面不要遮罩层</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({
-        message: '不锁界面不要遮罩层',
-        lockView: false,
-        mask: false,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({
+    message: '不锁界面不要遮罩层',
+    lockView: false,
+    mask: false,
+    tiny_mode: 'mobile'
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/mask-closable.vue b/examples/sites/demos/mobile/app/modal/mask-closable.vue
index 7f92e39166..423dc1ce92 100644
--- a/examples/sites/demos/mobile/app/modal/mask-closable.vue
+++ b/examples/sites/demos/mobile/app/modal/mask-closable.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">点击遮罩层可以关闭</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({ message: '点击遮罩层可以关闭', maskClosable: true, tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({ message: '点击遮罩层可以关闭', maskClosable: true, tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/message.vue b/examples/sites/demos/mobile/app/modal/message.vue
index fdf35b912c..b8780abb91 100644
--- a/examples/sites/demos/mobile/app/modal/message.vue
+++ b/examples/sites/demos/mobile/app/modal/message.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">自定义提示框的内容</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({ message: '自定义提示框的内容', tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({ message: '自定义提示框的内容', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/min-height.vue b/examples/sites/demos/mobile/app/modal/min-height.vue
index 4520319fcf..2acb1bf2a0 100644
--- a/examples/sites/demos/mobile/app/modal/min-height.vue
+++ b/examples/sites/demos/mobile/app/modal/min-height.vue
@@ -2,22 +2,15 @@
   <tiny-button @click="btnClick" :reset-time="0">提示框最小高度为300</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({
-        message: '提示框拖动最小高度为300',
-        resize: true,
-        minHeight: 300,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({
+    message: '提示框拖动最小高度为300',
+    resize: true,
+    minHeight: 300,
+    tiny_mode: 'mobile'
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/min-width.vue b/examples/sites/demos/mobile/app/modal/min-width.vue
index 15a6723b52..1a69819325 100644
--- a/examples/sites/demos/mobile/app/modal/min-width.vue
+++ b/examples/sites/demos/mobile/app/modal/min-width.vue
@@ -2,22 +2,15 @@
   <tiny-button @click="btnClick" :reset-time="0">提示框最小宽度为700</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({
-        message: '提示框拖动最小宽度为700',
-        resize: true,
-        minWidth: 700,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({
+    message: '提示框拖动最小宽度为700',
+    resize: true,
+    minWidth: 700,
+    tiny_mode: 'mobile'
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/resize.vue b/examples/sites/demos/mobile/app/modal/resize.vue
index 54a16b9bf1..aa81107262 100644
--- a/examples/sites/demos/mobile/app/modal/resize.vue
+++ b/examples/sites/demos/mobile/app/modal/resize.vue
@@ -2,23 +2,16 @@
   <tiny-button @click="btnClick" :reset-time="0">可以拖动调整窗口大小</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({
-        message: '可以拖动调整窗口大小',
-        resize: true,
-        height: 188,
-        width: 366,
-        tiny_mode: 'mobile'
-      })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({
+    message: '可以拖动调整窗口大小',
+    resize: true,
+    height: 188,
+    width: 366,
+    tiny_mode: 'mobile'
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/show-event.vue b/examples/sites/demos/mobile/app/modal/show-event.vue
index 9b98ade066..3cc896ec35 100644
--- a/examples/sites/demos/mobile/app/modal/show-event.vue
+++ b/examples/sites/demos/mobile/app/modal/show-event.vue
@@ -9,23 +9,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyModal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    showClick() {
-      TinyModal.message({ message: '在窗口显示时触发事件', tiny_mode: 'mobile' })
-    }
-  }
+const value1 = ref(false)
+
+function showClick() {
+  TinyModal.message({ message: '在窗口显示时触发事件', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/showFooter.vue b/examples/sites/demos/mobile/app/modal/showFooter.vue
index f2c09bf469..cf5a1beb77 100644
--- a/examples/sites/demos/mobile/app/modal/showFooter.vue
+++ b/examples/sites/demos/mobile/app/modal/showFooter.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">不显示底部</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({ message: '不显示底部', maskClosable: true, showFooter: false, tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({ message: '不显示底部', maskClosable: true, showFooter: false, tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/showHeader.vue b/examples/sites/demos/mobile/app/modal/showHeader.vue
index 3413d3c193..da120f56da 100644
--- a/examples/sites/demos/mobile/app/modal/showHeader.vue
+++ b/examples/sites/demos/mobile/app/modal/showHeader.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">不显示头部</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({ message: '不显示头部', showHeader: false, tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({ message: '不显示头部', showHeader: false, tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/status.vue b/examples/sites/demos/mobile/app/modal/status.vue
index 1517d21f95..46c056637c 100644
--- a/examples/sites/demos/mobile/app/modal/status.vue
+++ b/examples/sites/demos/mobile/app/modal/status.vue
@@ -8,29 +8,26 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    baseClick() {
-      TinyModal.message({ message: '基本提示图标', status: 'info', tiny_mode: 'mobile' })
-    },
-    successClick() {
-      TinyModal.message({ message: '成功提示图标', status: 'success', tiny_mode: 'mobile' })
-    },
-    warningClick() {
-      TinyModal.message({ message: '警告提示图标', status: 'warning', tiny_mode: 'mobile' })
-    },
-    errorClick() {
-      TinyModal.message({ message: '错误提示图标', status: 'error', tiny_mode: 'mobile' })
-    },
-    loadingClick() {
-      TinyModal.message({ message: '加载提示图标', status: 'loading', tiny_mode: 'mobile' })
-    }
-  }
+function baseClick() {
+  TinyModal.message({ message: '基本提示图标', status: 'info', tiny_mode: 'mobile' })
+}
+
+function successClick() {
+  TinyModal.message({ message: '成功提示图标', status: 'success', tiny_mode: 'mobile' })
+}
+
+function warningClick() {
+  TinyModal.message({ message: '警告提示图标', status: 'warning', tiny_mode: 'mobile' })
+}
+
+function errorClick() {
+  TinyModal.message({ message: '错误提示图标', status: 'error', tiny_mode: 'mobile' })
+}
+
+function loadingClick() {
+  TinyModal.message({ message: '加载提示图标', status: 'loading', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/title.vue b/examples/sites/demos/mobile/app/modal/title.vue
index 9b1a2ca9b5..b2ebe95706 100644
--- a/examples/sites/demos/mobile/app/modal/title.vue
+++ b/examples/sites/demos/mobile/app/modal/title.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">自定义标题</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({ message: '自定义标题', title: '自定义标题', tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({ message: '自定义标题', title: '自定义标题', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/top.vue b/examples/sites/demos/mobile/app/modal/top.vue
index 122fe8d993..fcffadb23e 100644
--- a/examples/sites/demos/mobile/app/modal/top.vue
+++ b/examples/sites/demos/mobile/app/modal/top.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">距离顶部的位置为500</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.message({ message: '距离顶部的位置为500', top: 500, tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.message({ message: '距离顶部的位置为500', top: 500, tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/type.vue b/examples/sites/demos/mobile/app/modal/type.vue
index b64773858a..0fee9a237f 100644
--- a/examples/sites/demos/mobile/app/modal/type.vue
+++ b/examples/sites/demos/mobile/app/modal/type.vue
@@ -6,23 +6,18 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    alertClick() {
-      TinyModal.alert({ message: 'alert 弹框', title: '弹框', tiny_mode: 'mobile' })
-    },
-    messageClick() {
-      TinyModal.message({ message: 'message 提示框', title: '弹框', tiny_mode: 'mobile' })
-    },
-    confirmClick() {
-      TinyModal.confirm({ message: '您确定要删除吗？', title: '确定框', tiny_mode: 'mobile' }).then((res) => {})
-    }
-  }
+function alertClick() {
+  TinyModal.alert({ message: 'alert 弹框', title: '弹框', tiny_mode: 'mobile' })
+}
+
+function messageClick() {
+  TinyModal.message({ message: 'message 提示框', title: '弹框', tiny_mode: 'mobile' })
+}
+
+function confirmClick() {
+  TinyModal.confirm({ message: '您确定要删除吗？', title: '确定框', tiny_mode: 'mobile' }).then((res) => {})
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/value.vue b/examples/sites/demos/mobile/app/modal/value.vue
index b795953742..ca51171a8a 100644
--- a/examples/sites/demos/mobile/app/modal/value.vue
+++ b/examples/sites/demos/mobile/app/modal/value.vue
@@ -9,18 +9,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyModal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  }
-}
+const value1 = ref(false)
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/zIndex.vue b/examples/sites/demos/mobile/app/modal/zIndex.vue
index ec852e4f93..35e5375a7d 100644
--- a/examples/sites/demos/mobile/app/modal/zIndex.vue
+++ b/examples/sites/demos/mobile/app/modal/zIndex.vue
@@ -2,17 +2,10 @@
   <tiny-button @click="btnClick" :reset-time="0">zIndex的值为500</tiny-button>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton
-  },
-  methods: {
-    btnClick() {
-      TinyModal.alert({ message: 'zIndex的值为500', zIndex: 500, tiny_mode: 'mobile' })
-    }
-  }
+function btnClick() {
+  TinyModal.alert({ message: 'zIndex的值为500', zIndex: 500, tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/modal/zoom-event.vue b/examples/sites/demos/mobile/app/modal/zoom-event.vue
index 9906353af5..b31a93420c 100644
--- a/examples/sites/demos/mobile/app/modal/zoom-event.vue
+++ b/examples/sites/demos/mobile/app/modal/zoom-event.vue
@@ -9,23 +9,13 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyButton, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyModal
-  },
-  data() {
-    return {
-      value1: false
-    }
-  },
-  methods: {
-    zoomClick() {
-      TinyModal.message({ message: '窗口缩放时触发事件', tiny_mode: 'mobile' })
-    }
-  }
+const value1 = ref(false)
+
+function zoomClick() {
+  TinyModal.message({ message: '窗口缩放时触发事件', tiny_mode: 'mobile' })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/multi-select/basic-usage.vue b/examples/sites/demos/mobile/app/multi-select/basic-usage.vue
index 71234c9655..845428417a 100644
--- a/examples/sites/demos/mobile/app/multi-select/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/multi-select/basic-usage.vue
@@ -11,378 +11,370 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMultiSelect } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMultiSelect
+const value1 = ref(['2020年', '欧洲巴黎', ['私有云']])
+const data1 = ref([
+  {
+    title: '时间',
+    options: [
+      {
+        label: '2020年',
+        value: '2020年',
+        children: [
+          {
+            label: '全年',
+            children: [],
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ]
+      },
+      {
+        label: '2021年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2021年'
+      },
+      {
+        label: '2022年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2022年'
+      }
+    ]
   },
-  data() {
-    return {
-      value1: ['2020年', '欧洲巴黎', ['私有云']],
-      data1: [
-        {
-          title: '时间',
-          options: [
-            {
-              label: '2020年',
-              value: '2020年',
-              children: [
-                {
-                  label: '全年',
-                  children: [],
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ]
-            },
-            {
-              label: '2021年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2021年'
-            },
-            {
-              label: '2022年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2022年'
-            }
-          ]
-        },
-        {
-          title: '区域',
-          options: [
-            {
-              label: '海外',
-              children: [
-                {
-                  label: '欧洲巴黎',
-                  value: '欧洲巴黎'
-                },
-                {
-                  label: '巴基斯坦',
-                  value: '巴基斯坦'
-                },
-                {
-                  label: '土耳其',
-                  value: '土耳其'
-                }
-              ],
-              value: '海外'
-            },
-            {
-              label: '中国',
-              children: [
-                {
-                  label: '北京',
-                  value: '北京'
-                },
-                {
-                  label: '上海',
-                  value: '上海'
-                },
-                {
-                  label: '南京',
-                  value: '南京'
-                }
-              ],
-              value: '中国'
-            }
-          ]
-        },
-        {
-          title: '云类型(多选)',
-          multiple: true,
-          options: [
-            {
-              label: '公有云',
-              value: '公有云'
-            },
-            {
-              label: '私有云',
-              value: '私有云'
-            },
-            {
-              label: '伙伴云',
-              value: '伙伴云'
-            },
-            {
-              label: '公有云1',
-              value: '公有云1'
-            },
-            {
-              label: '公有云2',
-              value: '公有云2'
-            }
-          ]
-        }
-      ],
-      data2: [
-        {
-          title: '时间',
-          options: [
-            {
-              label: '2020年',
-              value: '2020年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ]
-            },
-            {
-              label: '2021年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2021年'
-            },
-            {
-              label: '2022年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2022年'
-            }
-          ]
-        }
-      ],
-      value2: []
-    }
+  {
+    title: '区域',
+    options: [
+      {
+        label: '海外',
+        children: [
+          {
+            label: '欧洲巴黎',
+            value: '欧洲巴黎'
+          },
+          {
+            label: '巴基斯坦',
+            value: '巴基斯坦'
+          },
+          {
+            label: '土耳其',
+            value: '土耳其'
+          }
+        ],
+        value: '海外'
+      },
+      {
+        label: '中国',
+        children: [
+          {
+            label: '北京',
+            value: '北京'
+          },
+          {
+            label: '上海',
+            value: '上海'
+          },
+          {
+            label: '南京',
+            value: '南京'
+          }
+        ],
+        value: '中国'
+      }
+    ]
+  },
+  {
+    title: '云类型(多选)',
+    multiple: true,
+    options: [
+      {
+        label: '公有云',
+        value: '公有云'
+      },
+      {
+        label: '私有云',
+        value: '私有云'
+      },
+      {
+        label: '伙伴云',
+        value: '伙伴云'
+      },
+      {
+        label: '公有云1',
+        value: '公有云1'
+      },
+      {
+        label: '公有云2',
+        value: '公有云2'
+      }
+    ]
   }
-}
+])
+const data2 = ref([
+  {
+    title: '时间',
+    options: [
+      {
+        label: '2020年',
+        value: '2020年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ]
+      },
+      {
+        label: '2021年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2021年'
+      },
+      {
+        label: '2022年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2022年'
+      }
+    ]
+  }
+])
+const value2 = ref([])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/multi-select/disabled.vue b/examples/sites/demos/mobile/app/multi-select/disabled.vue
index 26e399616b..d06ff3d4c7 100644
--- a/examples/sites/demos/mobile/app/multi-select/disabled.vue
+++ b/examples/sites/demos/mobile/app/multi-select/disabled.vue
@@ -13,449 +13,441 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMultiSelect } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMultiSelect
+const value1 = ref(['', '', ''])
+const value2 = ref([''])
+const data1 = ref([
+  {
+    title: '时间',
+    options: [
+      {
+        label: '2020年',
+        value: '2020年',
+        children: [
+          {
+            label: '全年',
+            children: [],
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ]
+      },
+      {
+        label: '2021年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2021年'
+      },
+      {
+        label: '2022年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2022年'
+      }
+    ]
   },
-  data() {
-    return {
-      value1: ['', '', ''],
-      value2: [''],
-      data1: [
-        {
-          title: '时间',
-          options: [
-            {
-              label: '2020年',
-              value: '2020年',
-              children: [
-                {
-                  label: '全年',
-                  children: [],
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ]
-            },
-            {
-              label: '2021年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2021年'
-            },
-            {
-              label: '2022年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2022年'
-            }
-          ]
-        },
-        {
-          title: '云类型',
-          options: [
-            {
-              label: '公有云',
-              value: '公有云'
-            },
-            {
-              label: '私有云',
-              value: '私有云'
-            },
-            {
-              label: '伙伴云',
-              value: '伙伴云'
-            },
-            {
-              label: '公有云1',
-              value: '公有云1'
-            },
-            {
-              label: '公有云2',
-              value: '公有云2'
-            }
-          ]
-        }
-      ],
-      data2: [
-        {
-          title: '时间',
-          options: [
-            {
-              label: '2020年',
-              value: '2020年',
-              children: [
-                {
-                  label: '全年',
-                  children: [],
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ]
-            },
-            {
-              label: '2021年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2021年'
-            },
-            {
-              label: '2022年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2022年'
-            }
-          ]
-        },
-        {
-          title: '区域',
-          disabled: true,
-          options: [
-            {
-              label: '海外',
-              children: [
-                {
-                  label: '欧洲巴黎',
-                  value: '欧洲巴黎'
-                },
-                {
-                  label: '巴基斯坦',
-                  value: '巴基斯坦'
-                },
-                {
-                  label: '土耳其',
-                  value: '土耳其'
-                }
-              ],
-              value: '海外'
-            },
-            {
-              label: '中国',
-              children: [
-                {
-                  label: '北京',
-                  value: '北京'
-                },
-                {
-                  label: '上海',
-                  value: '上海'
-                },
-                {
-                  label: '南京',
-                  value: '南京'
-                }
-              ],
-              value: '中国'
-            }
-          ]
-        },
-        {
-          title: '云类型',
-          options: [
-            {
-              label: '公有云',
-              value: '公有云'
-            },
-            {
-              label: '私有云',
-              value: '私有云'
-            },
-            {
-              label: '伙伴云',
-              value: '伙伴云'
-            },
-            {
-              label: '公有云1',
-              value: '公有云1'
-            },
-            {
-              label: '公有云2',
-              value: '公有云2'
-            }
-          ]
-        }
-      ],
-      data3: [
-        {
-          title: '区域',
-          options: [
-            {
-              label: '中国',
-              children: [
-                {
-                  label: '北京',
-                  value: '北京'
-                },
-                {
-                  label: '上海',
-                  value: '上海',
-                  disabled: true
-                },
-                {
-                  label: '南京',
-                  value: '南京'
-                }
-              ],
-              value: '中国'
-            },
-            {
-              label: '海外',
-              disabled: true,
-              children: [
-                {
-                  label: '欧洲巴黎',
-                  value: '欧洲巴黎'
-                },
-                {
-                  label: '巴基斯坦',
-                  value: '巴基斯坦'
-                },
-                {
-                  label: '土耳其',
-                  value: '土耳其'
-                }
-              ],
-              value: '海外'
-            }
-          ]
-        }
-      ]
-    }
+  {
+    title: '云类型',
+    options: [
+      {
+        label: '公有云',
+        value: '公有云'
+      },
+      {
+        label: '私有云',
+        value: '私有云'
+      },
+      {
+        label: '伙伴云',
+        value: '伙伴云'
+      },
+      {
+        label: '公有云1',
+        value: '公有云1'
+      },
+      {
+        label: '公有云2',
+        value: '公有云2'
+      }
+    ]
   }
-}
+])
+const data2 = ref([
+  {
+    title: '时间',
+    options: [
+      {
+        label: '2020年',
+        value: '2020年',
+        children: [
+          {
+            label: '全年',
+            children: [],
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ]
+      },
+      {
+        label: '2021年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2021年'
+      },
+      {
+        label: '2022年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2022年'
+      }
+    ]
+  },
+  {
+    title: '区域',
+    disabled: true,
+    options: [
+      {
+        label: '海外',
+        children: [
+          {
+            label: '欧洲巴黎',
+            value: '欧洲巴黎'
+          },
+          {
+            label: '巴基斯坦',
+            value: '巴基斯坦'
+          },
+          {
+            label: '土耳其',
+            value: '土耳其'
+          }
+        ],
+        value: '海外'
+      },
+      {
+        label: '中国',
+        children: [
+          {
+            label: '北京',
+            value: '北京'
+          },
+          {
+            label: '上海',
+            value: '上海'
+          },
+          {
+            label: '南京',
+            value: '南京'
+          }
+        ],
+        value: '中国'
+      }
+    ]
+  },
+  {
+    title: '云类型',
+    options: [
+      {
+        label: '公有云',
+        value: '公有云'
+      },
+      {
+        label: '私有云',
+        value: '私有云'
+      },
+      {
+        label: '伙伴云',
+        value: '伙伴云'
+      },
+      {
+        label: '公有云1',
+        value: '公有云1'
+      },
+      {
+        label: '公有云2',
+        value: '公有云2'
+      }
+    ]
+  }
+])
+const data3 = ref([
+  {
+    title: '区域',
+    options: [
+      {
+        label: '中国',
+        children: [
+          {
+            label: '北京',
+            value: '北京'
+          },
+          {
+            label: '上海',
+            value: '上海',
+            disabled: true
+          },
+          {
+            label: '南京',
+            value: '南京'
+          }
+        ],
+        value: '中国'
+      },
+      {
+        label: '海外',
+        disabled: true,
+        children: [
+          {
+            label: '欧洲巴黎',
+            value: '欧洲巴黎'
+          },
+          {
+            label: '巴基斯坦',
+            value: '巴基斯坦'
+          },
+          {
+            label: '土耳其',
+            value: '土耳其'
+          }
+        ],
+        value: '海外'
+      }
+    ]
+  }
+])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/multi-select/event-click-item.vue b/examples/sites/demos/mobile/app/multi-select/event-click-item.vue
index 6d1ff2dff0..a22b34036c 100644
--- a/examples/sites/demos/mobile/app/multi-select/event-click-item.vue
+++ b/examples/sites/demos/mobile/app/multi-select/event-click-item.vue
@@ -6,238 +6,229 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMultiSelect, TinyToast } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMultiSelect
+const value = ref(['', '', ''])
+const data = ref([
+  {
+    title: '时间',
+    options: [
+      {
+        label: '2020年',
+        value: '2020年',
+        children: [
+          {
+            label: '全年',
+            children: [],
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ]
+      },
+      {
+        label: '2021年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2021年'
+      },
+      {
+        label: '2022年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2022年'
+      }
+    ]
   },
-  data() {
-    return {
-      value: ['', '', ''],
-      data: [
-        {
-          title: '时间',
-          options: [
-            {
-              label: '2020年',
-              value: '2020年',
-              children: [
-                {
-                  label: '全年',
-                  children: [],
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ]
-            },
-            {
-              label: '2021年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2021年'
-            },
-            {
-              label: '2022年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2022年'
-            }
-          ]
-        },
-        {
-          title: '区域',
-          options: [
-            {
-              label: '海外',
-              children: [
-                {
-                  label: '欧洲巴黎',
-                  value: '欧洲巴黎'
-                },
-                {
-                  label: '巴基斯坦',
-                  value: '巴基斯坦'
-                },
-                {
-                  label: '土耳其',
-                  value: '土耳其'
-                }
-              ],
-              value: '海外'
-            },
-            {
-              label: '中国',
-              children: [
-                {
-                  label: '北京',
-                  value: '北京'
-                },
-                {
-                  label: '上海',
-                  value: '上海'
-                },
-                {
-                  label: '南京',
-                  value: '南京'
-                }
-              ],
-              value: '中国'
-            }
-          ]
-        },
-        {
-          title: '云类型',
-          options: [
-            {
-              label: '公有云',
-              value: '公有云'
-            },
-            {
-              label: '私有云',
-              value: '私有云'
-            },
-            {
-              label: '伙伴云',
-              value: '伙伴云'
-            },
-            {
-              label: '公有云1',
-              value: '公有云1'
-            },
-            {
-              label: '公有云2',
-              value: '公有云2'
-            }
-          ]
-        }
-      ]
-    }
+  {
+    title: '区域',
+    options: [
+      {
+        label: '海外',
+        children: [
+          {
+            label: '欧洲巴黎',
+            value: '欧洲巴黎'
+          },
+          {
+            label: '巴基斯坦',
+            value: '巴基斯坦'
+          },
+          {
+            label: '土耳其',
+            value: '土耳其'
+          }
+        ],
+        value: '海外'
+      },
+      {
+        label: '中国',
+        children: [
+          {
+            label: '北京',
+            value: '北京'
+          },
+          {
+            label: '上海',
+            value: '上海'
+          },
+          {
+            label: '南京',
+            value: '南京'
+          }
+        ],
+        value: '中国'
+      }
+    ]
   },
-  methods: {
-    handleItemClick(item, headerIndex) {
-      const text = `${this.data[headerIndex].title}: ${item.label}`
-      TinyToast.service({
-        text
-      })
-    }
+  {
+    title: '云类型',
+    options: [
+      {
+        label: '公有云',
+        value: '公有云'
+      },
+      {
+        label: '私有云',
+        value: '私有云'
+      },
+      {
+        label: '伙伴云',
+        value: '伙伴云'
+      },
+      {
+        label: '公有云1',
+        value: '公有云1'
+      },
+      {
+        label: '公有云2',
+        value: '公有云2'
+      }
+    ]
   }
+])
+
+function handleItemClick(item, headerIndex) {
+  const text = `${data.value[headerIndex].title}: ${item.label}`
+  TinyToast.service({
+    text
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/multi-select/filter.vue b/examples/sites/demos/mobile/app/multi-select/filter.vue
index 0e4c6e15dc..f8ae47e375 100644
--- a/examples/sites/demos/mobile/app/multi-select/filter.vue
+++ b/examples/sites/demos/mobile/app/multi-select/filter.vue
@@ -11,233 +11,225 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMultiSelect } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMultiSelect
+const value = ref(['', '', ''])
+const searchValue = ref('')
+const data = ref([
+  {
+    title: '时间',
+    options: [
+      {
+        label: '2020年',
+        value: '2020年',
+        children: [
+          {
+            label: '全年',
+            children: [],
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ]
+      },
+      {
+        label: '2021年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2021年'
+      },
+      {
+        label: '2022年',
+        children: [
+          {
+            label: '全年',
+            value: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月',
+                value: '一月'
+              },
+              {
+                label: '二月',
+                value: '二月'
+              },
+              {
+                label: '三月',
+                value: '三月'
+              }
+            ],
+            value: 'Q1'
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月',
+                value: '四月'
+              },
+              {
+                label: '五月',
+                value: '五月'
+              },
+              {
+                label: '六月',
+                value: '六月'
+              }
+            ],
+            value: 'Q2'
+          }
+        ],
+        value: '2022年'
+      }
+    ]
   },
-  data() {
-    return {
-      value: ['', '', ''],
-      searchValue: '',
-      data: [
-        {
-          title: '时间',
-          options: [
-            {
-              label: '2020年',
-              value: '2020年',
-              children: [
-                {
-                  label: '全年',
-                  children: [],
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ]
-            },
-            {
-              label: '2021年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2021年'
-            },
-            {
-              label: '2022年',
-              children: [
-                {
-                  label: '全年',
-                  value: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月',
-                      value: '一月'
-                    },
-                    {
-                      label: '二月',
-                      value: '二月'
-                    },
-                    {
-                      label: '三月',
-                      value: '三月'
-                    }
-                  ],
-                  value: 'Q1'
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月',
-                      value: '四月'
-                    },
-                    {
-                      label: '五月',
-                      value: '五月'
-                    },
-                    {
-                      label: '六月',
-                      value: '六月'
-                    }
-                  ],
-                  value: 'Q2'
-                }
-              ],
-              value: '2022年'
-            }
-          ]
-        },
-        {
-          title: '区域',
-          options: [
-            {
-              label: '海外',
-              children: [
-                {
-                  label: '欧洲巴黎',
-                  value: '欧洲巴黎'
-                },
-                {
-                  label: '巴基斯坦',
-                  value: '巴基斯坦'
-                },
-                {
-                  label: '土耳其',
-                  value: '土耳其'
-                }
-              ],
-              value: '海外'
-            },
-            {
-              label: '中国',
-              children: [
-                {
-                  label: '北京',
-                  value: '北京'
-                },
-                {
-                  label: '上海',
-                  value: '上海'
-                },
-                {
-                  label: '南京',
-                  value: '南京'
-                }
-              ],
-              value: '中国'
-            }
-          ]
-        },
-        {
-          title: '云类型',
-          options: [
-            {
-              label: '公有云',
-              value: '公有云'
-            },
-            {
-              label: '私有云',
-              value: '私有云'
-            },
-            {
-              label: '伙伴云',
-              value: '伙伴云'
-            },
-            {
-              label: '公有云1',
-              value: '公有云1'
-            },
-            {
-              label: '公有云2',
-              value: '公有云2'
-            }
-          ]
-        }
-      ],
-      searchPlaceholder: '自定义提示'
-    }
+  {
+    title: '区域',
+    options: [
+      {
+        label: '海外',
+        children: [
+          {
+            label: '欧洲巴黎',
+            value: '欧洲巴黎'
+          },
+          {
+            label: '巴基斯坦',
+            value: '巴基斯坦'
+          },
+          {
+            label: '土耳其',
+            value: '土耳其'
+          }
+        ],
+        value: '海外'
+      },
+      {
+        label: '中国',
+        children: [
+          {
+            label: '北京',
+            value: '北京'
+          },
+          {
+            label: '上海',
+            value: '上海'
+          },
+          {
+            label: '南京',
+            value: '南京'
+          }
+        ],
+        value: '中国'
+      }
+    ]
+  },
+  {
+    title: '云类型',
+    options: [
+      {
+        label: '公有云',
+        value: '公有云'
+      },
+      {
+        label: '私有云',
+        value: '私有云'
+      },
+      {
+        label: '伙伴云',
+        value: '伙伴云'
+      },
+      {
+        label: '公有云1',
+        value: '公有云1'
+      },
+      {
+        label: '公有云2',
+        value: '公有云2'
+      }
+    ]
   }
-}
+])
+const searchPlaceholder = ref('自定义提示')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/multi-select/mask.vue b/examples/sites/demos/mobile/app/multi-select/mask.vue
index 9d3454978d..7f6aa39c3c 100644
--- a/examples/sites/demos/mobile/app/multi-select/mask.vue
+++ b/examples/sites/demos/mobile/app/multi-select/mask.vue
@@ -6,50 +6,42 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMultiSelect } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMultiSelect
-  },
-  data() {
-    return {
-      value: ['公有云'],
-      maskOptions: {
-        'z-index': 100,
-        'cancel-touch': true
+const value = ref(['公有云'])
+const maskOptions = ref({
+  'z-index': 100,
+  'cancel-touch': true
+})
+const data = ref([
+  {
+    title: '云类型',
+    options: [
+      {
+        label: '公有云',
+        value: '公有云'
       },
-      data: [
-        {
-          title: '云类型',
-          options: [
-            {
-              label: '公有云',
-              value: '公有云'
-            },
-            {
-              label: '私有云',
-              value: '私有云'
-            },
-            {
-              label: '伙伴云',
-              value: '伙伴云'
-            },
-            {
-              label: '公有云1',
-              value: '公有云1'
-            },
-            {
-              label: '公有云2',
-              value: '公有云2'
-            }
-          ]
-        }
-      ]
-    }
+      {
+        label: '私有云',
+        value: '私有云'
+      },
+      {
+        label: '伙伴云',
+        value: '伙伴云'
+      },
+      {
+        label: '公有云1',
+        value: '公有云1'
+      },
+      {
+        label: '公有云2',
+        value: '公有云2'
+      }
+    ]
   }
-}
+])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/multi-select/slots.vue b/examples/sites/demos/mobile/app/multi-select/slots.vue
index 6fe2eeb7de..f48472ee08 100644
--- a/examples/sites/demos/mobile/app/multi-select/slots.vue
+++ b/examples/sites/demos/mobile/app/multi-select/slots.vue
@@ -11,46 +11,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMultiSelect } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMultiSelect
-  },
-  data() {
-    return {
-      data: [
-        {
-          title: '云类型',
-          options: [
-            {
-              label: '公有云',
-              value: '公有云'
-            },
-            {
-              label: '私有云',
-              value: '私有云'
-            },
-            {
-              label: '伙伴云',
-              value: '伙伴云'
-            },
-            {
-              label: '公有云1',
-              value: '公有云1'
-            },
-            {
-              label: '公有云2',
-              value: '公有云2'
-            }
-          ]
-        }
-      ],
-      value: []
-    }
+const data = ref([
+  {
+    title: '云类型',
+    options: [
+      {
+        label: '公有云',
+        value: '公有云'
+      },
+      {
+        label: '私有云',
+        value: '私有云'
+      },
+      {
+        label: '伙伴云',
+        value: '伙伴云'
+      },
+      {
+        label: '公有云1',
+        value: '公有云1'
+      },
+      {
+        label: '公有云2',
+        value: '公有云2'
+      }
+    ]
   }
-}
+])
+const value = ref([])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/multi-select/type-wheel.vue b/examples/sites/demos/mobile/app/multi-select/type-wheel.vue
index 8b634143c5..9710b92834 100644
--- a/examples/sites/demos/mobile/app/multi-select/type-wheel.vue
+++ b/examples/sites/demos/mobile/app/multi-select/type-wheel.vue
@@ -11,202 +11,194 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyMultiSelect, TinyToast } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyMultiSelect
+const data = ref([
+  {
+    title: '时间',
+    hasFooter: true,
+    options: [
+      {
+        label: '2020年',
+        children: [
+          {
+            label: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月'
+              },
+              {
+                label: '二月'
+              },
+              {
+                label: '三月'
+              }
+            ]
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月'
+              },
+              {
+                label: '五月'
+              },
+              {
+                label: '六月'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: '2021年',
+        children: [
+          {
+            label: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月'
+              },
+              {
+                label: '二月'
+              },
+              {
+                label: '三月'
+              }
+            ]
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月'
+              },
+              {
+                label: '五月'
+              },
+              {
+                label: '六月'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: '2022年',
+        children: [
+          {
+            label: '全年'
+          },
+          {
+            label: 'Q1',
+            children: [
+              {
+                label: '一月'
+              },
+              {
+                label: '二月'
+              },
+              {
+                label: '三月'
+              }
+            ]
+          },
+          {
+            label: 'Q2',
+            children: [
+              {
+                label: '四月'
+              },
+              {
+                label: '五月'
+              },
+              {
+                label: '六月'
+              }
+            ]
+          }
+        ]
+      }
+    ]
   },
-  data() {
-    return {
-      data: [
-        {
-          title: '时间',
-          hasFooter: true,
-          options: [
-            {
-              label: '2020年',
-              children: [
-                {
-                  label: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月'
-                    },
-                    {
-                      label: '二月'
-                    },
-                    {
-                      label: '三月'
-                    }
-                  ]
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月'
-                    },
-                    {
-                      label: '五月'
-                    },
-                    {
-                      label: '六月'
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              label: '2021年',
-              children: [
-                {
-                  label: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月'
-                    },
-                    {
-                      label: '二月'
-                    },
-                    {
-                      label: '三月'
-                    }
-                  ]
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月'
-                    },
-                    {
-                      label: '五月'
-                    },
-                    {
-                      label: '六月'
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              label: '2022年',
-              children: [
-                {
-                  label: '全年'
-                },
-                {
-                  label: 'Q1',
-                  children: [
-                    {
-                      label: '一月'
-                    },
-                    {
-                      label: '二月'
-                    },
-                    {
-                      label: '三月'
-                    }
-                  ]
-                },
-                {
-                  label: 'Q2',
-                  children: [
-                    {
-                      label: '四月'
-                    },
-                    {
-                      label: '五月'
-                    },
-                    {
-                      label: '六月'
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          title: '区域',
-          hasFooter: true,
-          options: [
-            {
-              label: '海外',
-              children: [
-                {
-                  label: '欧洲巴黎'
-                },
-                {
-                  label: '巴基斯坦'
-                },
-                {
-                  label: '土耳其'
-                }
-              ]
-            },
-            {
-              label: '中国',
-              children: [
-                {
-                  label: '北京'
-                },
-                {
-                  label: '上海'
-                },
-                {
-                  label: '南京'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          title: '云类型',
-          hasFooter: false,
-          options: [
-            {
-              label: '公有云'
-            },
-            {
-              label: '私有云'
-            },
-            {
-              label: '伙伴云'
-            },
-            {
-              label: '公有云1'
-            },
-            {
-              label: '公有云2'
-            }
-          ]
-        }
-      ],
-      defaultSelectedArray: []
-    }
+  {
+    title: '区域',
+    hasFooter: true,
+    options: [
+      {
+        label: '海外',
+        children: [
+          {
+            label: '欧洲巴黎'
+          },
+          {
+            label: '巴基斯坦'
+          },
+          {
+            label: '土耳其'
+          }
+        ]
+      },
+      {
+        label: '中国',
+        children: [
+          {
+            label: '北京'
+          },
+          {
+            label: '上海'
+          },
+          {
+            label: '南京'
+          }
+        ]
+      }
+    ]
   },
-  methods: {
-    confirm(selectedOptions, headerIndex, columnIndices) {
-      const selectVal = selectedOptions.reduce((prev, current) => `${prev} - ${current.label}`, '')
-      TinyToast.service({
-        text: `选中值: ${selectVal}`
-      })
-    },
-    reset(currentValue, headerIndex, columnIndices) {
-      TinyToast.service({
-        text: '已重置为初始值'
-      })
-    }
+  {
+    title: '云类型',
+    hasFooter: false,
+    options: [
+      {
+        label: '公有云'
+      },
+      {
+        label: '私有云'
+      },
+      {
+        label: '伙伴云'
+      },
+      {
+        label: '公有云1'
+      },
+      {
+        label: '公有云2'
+      }
+    ]
   }
+])
+const defaultSelectedArray = ref([])
+
+function confirm(selectedOptions, headerIndex, columnIndices) {
+  const selectVal = selectedOptions.reduce((prev, current) => `${prev} - ${current.label}`, '')
+  TinyToast.service({
+    text: `选中值: ${selectVal}`
+  })
+}
+
+function reset(currentValue, headerIndex, columnIndices) {
+  TinyToast.service({
+    text: '已重置为初始值'
+  })
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/navbar/left-right-arrow.vue b/examples/sites/demos/mobile/app/navbar/left-right-arrow.vue
index 9b5ffc7d44..b9a2766ffb 100644
--- a/examples/sites/demos/mobile/app/navbar/left-right-arrow.vue
+++ b/examples/sites/demos/mobile/app/navbar/left-right-arrow.vue
@@ -2,15 +2,8 @@
   <tiny-nav-bar title="导航栏" left-arrow right-arrow> </tiny-nav-bar>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyNavBar } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNavBar
-  },
-  data() {
-    return {}
-  }
-}
+
 </script>
diff --git a/examples/sites/demos/mobile/app/navbar/left-right-text.vue b/examples/sites/demos/mobile/app/navbar/left-right-text.vue
index f4c52b58c0..e4da70fc29 100644
--- a/examples/sites/demos/mobile/app/navbar/left-right-text.vue
+++ b/examples/sites/demos/mobile/app/navbar/left-right-text.vue
@@ -2,15 +2,8 @@
   <tiny-nav-bar title="导航栏" left-text="返回" right-text="确定"> </tiny-nav-bar>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyNavBar } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNavBar
-  },
-  data() {
-    return {}
-  }
-}
+
 </script>
diff --git a/examples/sites/demos/mobile/app/navbar/slots.vue b/examples/sites/demos/mobile/app/navbar/slots.vue
index 5d194e5a3c..1efe1ef996 100644
--- a/examples/sites/demos/mobile/app/navbar/slots.vue
+++ b/examples/sites/demos/mobile/app/navbar/slots.vue
@@ -2,26 +2,18 @@
   <tiny-nav-bar>
     自定义标题
     <template #left>
-      <icon-arrow-left></icon-arrow-left>
+      <tiny-icon-arrow-left></tiny-icon-arrow-left>
     </template>
     <template #right>
-      <icon-more></icon-more>
+      <tiny-icon-more></tiny-icon-more>
     </template>
   </tiny-nav-bar>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyNavBar } from '@opentiny/vue-mobile'
 import { iconArrowLeft, iconMore } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyNavBar,
-    IconArrowLeft: iconArrowLeft(),
-    IconMore: iconMore()
-  },
-  data() {
-    return {}
-  }
-}
+const TinyIconArrowLeft = iconArrowLeft()
+const TinyIconMore = iconMore()
 </script>
diff --git a/examples/sites/demos/mobile/app/navbar/z-index.vue b/examples/sites/demos/mobile/app/navbar/z-index.vue
index 9cd1256abf..609d67d7aa 100644
--- a/examples/sites/demos/mobile/app/navbar/z-index.vue
+++ b/examples/sites/demos/mobile/app/navbar/z-index.vue
@@ -2,15 +2,8 @@
   <tiny-nav-bar title="导航栏" z-index="10" :fixed="false" left-arrow right-arrow> </tiny-nav-bar>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyNavBar } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNavBar
-  },
-  data() {
-    return {}
-  }
-}
+
 </script>
diff --git a/examples/sites/demos/mobile/app/numeric/automatic-price.vue b/examples/sites/demos/mobile/app/numeric/automatic-price.vue
index 84df7fd511..60cbf4411c 100644
--- a/examples/sites/demos/mobile/app/numeric/automatic-price.vue
+++ b/examples/sites/demos/mobile/app/numeric/automatic-price.vue
@@ -9,20 +9,12 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNumeric
-  },
-  data() {
-    return {
-      size: 'small',
-      value: 0,
-      tatolPrice: 0,
-      price: 10
-    }
-  }
-}
+const size = ref('small')
+const value = ref(0)
+const tatolPrice = ref(0)
+const price = ref(10)
 </script>
diff --git a/examples/sites/demos/mobile/app/numeric/circulate.vue b/examples/sites/demos/mobile/app/numeric/circulate.vue
index 3f3643318d..cd773afb4f 100644
--- a/examples/sites/demos/mobile/app/numeric/circulate.vue
+++ b/examples/sites/demos/mobile/app/numeric/circulate.vue
@@ -7,19 +7,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNumeric
-  },
-  data() {
-    return {
-      num1: 1,
-      step: 2,
-      stepNum: 1
-    }
-  }
-}
+const num1 = ref(1)
+const step = ref(2)
+const stepNum = ref(1)
 </script>
diff --git a/examples/sites/demos/mobile/app/numeric/controls-position.vue b/examples/sites/demos/mobile/app/numeric/controls-position.vue
index a067f60527..0d942f8ee7 100644
--- a/examples/sites/demos/mobile/app/numeric/controls-position.vue
+++ b/examples/sites/demos/mobile/app/numeric/controls-position.vue
@@ -2,18 +2,10 @@
   <tiny-numeric v-model="stepNum" controls-position="right"></tiny-numeric>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNumeric
-  },
-  data() {
-    return {
-      controls: false,
-      stepNum: 2
-    }
-  }
-}
+const controls = ref(false)
+const stepNum = ref(2)
 </script>
diff --git a/examples/sites/demos/mobile/app/numeric/controls.vue b/examples/sites/demos/mobile/app/numeric/controls.vue
index af7588b1b5..a49581275c 100644
--- a/examples/sites/demos/mobile/app/numeric/controls.vue
+++ b/examples/sites/demos/mobile/app/numeric/controls.vue
@@ -2,17 +2,9 @@
   <tiny-numeric v-model="stepNum" controls></tiny-numeric>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNumeric
-  },
-  data() {
-    return {
-      stepNum: 2
-    }
-  }
-}
+const stepNum = ref(2)
 </script>
diff --git a/examples/sites/demos/mobile/app/numeric/event.vue b/examples/sites/demos/mobile/app/numeric/event.vue
index eb3146d49b..41bc201eb6 100644
--- a/examples/sites/demos/mobile/app/numeric/event.vue
+++ b/examples/sites/demos/mobile/app/numeric/event.vue
@@ -2,28 +2,21 @@
   <tiny-numeric v-model="value" @focus="Efocus" @blur="Eblur" @change="Echange"></tiny-numeric>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNumeric
-  },
-  data() {
-    return {
-      value: 1
-    }
-  },
-  methods: {
-    Efocus() {
-      console.log('focus事件')
-    },
-    Eblur() {
-      console.log('blur事件')
-    },
-    Echange(newVal, oldVal) {
-      console.log('新值：', newVal, '旧值', oldVal)
-    }
-  }
+const value = ref(1)
+
+function Efocus() {
+  console.log('focus事件')
+}
+
+function Eblur() {
+  console.log('blur事件')
+}
+
+function Echange(newVal, oldVal) {
+  console.log('新值：', newVal, '旧值', oldVal)
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/numeric/max.vue b/examples/sites/demos/mobile/app/numeric/max.vue
index 9f8703a340..5ac8163670 100644
--- a/examples/sites/demos/mobile/app/numeric/max.vue
+++ b/examples/sites/demos/mobile/app/numeric/max.vue
@@ -2,18 +2,10 @@
   <tiny-numeric v-model="stepNum" :step="step" :min="0" :max="10"></tiny-numeric>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNumeric
-  },
-  data() {
-    return {
-      step: 2,
-      stepNum: 1
-    }
-  }
-}
+const step = ref(2)
+const stepNum = ref(1)
 </script>
diff --git a/examples/sites/demos/mobile/app/numeric/placeholder.vue b/examples/sites/demos/mobile/app/numeric/placeholder.vue
index 0c9d0c74de..e3afed5c7b 100644
--- a/examples/sites/demos/mobile/app/numeric/placeholder.vue
+++ b/examples/sites/demos/mobile/app/numeric/placeholder.vue
@@ -11,19 +11,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNumeric
-  },
-  data() {
-    return {
-      num1: ''
-    }
-  }
-}
+const num1 = ref('')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/numeric/precision.vue b/examples/sites/demos/mobile/app/numeric/precision.vue
index 888da573ab..87cf7e2901 100644
--- a/examples/sites/demos/mobile/app/numeric/precision.vue
+++ b/examples/sites/demos/mobile/app/numeric/precision.vue
@@ -2,18 +2,10 @@
   <tiny-numeric v-model="stepNum" :precision="precision"></tiny-numeric>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNumeric
-  },
-  data() {
-    return {
-      stepNum: 1,
-      precision: 2
-    }
-  }
-}
+const stepNum = ref(1)
+const precision = ref(2)
 </script>
diff --git a/examples/sites/demos/mobile/app/numeric/step.vue b/examples/sites/demos/mobile/app/numeric/step.vue
index 4d70af86b6..c62dead5a2 100644
--- a/examples/sites/demos/mobile/app/numeric/step.vue
+++ b/examples/sites/demos/mobile/app/numeric/step.vue
@@ -2,18 +2,10 @@
   <tiny-numeric v-model="stepNum" :step="step" :step-strictly="true"></tiny-numeric>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyNumeric } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyNumeric
-  },
-  data() {
-    return {
-      step: 2,
-      stepNum: 1
-    }
-  }
-}
+const step = ref(2)
+const stepNum = ref(1)
 </script>
diff --git a/examples/sites/demos/mobile/app/popover/base.vue b/examples/sites/demos/mobile/app/popover/base.vue
index c4ca8acc98..f6ac2dbd1b 100644
--- a/examples/sites/demos/mobile/app/popover/base.vue
+++ b/examples/sites/demos/mobile/app/popover/base.vue
@@ -32,73 +32,65 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref, onMounted } from 'vue'
 import { TinyPopover } from '@opentiny/vue-mobile'
 
-export default {
-  data() {
-    return {
-      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`,
-      data1: [
-        {
-          id: '0',
-          label: '代金券',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '1',
-          label: '拜访纪要',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '2',
-          label: '拜访打卡',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '3',
-          label: '联系人',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '4',
-          label: '报备',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        }
-      ],
-      data2: [
-        {
-          id: '0',
-          label: '取消收藏',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '1',
-          label: '暂不关注该客户',
-          subLabel: '首页“关注”将不收到该客户动态',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        }
-      ],
-      data3: []
-    }
+const imageUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`)
+const data1 = ref([
+  {
+    id: '0',
+    label: '代金券',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
   },
-  mounted() {
-    for (let index = 0; index < 20; index++) {
-      this.data3.push({
-        id: index,
-        label: '内容' + index,
-        icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-      })
-    }
+  {
+    id: '1',
+    label: '拜访纪要',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
   },
-  components: {
-    TinyPopover
+  {
+    id: '2',
+    label: '拜访打卡',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
   },
-  methods: {
-    itemClick(item) {
-      alert(item.label)
-    }
+  {
+    id: '3',
+    label: '联系人',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
+  },
+  {
+    id: '4',
+    label: '报备',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
+  }
+])
+const data2 = ref([
+  {
+    id: '0',
+    label: '取消收藏',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
+  },
+  {
+    id: '1',
+    label: '暂不关注该客户',
+    subLabel: '首页“关注”将不收到该客户动态',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
   }
+])
+const data3 = ref([])
+
+onMounted(() => {
+  for (let index = 0; index < 20; index++) {
+    data3.value.push({
+      id: index,
+      label: '内容' + index,
+      icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
+    })
+  }
+})
+
+function itemClick(item) {
+  alert(item.label)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/popover/direction.vue b/examples/sites/demos/mobile/app/popover/direction.vue
index 3a566a6cf7..c3f7963aca 100644
--- a/examples/sites/demos/mobile/app/popover/direction.vue
+++ b/examples/sites/demos/mobile/app/popover/direction.vue
@@ -31,72 +31,64 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref, onMounted } from 'vue'
 import { TinyPopover } from '@opentiny/vue-mobile'
 
-export default {
-  data() {
-    return {
-      data1: [
-        {
-          id: '0',
-          label: '代金券',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '1',
-          label: '拜访纪要',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '2',
-          label: '拜访打卡',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '3',
-          label: '联系人',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '4',
-          label: '报备',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        }
-      ],
-      data2: [
-        {
-          id: '0',
-          label: '取消收藏',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        },
-        {
-          id: '1',
-          label: '暂不关注该客户',
-          subLabel: '首页“关注”将不收到该客户动态',
-          icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-        }
-      ],
-      data3: []
-    }
+const data1 = ref([
+  {
+    id: '0',
+    label: '代金券',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
   },
-  mounted() {
-    for (let index = 0; index < 20; index++) {
-      this.data3.push({
-        id: index,
-        label: '内容' + index,
-        icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
-      })
-    }
+  {
+    id: '1',
+    label: '拜访纪要',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
   },
-  components: {
-    TinyPopover
+  {
+    id: '2',
+    label: '拜访打卡',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
   },
-  methods: {
-    itemClick(item) {
-      alert(item.label)
-    }
+  {
+    id: '3',
+    label: '联系人',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
+  },
+  {
+    id: '4',
+    label: '报备',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
+  }
+])
+const data2 = ref([
+  {
+    id: '0',
+    label: '取消收藏',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
+  },
+  {
+    id: '1',
+    label: '暂不关注该客户',
+    subLabel: '首页“关注”将不收到该客户动态',
+    icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
   }
+])
+const data3 = ref([])
+
+onMounted(() => {
+  for (let index = 0; index < 20; index++) {
+    data3.value.push({
+      id: index,
+      label: '内容' + index,
+      icon: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/icon.png`
+    })
+  }
+})
+
+function itemClick(item) {
+  alert(item.label)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/progress/custom-color.vue b/examples/sites/demos/mobile/app/progress/custom-color.vue
index d1058d37d9..81f355a6fc 100644
--- a/examples/sites/demos/mobile/app/progress/custom-color.vue
+++ b/examples/sites/demos/mobile/app/progress/custom-color.vue
@@ -6,38 +6,28 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyProgress } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress
-  },
+const customColor = ref('#409eff')
+// 在什么进度显示什么样的颜色
+const customColors = ref([
+  { color: '#f56c6c', percentage: 25 },
+  { color: '#e6a23c', percentage: 35 },
+  { color: '#5cb87a', percentage: 55 },
+  { color: '#1989fa', percentage: 75 },
+  { color: '#6f7ad3', percentage: 100 }
+])
 
-  data() {
-    return {
-      customColor: '#409eff',
-      // 在什么进度显示什么样的颜色
-      customColors: [
-        { color: '#f56c6c', percentage: 25 },
-        { color: '#e6a23c', percentage: 35 },
-        { color: '#5cb87a', percentage: 55 },
-        { color: '#1989fa', percentage: 75 },
-        { color: '#6f7ad3', percentage: 100 }
-      ]
-    }
-  },
-  methods: {
-    // 在什么进度显示什么样的颜色
-    customColorMethod(percentage) {
-      if (percentage < 45) {
-        return '#909399'
-      } else if (percentage < 75) {
-        return '#e6a23c'
-      } else {
-        return '#67c23a'
-      }
-    }
+// 在什么进度显示什么样的颜色
+function customColorMethod(percentage) {
+  if (percentage < 45) {
+    return '#909399'
+  } else if (percentage < 75) {
+    return '#e6a23c'
+  } else {
+    return '#67c23a'
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/progress/dynamic-control-changes.vue b/examples/sites/demos/mobile/app/progress/dynamic-control-changes.vue
index a575275e36..27d5d1c502 100644
--- a/examples/sites/demos/mobile/app/progress/dynamic-control-changes.vue
+++ b/examples/sites/demos/mobile/app/progress/dynamic-control-changes.vue
@@ -9,37 +9,27 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyProgress, TinyButton } from '@opentiny/vue-mobile'
 import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyProgress,
-    TinyButton
-  },
+const testInside = ref(true)
+const percentage = ref(20)
+const IconMinus = iconMinus()
+const IconPlus = iconPlus()
 
-  data() {
-    return {
-      testInside: true,
-      percentage: 20,
-      IconMinus: iconMinus(),
-      IconPlus: iconPlus()
-    }
-  },
-  methods: {
-    increase() {
-      this.percentage += 10
-      if (this.percentage > 100) {
-        this.percentage = 100
-      }
-    },
-    decrease() {
-      this.percentage -= 10
-      if (this.percentage < 0) {
-        this.percentage = 0
-      }
-    }
+function increase() {
+  percentage.value += 10
+  if (percentage.value > 100) {
+    percentage.value = 100
+  }
+}
+
+function decrease() {
+  percentage.value -= 10
+  if (percentage.value < 0) {
+    percentage.value = 0
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/progress/dynamic-progress.vue b/examples/sites/demos/mobile/app/progress/dynamic-progress.vue
index d5acfe60fe..9ad3343bd2 100644
--- a/examples/sites/demos/mobile/app/progress/dynamic-progress.vue
+++ b/examples/sites/demos/mobile/app/progress/dynamic-progress.vue
@@ -11,41 +11,31 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyProgress, TinyButton } from '@opentiny/vue-mobile'
 
 // import { setInterval, clearInterval } from 'timers'
 
-export default {
-  components: {
-    TinyProgress,
-    TinyButton
-  },
-  data() {
-    return {
-      percentage: 0,
-      action: '上传',
-      timeId: null
-    }
-  },
-  methods: {
-    run() {
-      const that = this
-      if (this.timeId) {
-        clearInterval(this.timeId)
-        this.action = '上传'
-        this.timeId = null
+const percentage = ref(0)
+const action = ref('上传')
+const timeId = ref(null)
+
+function run() {
+  const that = this
+  if (timeId.value) {
+    clearInterval(timeId.value)
+    action.value = '上传'
+    timeId.value = null
+  } else {
+    action.value = '暂停'
+    timeId.value = setInterval(() => {
+      if (that.percentage < 100) {
+        that.percentage += 10
       } else {
-        this.action = '暂停'
-        this.timeId = setInterval(() => {
-          if (that.percentage < 100) {
-            that.percentage += 10
-          } else {
-            that.percentage = 0
-          }
-        }, 500)
+        that.percentage = 0
       }
-    }
+    }, 500)
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/progress/format-text.vue b/examples/sites/demos/mobile/app/progress/format-text.vue
index 8553a9b316..954e162202 100644
--- a/examples/sites/demos/mobile/app/progress/format-text.vue
+++ b/examples/sites/demos/mobile/app/progress/format-text.vue
@@ -10,21 +10,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyProgress, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress,
-    TinyButton
-  },
-
-  data() {
-    return {
-      testInside: true
-    }
-  }
-}
+const testInside = ref(true)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/progress/format.vue b/examples/sites/demos/mobile/app/progress/format.vue
index 9f6468c8dd..08560e41a3 100644
--- a/examples/sites/demos/mobile/app/progress/format.vue
+++ b/examples/sites/demos/mobile/app/progress/format.vue
@@ -12,23 +12,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyProgress } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress
-  },
-  data() {
-    return {
-      percentage: 20
-    }
-  },
-  methods: {
-    formatText() {
-      return `自定义内容 ${this.percentage}%`
-    }
-  }
+const percentage = ref(20)
+
+function formatText() {
+  return `自定义内容 ${percentage.value}%`
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/progress/progress-status.vue b/examples/sites/demos/mobile/app/progress/progress-status.vue
index 4c6261f3a2..96987ec119 100644
--- a/examples/sites/demos/mobile/app/progress/progress-status.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-status.vue
@@ -26,16 +26,8 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyProgress } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress
-  },
 
-  data() {
-    return {}
-  }
-}
 </script>
diff --git a/examples/sites/demos/mobile/app/progress/progress-type-circle.vue b/examples/sites/demos/mobile/app/progress/progress-type-circle.vue
index b9607c8b22..f90eb785fb 100644
--- a/examples/sites/demos/mobile/app/progress/progress-type-circle.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-type-circle.vue
@@ -2,14 +2,10 @@
   <tiny-progress class="circle-progress" type="circle" :percentage="50" :width="124" status="exception"></tiny-progress>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyProgress } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/progress/progress-type-dashboard.vue b/examples/sites/demos/mobile/app/progress/progress-type-dashboard.vue
index 09f6316d2c..d94221ec67 100644
--- a/examples/sites/demos/mobile/app/progress/progress-type-dashboard.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-type-dashboard.vue
@@ -2,36 +2,27 @@
   <tiny-progress type="dashboard" :percentage="percentage" :color="tinyColors" :width="124"> </tiny-progress>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyProgress } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress
-  },
-  data() {
-    return {
-      percentage: 20,
-      customColor: '#409eff',
-      tinyColors: [
-        { color: '#f56c6c', percentage: 25 },
-        { color: '#e6a23c', percentage: 35 },
-        { color: '#5cb87a', percentage: 55 },
-        { color: '#1989fa', percentage: 75 },
-        { color: '#6f7ad3', percentage: 100 }
-      ]
-    }
-  },
-  methods: {
-    customColorMethod(percentage) {
-      if (percentage < 45) {
-        return '#909399'
-      } else if (percentage < 75) {
-        return '#e6a23c'
-      } else {
-        return '#67c23a'
-      }
-    }
+const percentage = ref(20)
+const customColor = ref('#409eff')
+const tinyColors = ref([
+  { color: '#f56c6c', percentage: 25 },
+  { color: '#e6a23c', percentage: 35 },
+  { color: '#5cb87a', percentage: 55 },
+  { color: '#1989fa', percentage: 75 },
+  { color: '#6f7ad3', percentage: 100 }
+])
+
+function customColorMethod(percentage) { // NISVUE3 FIXME: percentage重复定义，请手工修改
+  if (percentage < 45) {
+    return '#909399'
+  } else if (percentage < 75) {
+    return '#e6a23c'
+  } else {
+    return '#67c23a'
   }
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/progress/progress-type.vue b/examples/sites/demos/mobile/app/progress/progress-type.vue
index ac05d0973e..aa17880698 100644
--- a/examples/sites/demos/mobile/app/progress/progress-type.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-type.vue
@@ -2,14 +2,10 @@
   <tiny-progress class="progress" type="line" :percentage="50"></tiny-progress>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyProgress } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/progress/progress-width.vue b/examples/sites/demos/mobile/app/progress/progress-width.vue
index 81859245a0..6204642a43 100644
--- a/examples/sites/demos/mobile/app/progress/progress-width.vue
+++ b/examples/sites/demos/mobile/app/progress/progress-width.vue
@@ -21,18 +21,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyProgress } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress
-  },
-
-  data() {
-    return {
-      lineWidth: 26
-    }
-  }
-}
+const lineWidth = ref(26)
 </script>
diff --git a/examples/sites/demos/mobile/app/progress/text-inside-or-no-text.vue b/examples/sites/demos/mobile/app/progress/text-inside-or-no-text.vue
index 4d331bb0f9..09f0b0ea26 100644
--- a/examples/sites/demos/mobile/app/progress/text-inside-or-no-text.vue
+++ b/examples/sites/demos/mobile/app/progress/text-inside-or-no-text.vue
@@ -8,19 +8,9 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyProgress, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress,
-    TinyButton
-  },
-
-  data() {
-    return {
-      showTest: true
-    }
-  }
-}
+const showTest = ref(true)
 </script>
diff --git a/examples/sites/demos/mobile/app/progress/width.vue b/examples/sites/demos/mobile/app/progress/width.vue
index ef885b849a..6638d32693 100644
--- a/examples/sites/demos/mobile/app/progress/width.vue
+++ b/examples/sites/demos/mobile/app/progress/width.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyProgress } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyProgress
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/pull-refresh/animation-duration.vue b/examples/sites/demos/mobile/app/pull-refresh/animation-duration.vue
index bcfdbdb3bb..01c835a97c 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/animation-duration.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/animation-duration.vue
@@ -18,38 +18,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index + 1} list data` }
-      }),
-      value: true,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullUpLoad() {
-      setTimeout(() => {
-        const length = this.data.length
-        for (let i = 1; i <= 10; i++) {
-          this.data.push({ label: `${i + length} list data` })
-        }
-        this.value = false
-      }, 2000)
-    },
-    handlerPullDownRefresh() {
-      setTimeout(() => {
-        this.value = false
-      }, 2000)
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index + 1} list data` }
+}))
+const value = ref(true)
+const hasMore = ref(true)
+
+function handlerPullUpLoad() {
+  setTimeout(() => {
+    const length = data.value.length
+    for (let i = 1; i <= 10; i++) {
+      data.value.push({ label: `${i + length} list data` })
     }
-  }
+    value.value = false
+  }, 2000)
+}
+
+function handlerPullDownRefresh() {
+  setTimeout(() => {
+    value.value = false
+  }, 2000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/pull-refresh/base.vue b/examples/sites/demos/mobile/app/pull-refresh/base.vue
index f8aef5a8af..efde782484 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/base.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/base.vue
@@ -17,35 +17,27 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index} list data` }
-      }),
-      value: true,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullUpLoad() {
-      setTimeout(() => {
-        this.value = false
-        this.hasMore = false
-      }, 3000)
-    },
-    handlerPullDownRefresh() {
-      setTimeout(() => {
-        this.value = false
-      }, 3000)
-    }
-  }
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index} list data` }
+}))
+const value = ref(true)
+const hasMore = ref(true)
+
+function handlerPullUpLoad() {
+  setTimeout(() => {
+    value.value = false
+    hasMore.value = false
+  }, 3000)
+}
+
+function handlerPullDownRefresh() {
+  setTimeout(() => {
+    value.value = false
+  }, 3000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-down.vue b/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-down.vue
index d6b02e9c26..a6571b273e 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-down.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-down.vue
@@ -12,33 +12,24 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index + 1} list data` }
-      }),
-      value: false,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullUpLoad() {
-      setTimeout(() => {
-        const length = this.data.length
-        for (let i = 1; i <= 10; i++) {
-          this.data.push({ label: `${i + length} list data` })
-        }
-        this.value = false
-      }, 3000)
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index + 1} list data` }
+}))
+const value = ref(false)
+const hasMore = ref(true)
+
+function handlerPullUpLoad() {
+  setTimeout(() => {
+    const length = data.value.length
+    for (let i = 1; i <= 10; i++) {
+      data.value.push({ label: `${i + length} list data` })
     }
-  }
+    value.value = false
+  }, 3000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-up.vue b/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-up.vue
index ea55c2fcd9..0e9d270580 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-up.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/disabled-pull-up.vue
@@ -12,34 +12,25 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index + 1} list data` }
-      }),
-      value: false,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullDown() {
-      setTimeout(() => {
-        this.data = []
-        const length = this.data.length
-        for (let i = 1; i <= 20; i++) {
-          this.data.push({ label: `${i + length} list data` })
-        }
-        this.value = false
-      }, 3000)
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index + 1} list data` }
+}))
+const value = ref(false)
+const hasMore = ref(true)
+
+function handlerPullDown() {
+  setTimeout(() => {
+    data.value = []
+    const length = data.value.length
+    for (let i = 1; i <= 20; i++) {
+      data.value.push({ label: `${i + length} list data` })
     }
-  }
+    value.value = false
+  }, 3000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/pull-refresh/event.vue b/examples/sites/demos/mobile/app/pull-refresh/event.vue
index f8aef5a8af..efde782484 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/event.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/event.vue
@@ -17,35 +17,27 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index} list data` }
-      }),
-      value: true,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullUpLoad() {
-      setTimeout(() => {
-        this.value = false
-        this.hasMore = false
-      }, 3000)
-    },
-    handlerPullDownRefresh() {
-      setTimeout(() => {
-        this.value = false
-      }, 3000)
-    }
-  }
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index} list data` }
+}))
+const value = ref(true)
+const hasMore = ref(true)
+
+function handlerPullUpLoad() {
+  setTimeout(() => {
+    value.value = false
+    hasMore.value = false
+  }, 3000)
+}
+
+function handlerPullDownRefresh() {
+  setTimeout(() => {
+    value.value = false
+  }, 3000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/pull-refresh/has-more.vue b/examples/sites/demos/mobile/app/pull-refresh/has-more.vue
index f8aef5a8af..efde782484 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/has-more.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/has-more.vue
@@ -17,35 +17,27 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index} list data` }
-      }),
-      value: true,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullUpLoad() {
-      setTimeout(() => {
-        this.value = false
-        this.hasMore = false
-      }, 3000)
-    },
-    handlerPullDownRefresh() {
-      setTimeout(() => {
-        this.value = false
-      }, 3000)
-    }
-  }
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index} list data` }
+}))
+const value = ref(true)
+const hasMore = ref(true)
+
+function handlerPullUpLoad() {
+  setTimeout(() => {
+    value.value = false
+    hasMore.value = false
+  }, 3000)
+}
+
+function handlerPullDownRefresh() {
+  setTimeout(() => {
+    value.value = false
+  }, 3000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/pull-refresh/loosing-text.vue b/examples/sites/demos/mobile/app/pull-refresh/loosing-text.vue
index 2f1f40d3c0..d01664499c 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/loosing-text.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/loosing-text.vue
@@ -18,35 +18,27 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index} list data` }
-      }),
-      value: true,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullUpLoad() {
-      setTimeout(() => {
-        this.value = false
-        this.hasMore = false
-      }, 3000)
-    },
-    handlerPullDownRefresh() {
-      setTimeout(() => {
-        this.value = false
-      }, 3000)
-    }
-  }
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index} list data` }
+}))
+const value = ref(true)
+const hasMore = ref(true)
+
+function handlerPullUpLoad() {
+  setTimeout(() => {
+    value.value = false
+    hasMore.value = false
+  }, 3000)
+}
+
+function handlerPullDownRefresh() {
+  setTimeout(() => {
+    value.value = false
+  }, 3000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/pull-refresh/pull-refresh-slot.vue b/examples/sites/demos/mobile/app/pull-refresh/pull-refresh-slot.vue
index 34307d20f7..eecb1a8b00 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/pull-refresh-slot.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/pull-refresh-slot.vue
@@ -24,38 +24,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index + 1} list data` }
-      }),
-      value: true,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullUpLoad() {
-      setTimeout(() => {
-        const length = this.data.length
-        for (let i = 1; i <= 10; i++) {
-          this.data.push({ label: `${i + length} list data` })
-        }
-        this.value = false
-      }, 2000)
-    },
-    handlerPullDownRefresh() {
-      setTimeout(() => {
-        this.value = false
-      }, 2000)
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index + 1} list data` }
+}))
+const value = ref(true)
+const hasMore = ref(true)
+
+function handlerPullUpLoad() {
+  setTimeout(() => {
+    const length = data.value.length
+    for (let i = 1; i <= 10; i++) {
+      data.value.push({ label: `${i + length} list data` })
     }
-  }
+    value.value = false
+  }, 2000)
+}
+
+function handlerPullDownRefresh() {
+  setTimeout(() => {
+    value.value = false
+  }, 2000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/pull-refresh/pull-up-distance.vue b/examples/sites/demos/mobile/app/pull-refresh/pull-up-distance.vue
index efb6589eb0..9c82038bee 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/pull-up-distance.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/pull-up-distance.vue
@@ -18,35 +18,27 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index} list data` }
-      }),
-      value: true,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullUpLoad() {
-      setTimeout(() => {
-        this.value = false
-        this.hasMore = false
-      }, 3000)
-    },
-    handlerPullDownRefresh() {
-      setTimeout(() => {
-        this.value = false
-      }, 3000)
-    }
-  }
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index} list data` }
+}))
+const value = ref(true)
+const hasMore = ref(true)
+
+function handlerPullUpLoad() {
+  setTimeout(() => {
+    value.value = false
+    hasMore.value = false
+  }, 3000)
+}
+
+function handlerPullDownRefresh() {
+  setTimeout(() => {
+    value.value = false
+  }, 3000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/pull-refresh/pulling-text.vue b/examples/sites/demos/mobile/app/pull-refresh/pulling-text.vue
index 151c41960f..6b702ec84a 100644
--- a/examples/sites/demos/mobile/app/pull-refresh/pulling-text.vue
+++ b/examples/sites/demos/mobile/app/pull-refresh/pulling-text.vue
@@ -19,35 +19,27 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyPullRefresh } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyPullRefresh
-  },
-  data() {
-    return {
-      data: [...Array(30)].map((i, index) => {
-        return { label: `${index} list data` }
-      }),
-      value: true,
-      hasMore: true
-    }
-  },
-  methods: {
-    handlerPullUpLoad() {
-      setTimeout(() => {
-        this.value = false
-        this.hasMore = false
-      }, 3000)
-    },
-    handlerPullDownRefresh() {
-      setTimeout(() => {
-        this.value = false
-      }, 3000)
-    }
-  }
+const data = ref([...Array(30)].map((i, index) => {
+  return { label: `${index} list data` }
+}))
+const value = ref(true)
+const hasMore = ref(true)
+
+function handlerPullUpLoad() {
+  setTimeout(() => {
+    value.value = false
+    hasMore.value = false
+  }, 3000)
+}
+
+function handlerPullDownRefresh() {
+  setTimeout(() => {
+    value.value = false
+  }, 3000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/radio/base.vue b/examples/sites/demos/mobile/app/radio/base.vue
index 9b7c75f2c0..5b59d37b18 100644
--- a/examples/sites/demos/mobile/app/radio/base.vue
+++ b/examples/sites/demos/mobile/app/radio/base.vue
@@ -5,19 +5,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyRadio } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyRadio
-  },
-  data() {
-    return {
-      value: false
-    }
-  }
-}
+const value = ref(false)
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/radio/disabled.vue b/examples/sites/demos/mobile/app/radio/disabled.vue
index 28daebcf37..03259692d7 100644
--- a/examples/sites/demos/mobile/app/radio/disabled.vue
+++ b/examples/sites/demos/mobile/app/radio/disabled.vue
@@ -6,19 +6,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyRadio } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyRadio
-  },
-  data() {
-    return {
-      value: '1'
-    }
-  }
-}
+const value = ref('1')
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/radio/event.vue b/examples/sites/demos/mobile/app/radio/event.vue
index eef9d5dfdf..aaa25aad7d 100644
--- a/examples/sites/demos/mobile/app/radio/event.vue
+++ b/examples/sites/demos/mobile/app/radio/event.vue
@@ -7,24 +7,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyRadio } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyRadio
-  },
-  data() {
-    return {
-      value: '1',
-      text: '男'
-    }
-  },
-  methods: {
-    changeAction(value) {
-      this.text = value === '1' ? '男' : '女'
-    }
-  }
+const value = ref('1')
+const text = ref('男')
+
+function changeAction(value) { // NISVUE3 FIXME: value重复定义，请手工修改
+  text.value = value === '1' ? '男' : '女'
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/radio/label.vue b/examples/sites/demos/mobile/app/radio/label.vue
index 9406d23974..97dec057c6 100644
--- a/examples/sites/demos/mobile/app/radio/label.vue
+++ b/examples/sites/demos/mobile/app/radio/label.vue
@@ -6,19 +6,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyRadio } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyRadio
-  },
-  data() {
-    return {
-      value: '1'
-    }
-  }
-}
+const value = ref('1')
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/search/base.vue b/examples/sites/demos/mobile/app/search/base.vue
index 6906f9d280..841d1cc117 100644
--- a/examples/sites/demos/mobile/app/search/base.vue
+++ b/examples/sites/demos/mobile/app/search/base.vue
@@ -15,44 +15,36 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinySearch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySearch
+const value = ref('')
+const dataList = ref([
+  {
+    id: 1,
+    content: '实时搜索文本1'
   },
-  data() {
-    return {
-      value: '',
-      dataList: [
-        {
-          id: 1,
-          content: '实时搜索文本1'
-        },
-        {
-          id: 2,
-          content: '实时搜索文本2'
-        },
-        {
-          id: 3,
-          content: '实时搜索文本3'
-        },
-        {
-          id: 4,
-          content: '实时搜索文本4'
-        }
-      ]
-    }
+  {
+    id: 2,
+    content: '实时搜索文本2'
   },
-  methods: {
-    handleChange(obj, val) {
-      this.value = val
-    },
-    handleSearch(obj, val) {
-      alert(val)
-    }
+  {
+    id: 3,
+    content: '实时搜索文本3'
+  },
+  {
+    id: 4,
+    content: '实时搜索文本4'
   }
+])
+
+function handleChange(obj, val) {
+  value.value = val
+}
+
+function handleSearch(obj, val) {
+  alert(val)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/search/button-text.vue b/examples/sites/demos/mobile/app/search/button-text.vue
index 04511d4645..20743e6c1c 100644
--- a/examples/sites/demos/mobile/app/search/button-text.vue
+++ b/examples/sites/demos/mobile/app/search/button-text.vue
@@ -2,12 +2,8 @@
   <tiny-search button-text="Search" placeholder="搜索"></tiny-search>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinySearch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySearch
-  }
-}
+
 </script>
diff --git a/examples/sites/demos/mobile/app/search/clear.vue b/examples/sites/demos/mobile/app/search/clear.vue
index 6301baee8c..1a0492502f 100644
--- a/examples/sites/demos/mobile/app/search/clear.vue
+++ b/examples/sites/demos/mobile/app/search/clear.vue
@@ -15,47 +15,40 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinySearch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySearch
+const value = ref('')
+const dataList = ref([
+  {
+    id: 1,
+    content: '实时搜索文本1'
   },
-  data() {
-    return {
-      value: '',
-      dataList: [
-        {
-          id: 1,
-          content: '实时搜索文本1'
-        },
-        {
-          id: 2,
-          content: '实时搜索文本2'
-        },
-        {
-          id: 3,
-          content: '实时搜索文本3'
-        },
-        {
-          id: 4,
-          content: '实时搜索文本4'
-        }
-      ]
-    }
+  {
+    id: 2,
+    content: '实时搜索文本2'
   },
-  methods: {
-    clear() {
-      console.log('清除按钮事件')
-    },
-    handleChange(obj, val) {
-      this.value = val
-    },
-    handleSearch(obj, val) {
-      alert(val)
-    }
+  {
+    id: 3,
+    content: '实时搜索文本3'
+  },
+  {
+    id: 4,
+    content: '实时搜索文本4'
   }
+])
+
+function clear() {
+  console.log('清除按钮事件')
+}
+
+function handleChange(obj, val) {
+  value.value = val
+}
+
+function handleSearch(obj, val) {
+  alert(val)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/search/default-value.vue b/examples/sites/demos/mobile/app/search/default-value.vue
index 0830df6455..63afa19938 100644
--- a/examples/sites/demos/mobile/app/search/default-value.vue
+++ b/examples/sites/demos/mobile/app/search/default-value.vue
@@ -2,17 +2,9 @@
   <tiny-search v-model="value"></tiny-search>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySearch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySearch
-  },
-  data() {
-    return {
-      value: '公司'
-    }
-  }
-}
+const value = ref('公司')
 </script>
diff --git a/examples/sites/demos/mobile/app/search/events.vue b/examples/sites/demos/mobile/app/search/events.vue
index 3b1ab95bd8..67f581c993 100644
--- a/examples/sites/demos/mobile/app/search/events.vue
+++ b/examples/sites/demos/mobile/app/search/events.vue
@@ -5,27 +5,19 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySearch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySearch
-  },
-  data() {
-    return {
-      searchValue: ''
-    }
-  },
-  methods: {
-    handleChange(obj, val) {
-      this.searchValue = val
-      console.log('当前改变的值为：' + val)
-    },
-    handleSearch(val) {
-      console.log('搜索内容为：' + val)
-    }
-  }
+const searchValue = ref('')
+
+function handleChange(obj, val) {
+  searchValue.value = val
+  console.log('当前改变的值为：' + val)
+}
+
+function handleSearch(val) {
+  console.log('搜索内容为：' + val)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/slider/about-step.vue b/examples/sites/demos/mobile/app/slider/about-step.vue
index 32fec7de89..ebdb3797d3 100644
--- a/examples/sites/demos/mobile/app/slider/about-step.vue
+++ b/examples/sites/demos/mobile/app/slider/about-step.vue
@@ -10,19 +10,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 20
-    }
-  }
-}
+const value = ref(20)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/slider/dynamic-disable.vue b/examples/sites/demos/mobile/app/slider/dynamic-disable.vue
index 5a39742149..847395be5e 100644
--- a/examples/sites/demos/mobile/app/slider/dynamic-disable.vue
+++ b/examples/sites/demos/mobile/app/slider/dynamic-disable.vue
@@ -10,19 +10,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 40
-    }
-  }
-}
+const value = ref(40)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/slider/format-tooltip.vue b/examples/sites/demos/mobile/app/slider/format-tooltip.vue
index 9a631512dd..56676b80c7 100644
--- a/examples/sites/demos/mobile/app/slider/format-tooltip.vue
+++ b/examples/sites/demos/mobile/app/slider/format-tooltip.vue
@@ -10,23 +10,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 20
-    }
-  },
-  methods: {
-    format(value) {
-      return '当前值为：' + value
-    }
-  }
+const value = ref(20)
+
+function format(value) { // NISVUE3 FIXME: value重复定义，请手工修改
+  return '当前值为：' + value
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/slider/max-min.vue b/examples/sites/demos/mobile/app/slider/max-min.vue
index dad5d9f9b2..333a6a5e1c 100644
--- a/examples/sites/demos/mobile/app/slider/max-min.vue
+++ b/examples/sites/demos/mobile/app/slider/max-min.vue
@@ -10,19 +10,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 30
-    }
-  }
-}
+const value = ref(30)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/slider/range-select.vue b/examples/sites/demos/mobile/app/slider/range-select.vue
index 993d529d12..58d9508263 100644
--- a/examples/sites/demos/mobile/app/slider/range-select.vue
+++ b/examples/sites/demos/mobile/app/slider/range-select.vue
@@ -10,19 +10,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: [20, 40]
-    }
-  }
-}
+const value = ref([20, 40])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/slider/shortcut-operation.vue b/examples/sites/demos/mobile/app/slider/shortcut-operation.vue
index 0ea31fc55c..c3b47c8d62 100644
--- a/examples/sites/demos/mobile/app/slider/shortcut-operation.vue
+++ b/examples/sites/demos/mobile/app/slider/shortcut-operation.vue
@@ -10,19 +10,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 40
-    }
-  }
-}
+const value = ref(40)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/slider/show-input.vue b/examples/sites/demos/mobile/app/slider/show-input.vue
index f23e298a77..b07b77a5b0 100644
--- a/examples/sites/demos/mobile/app/slider/show-input.vue
+++ b/examples/sites/demos/mobile/app/slider/show-input.vue
@@ -10,19 +10,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 40
-    }
-  }
-}
+const value = ref(40)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/slider/show-tip.vue b/examples/sites/demos/mobile/app/slider/show-tip.vue
index bb5303349e..73bb3ec6b4 100644
--- a/examples/sites/demos/mobile/app/slider/show-tip.vue
+++ b/examples/sites/demos/mobile/app/slider/show-tip.vue
@@ -10,19 +10,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 20
-    }
-  }
-}
+const value = ref(20)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/slider/slider-event-change.vue b/examples/sites/demos/mobile/app/slider/slider-event-change.vue
index 737cf8fa3b..fe9026f6f5 100644
--- a/examples/sites/demos/mobile/app/slider/slider-event-change.vue
+++ b/examples/sites/demos/mobile/app/slider/slider-event-change.vue
@@ -10,23 +10,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 40
-    }
-  },
-  methods: {
-    change(val) {
-      console.log(`触发change事件,改变值为${val}`)
-    }
-  }
+const value = ref(40)
+
+function change(val) {
+  console.log(`触发change事件,改变值为${val}`)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/slider/slider-event-start.vue b/examples/sites/demos/mobile/app/slider/slider-event-start.vue
index db233a6b26..772cd02bd6 100644
--- a/examples/sites/demos/mobile/app/slider/slider-event-start.vue
+++ b/examples/sites/demos/mobile/app/slider/slider-event-start.vue
@@ -10,23 +10,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 40
-    }
-  },
-  methods: {
-    start(val) {
-      console.log(`触发开始滑动事件${JSON.stringify(val)}`)
-    }
-  }
+const value = ref(40)
+
+function start(val) {
+  console.log(`触发开始滑动事件${JSON.stringify(val)}`)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/slider/slider-event-stop.vue b/examples/sites/demos/mobile/app/slider/slider-event-stop.vue
index 3e404e4c2c..74226c8543 100644
--- a/examples/sites/demos/mobile/app/slider/slider-event-stop.vue
+++ b/examples/sites/demos/mobile/app/slider/slider-event-stop.vue
@@ -10,23 +10,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 40
-    }
-  },
-  methods: {
-    stop(val) {
-      console.log(`触发停止滑动事件,停止后值为${val}`)
-    }
-  }
+const value = ref(40)
+
+function stop(val) {
+  console.log(`触发停止滑动事件,停止后值为${val}`)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/slider/slider-slot.vue b/examples/sites/demos/mobile/app/slider/slider-slot.vue
index 26c4398b5f..fc3e4a30d6 100644
--- a/examples/sites/demos/mobile/app/slider/slider-slot.vue
+++ b/examples/sites/demos/mobile/app/slider/slider-slot.vue
@@ -14,19 +14,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 40
-    }
-  }
-}
+const value = ref(40)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/slider/vertical-mode.vue b/examples/sites/demos/mobile/app/slider/vertical-mode.vue
index 85262ad211..c4256be075 100644
--- a/examples/sites/demos/mobile/app/slider/vertical-mode.vue
+++ b/examples/sites/demos/mobile/app/slider/vertical-mode.vue
@@ -10,19 +10,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySlider } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySlider
-  },
-  data() {
-    return {
-      value: 30
-    }
-  }
-}
+const value = ref(30)
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/switch/base.vue b/examples/sites/demos/mobile/app/switch/base.vue
index b6e3bb90ac..d3d57bd215 100644
--- a/examples/sites/demos/mobile/app/switch/base.vue
+++ b/examples/sites/demos/mobile/app/switch/base.vue
@@ -5,19 +5,11 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySwitch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySwitch
-  },
-  data() {
-    return {
-      value1: '1'
-    }
-  }
-}
+const value1 = ref('1')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/switch/disabled.vue b/examples/sites/demos/mobile/app/switch/disabled.vue
index 3990f375b4..62b2d154b5 100644
--- a/examples/sites/demos/mobile/app/switch/disabled.vue
+++ b/examples/sites/demos/mobile/app/switch/disabled.vue
@@ -7,14 +7,10 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinySwitch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySwitch
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/switch/event.vue b/examples/sites/demos/mobile/app/switch/event.vue
index 928838943d..775f6f21d9 100644
--- a/examples/sites/demos/mobile/app/switch/event.vue
+++ b/examples/sites/demos/mobile/app/switch/event.vue
@@ -6,24 +6,15 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySwitch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySwitch
-  },
-  data() {
-    return {
-      value1: '1',
-      status: '已开启'
-    }
-  },
-  methods: {
-    handleChange(val) {
-      this.status = val ? '已开启' : '已关闭'
-    }
-  }
+const value1 = ref('1')
+const status = ref('已开启')
+
+function handleChange(val) {
+  status.value = val ? '已开启' : '已关闭'
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/switch/loading.vue b/examples/sites/demos/mobile/app/switch/loading.vue
index 3c993daeda..6f86d21ece 100644
--- a/examples/sites/demos/mobile/app/switch/loading.vue
+++ b/examples/sites/demos/mobile/app/switch/loading.vue
@@ -7,33 +7,25 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinySwitch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySwitch
-  },
-  data() {
-    return {
-      loading1: false,
-      loading2: false
-    }
-  },
-  methods: {
-    handleChangeLoading1() {
-      this.loading1 = true
-      setTimeout(() => {
-        this.loading1 = false
-      }, 2000)
-    },
-    handleChangeLoading2() {
-      this.loading2 = true
-      setTimeout(() => {
-        this.loading2 = false
-      }, 2000)
-    }
-  }
+const loading1 = ref(false)
+const loading2 = ref(false)
+
+function handleChangeLoading1() {
+  loading1.value = true
+  setTimeout(() => {
+    loading1.value = false
+  }, 2000)
+}
+
+function handleChangeLoading2() {
+  loading2.value = true
+  setTimeout(() => {
+    loading2.value = false
+  }, 2000)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/switch/mini.vue b/examples/sites/demos/mobile/app/switch/mini.vue
index 6cdaf09aca..15525915d8 100644
--- a/examples/sites/demos/mobile/app/switch/mini.vue
+++ b/examples/sites/demos/mobile/app/switch/mini.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinySwitch } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinySwitch
-  }
-}
+
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/tabbar/active-inactive-color.vue b/examples/sites/demos/mobile/app/tabbar/active-inactive-color.vue
index 022b20044e..c50d0cedf3 100644
--- a/examples/sites/demos/mobile/app/tabbar/active-inactive-color.vue
+++ b/examples/sites/demos/mobile/app/tabbar/active-inactive-color.vue
@@ -9,23 +9,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue-mobile'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyTabbar,
-    TinyTabbarItem
-  },
-  data() {
-    return {
-      activeName: 3,
-      IconDialog: iconDialog(),
-      IconEmailAdd: iconEmailAdd(),
-      IconGroup: iconGroup(),
-      IconSetting: iconSetting()
-    }
-  }
-}
+const activeName = ref(3)
+const IconDialog = iconDialog()
+const IconEmailAdd = iconEmailAdd()
+const IconGroup = iconGroup()
+const IconSetting = iconSetting()
 </script>
diff --git a/examples/sites/demos/mobile/app/tabbar/badge.vue b/examples/sites/demos/mobile/app/tabbar/badge.vue
index 434d4ee912..f320803e46 100644
--- a/examples/sites/demos/mobile/app/tabbar/badge.vue
+++ b/examples/sites/demos/mobile/app/tabbar/badge.vue
@@ -9,23 +9,14 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue-mobile'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyTabbar,
-    TinyTabbarItem
-  },
-  data() {
-    return {
-      activeName: 3,
-      IconDialog: iconDialog(),
-      IconEmailAdd: iconEmailAdd(),
-      IconGroup: iconGroup(),
-      IconSetting: iconSetting()
-    }
-  }
-}
+const activeName = ref(3)
+const IconDialog = iconDialog()
+const IconEmailAdd = iconEmailAdd()
+const IconGroup = iconGroup()
+const IconSetting = iconSetting()
 </script>
diff --git a/examples/sites/demos/mobile/app/tabbar/base.vue b/examples/sites/demos/mobile/app/tabbar/base.vue
index 114a3d4ecf..9ff2e47b62 100644
--- a/examples/sites/demos/mobile/app/tabbar/base.vue
+++ b/examples/sites/demos/mobile/app/tabbar/base.vue
@@ -15,47 +15,37 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTabbar, TinyTabbarItem, TinyButton } from '@opentiny/vue-mobile'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting, iconAdministrator } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyTabbar,
-    TinyTabbarItem,
-    TinyButton
-  },
-  data() {
-    return {
-      activeName: 3,
-      IconDialog: iconDialog(),
-      IconEmailAdd: iconEmailAdd(),
-      IconGroup: iconGroup(),
-      IconSetting: iconSetting(),
-      IconAdministrator: iconAdministrator(),
-      pagename: '',
-      list: [
-        { title: '消息', ico: iconDialog() },
-        { title: '邮件', ico: iconEmailAdd() }
-      ],
-      itemList: [
-        { title: '消息', ico: iconDialog() },
-        { title: '邮件', ico: iconEmailAdd() },
-        { title: '人员', ico: iconGroup() },
-        { title: '设置', ico: iconSetting() },
-        { title: '我的', ico: iconAdministrator() }
-      ]
-    }
-  },
-  methods: {
-    change(num) {
-      this.pagename = ''
-      this.list = this.itemList.slice(0, num)
-    },
-    tab(name) {
-      this.pagename = '当前点击的是------' + name + '   标签栏'
-    }
-  }
+const activeName = ref(3)
+const IconDialog = iconDialog()
+const IconEmailAdd = iconEmailAdd()
+const IconGroup = iconGroup()
+const IconSetting = iconSetting()
+const IconAdministrator = iconAdministrator()
+const pagename = ref('')
+const list = ref([
+  { title: '消息', ico: iconDialog() },
+  { title: '邮件', ico: iconEmailAdd() }
+])
+const itemList = ref([
+  { title: '消息', ico: iconDialog() },
+  { title: '邮件', ico: iconEmailAdd() },
+  { title: '人员', ico: iconGroup() },
+  { title: '设置', ico: iconSetting() },
+  { title: '我的', ico: iconAdministrator() }
+])
+
+function change(num) {
+  pagename.value = ''
+  list.value = itemList.value.slice(0, num)
+}
+
+function tab(name) {
+  pagename.value = '当前点击的是------' + name + '   标签栏'
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/tabbar/border.vue b/examples/sites/demos/mobile/app/tabbar/border.vue
index cc5efc90d9..d8d36342d7 100644
--- a/examples/sites/demos/mobile/app/tabbar/border.vue
+++ b/examples/sites/demos/mobile/app/tabbar/border.vue
@@ -7,23 +7,14 @@
   </tiny-tabbar>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue-mobile'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyTabbar,
-    TinyTabbarItem
-  },
-  data() {
-    return {
-      activeName: 3,
-      IconDialog: iconDialog(),
-      IconEmailAdd: iconEmailAdd(),
-      IconGroup: iconGroup(),
-      IconSetting: iconSetting()
-    }
-  }
-}
+const activeName = ref(3)
+const IconDialog = iconDialog()
+const IconEmailAdd = iconEmailAdd()
+const IconGroup = iconGroup()
+const IconSetting = iconSetting()
 </script>
diff --git a/examples/sites/demos/mobile/app/tabbar/event-change.vue b/examples/sites/demos/mobile/app/tabbar/event-change.vue
index 280306ac86..bbd305f36c 100644
--- a/examples/sites/demos/mobile/app/tabbar/event-change.vue
+++ b/examples/sites/demos/mobile/app/tabbar/event-change.vue
@@ -7,28 +7,18 @@
   </tiny-tabbar>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue-mobile'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyTabbar,
-    TinyTabbarItem
-  },
-  data() {
-    return {
-      activeName: 3,
-      IconDialog: iconDialog(),
-      IconEmailAdd: iconEmailAdd(),
-      IconGroup: iconGroup(),
-      IconSetting: iconSetting()
-    }
-  },
-  methods: {
-    handleChange(val) {
-      console.log('当前标签页为：' + val)
-    }
-  }
+const activeName = ref(3)
+const IconDialog = iconDialog()
+const IconEmailAdd = iconEmailAdd()
+const IconGroup = iconGroup()
+const IconSetting = iconSetting()
+
+function handleChange(val) {
+  console.log('当前标签页为：' + val)
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/tabbar/onlytext.vue b/examples/sites/demos/mobile/app/tabbar/onlytext.vue
index e5d47d91a5..7c91f257dd 100644
--- a/examples/sites/demos/mobile/app/tabbar/onlytext.vue
+++ b/examples/sites/demos/mobile/app/tabbar/onlytext.vue
@@ -18,31 +18,21 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabbar,
-    TinyTabbarItem
-  },
-  data() {
-    return {
-      activeName: 3,
-      pagename: 'Page 1',
-      pagetitle: '1.1 Title',
-      itemList: [
-        { title: '上一页', pagename: 'Page 1', pagetitle: '1.1 Title' },
-        { title: '下一页', pagename: 'Page 2', pagetitle: '2.1 Title' }
-      ]
-    }
-  },
-  methods: {
-    tab(name, title) {
-      this.pagename = name
-      this.pagetitle = title
-    }
-  }
+const activeName = ref(3)
+const pagename = ref('Page 1')
+const pagetitle = ref('1.1 Title')
+const itemList = ref([
+  { title: '上一页', pagename: 'Page 1', pagetitle: '1.1 Title' },
+  { title: '下一页', pagename: 'Page 2', pagetitle: '2.1 Title' }
+])
+
+function tab(name, title) {
+  pagename.value = name
+  pagetitle.value = title
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/tabbar/route.vue b/examples/sites/demos/mobile/app/tabbar/route.vue
index fb03d24444..af679c2563 100644
--- a/examples/sites/demos/mobile/app/tabbar/route.vue
+++ b/examples/sites/demos/mobile/app/tabbar/route.vue
@@ -9,23 +9,14 @@
   </tiny-tabbar>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue-mobile'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyTabbar,
-    TinyTabbarItem
-  },
-  data() {
-    return {
-      activeName: 3,
-      IconDialog: iconDialog(),
-      IconEmailAdd: iconEmailAdd(),
-      IconGroup: iconGroup(),
-      IconSetting: iconSetting()
-    }
-  }
-}
+const activeName = ref(3)
+const IconDialog = iconDialog()
+const IconEmailAdd = iconEmailAdd()
+const IconGroup = iconGroup()
+const IconSetting = iconSetting()
 </script>
diff --git a/examples/sites/demos/mobile/app/tabbar/slot-icon.vue b/examples/sites/demos/mobile/app/tabbar/slot-icon.vue
index 9f45acea2f..daea9244c0 100644
--- a/examples/sites/demos/mobile/app/tabbar/slot-icon.vue
+++ b/examples/sites/demos/mobile/app/tabbar/slot-icon.vue
@@ -12,27 +12,18 @@
   </tiny-tabbar>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTabbar, TinyTabbarItem } from '@opentiny/vue-mobile'
 import { iconDialog, iconEmailAdd, iconGroup, iconSetting } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyTabbar,
-    TinyTabbarItem
-  },
-  data() {
-    return {
-      activeName: 3,
-      IconDialog: iconDialog(),
-      IconEmailAdd: iconEmailAdd(),
-      IconGroup: iconGroup(),
-      IconSetting: iconSetting(),
-      icon: {
-        active: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
-        inactive: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
-      }
-    }
-  }
-}
+const activeName = ref(3)
+const IconDialog = iconDialog()
+const IconEmailAdd = iconEmailAdd()
+const IconGroup = iconGroup()
+const IconSetting = iconSetting()
+const icon = ref({
+  active: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog1.png`,
+  inactive: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog2.png`
+})
 </script>
diff --git a/examples/sites/demos/mobile/app/table/base.vue b/examples/sites/demos/mobile/app/table/base.vue
index 846cd5f6b5..5731c0db1d 100644
--- a/examples/sites/demos/mobile/app/table/base.vue
+++ b/examples/sites/demos/mobile/app/table/base.vue
@@ -11,154 +11,146 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTable } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTable
-  },
-  data() {
-    return {
-      columns: [
-        {
-          width: 100,
-          title: '业务',
-          field: 'business'
-        },
-        {
-          width: 90,
-          title: '空间（万/年）',
-          field: 'space'
-        },
-        {
-          width: 60,
-          title: 'IDC',
-          field: 'idc'
-        },
-        {
-          width: 60,
-          title: '阿里云',
-          field: 'aliy'
-        },
-        {
-          width: 60,
-          title: '腾讯云',
-          field: 'txy'
-        }
-      ],
-      columns2: [
-        {
-          width: 100,
-          title: '业务',
-          field: 'business',
-          fixed: true
-        },
-        {
-          width: 110,
-          title: '空间（万/年）',
-          field: 'space',
-          fixed: true
-        },
-        {
-          width: 60,
-          title: 'IDC',
-          field: 'idc'
-        },
-        {
-          width: 60,
-          title: '阿里云',
-          field: 'aliy'
-        },
-        {
-          width: 60,
-          title: '腾讯云',
-          field: 'txy'
-        }
-      ],
-      columns3: [
-        {
-          width: 30,
-          title: '业务',
-          field: 'business',
-          type: 'index'
-        },
-        {
-          width: 50,
-          title: '空间（万/年）',
-          field: 'space',
-          type: 'selection'
-        },
-        {
-          width: 50,
-          title: 'IDC',
-          field: 'idc',
-          type: 'radio'
-        },
-        {
-          width: 60,
-          title: '阿里云',
-          field: 'aliy'
-        },
-        {
-          width: 60,
-          title: '腾讯云',
-          field: 'txy'
-        }
-      ],
-      tableData: [
-        {
-          id: '1',
-          business: '直播/点播源站',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: '大数据',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: 'web业务',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: '应用加速',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: '边缘计算',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        },
-        {
-          id: '1',
-          business: 'Live/点播源站',
-          space: 80,
-          idc: 80,
-          aliy: '99',
-          txy: '11'
-        }
-      ]
-    }
+const columns = ref([
+  {
+    width: 100,
+    title: '业务',
+    field: 'business'
+  },
+  {
+    width: 90,
+    title: '空间（万/年）',
+    field: 'space'
+  },
+  {
+    width: 60,
+    title: 'IDC',
+    field: 'idc'
+  },
+  {
+    width: 60,
+    title: '阿里云',
+    field: 'aliy'
+  },
+  {
+    width: 60,
+    title: '腾讯云',
+    field: 'txy'
   }
-}
+])
+const columns2 = ref([
+  {
+    width: 100,
+    title: '业务',
+    field: 'business',
+    fixed: true
+  },
+  {
+    width: 110,
+    title: '空间（万/年）',
+    field: 'space',
+    fixed: true
+  },
+  {
+    width: 60,
+    title: 'IDC',
+    field: 'idc'
+  },
+  {
+    width: 60,
+    title: '阿里云',
+    field: 'aliy'
+  },
+  {
+    width: 60,
+    title: '腾讯云',
+    field: 'txy'
+  }
+])
+const columns3 = ref([
+  {
+    width: 30,
+    title: '业务',
+    field: 'business',
+    type: 'index'
+  },
+  {
+    width: 50,
+    title: '空间（万/年）',
+    field: 'space',
+    type: 'selection'
+  },
+  {
+    width: 50,
+    title: 'IDC',
+    field: 'idc',
+    type: 'radio'
+  },
+  {
+    width: 60,
+    title: '阿里云',
+    field: 'aliy'
+  },
+  {
+    width: 60,
+    title: '腾讯云',
+    field: 'txy'
+  }
+])
+const tableData = ref([
+  {
+    id: '1',
+    business: '直播/点播源站',
+    space: 80,
+    idc: 80,
+    aliy: '99',
+    txy: '11'
+  },
+  {
+    id: '1',
+    business: '大数据',
+    space: 80,
+    idc: 80,
+    aliy: '99',
+    txy: '11'
+  },
+  {
+    id: '1',
+    business: 'web业务',
+    space: 80,
+    idc: 80,
+    aliy: '99',
+    txy: '11'
+  },
+  {
+    id: '1',
+    business: '应用加速',
+    space: 80,
+    idc: 80,
+    aliy: '99',
+    txy: '11'
+  },
+  {
+    id: '1',
+    business: '边缘计算',
+    space: 80,
+    idc: 80,
+    aliy: '99',
+    txy: '11'
+  },
+  {
+    id: '1',
+    business: 'Live/点播源站',
+    space: 80,
+    idc: 80,
+    aliy: '99',
+    txy: '11'
+  }
+])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/tabs/active-color.vue b/examples/sites/demos/mobile/app/tabs/active-color.vue
index 1f9e160c6a..385bd8d105 100644
--- a/examples/sites/demos/mobile/app/tabs/active-color.vue
+++ b/examples/sites/demos/mobile/app/tabs/active-color.vue
@@ -10,18 +10,9 @@
   </tiny-tabs>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
-  },
-  data() {
-    return {
-      activeName: 'second'
-    }
-  }
-}
+const activeName = ref('second')
 </script>
diff --git a/examples/sites/demos/mobile/app/tabs/add-delete-tab.vue b/examples/sites/demos/mobile/app/tabs/add-delete-tab.vue
index 98a06181d4..c50866eaab 100644
--- a/examples/sites/demos/mobile/app/tabs/add-delete-tab.vue
+++ b/examples/sites/demos/mobile/app/tabs/add-delete-tab.vue
@@ -20,62 +20,53 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
+const tabsData = ref([
+  {
+    title: '标签 1',
+    name: '1',
+    content: '内容 1'
   },
-  data() {
-    return {
-      tabsData: [
-        {
-          title: '标签 1',
-          name: '1',
-          content: '内容 1'
-        },
-        {
-          title: '标签 2',
-          name: '2',
-          content: '内容 2'
-        },
-        {
-          title: '标签 3',
-          name: '3',
-          content: '内容 3'
-        },
-        {
-          title: '标签 4',
-          name: '4',
-          content: '内容 4'
-        }
-      ],
-      activeName1: '1',
-      activeName2: '2',
-      tabIndex: 5
-    }
+  {
+    title: '标签 2',
+    name: '2',
+    content: '内容 2'
   },
-  methods: {
-    handleAdd() {
-      this.tabsData.push({
-        title: `标签 ${this.tabIndex}`,
-        name: String(this.tabIndex),
-        content: '动态增加页签'
-      })
-      this.tabIndex++
-    },
-    handleClose(name) {
-      let index = 0
-      this.tabsData.map((tab, inx) => {
-        if (tab.name === name) {
-          index = inx
-        }
-      })
-      this.tabsData.splice(index, 1)
-    }
+  {
+    title: '标签 3',
+    name: '3',
+    content: '内容 3'
+  },
+  {
+    title: '标签 4',
+    name: '4',
+    content: '内容 4'
   }
+])
+const activeName1 = ref('1')
+const activeName2 = ref('2')
+const tabIndex = ref(5)
+
+function handleAdd() {
+  tabsData.value.push({
+    title: `标签 ${tabIndex.value}`,
+    name: String(tabIndex.value),
+    content: '动态增加页签'
+  })
+  tabIndex.value++
+}
+
+function handleClose(name) {
+  let index = 0
+  tabsData.value.map((tab, inx) => {
+    if (tab.name === name) {
+      index = inx
+    }
+  })
+  tabsData.value.splice(index, 1)
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/tabs/basic-usage.vue b/examples/sites/demos/mobile/app/tabs/basic-usage.vue
index 190e565a11..331c4b18a3 100644
--- a/examples/sites/demos/mobile/app/tabs/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/tabs/basic-usage.vue
@@ -8,20 +8,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
-  },
-  data() {
-    return {
-      activeName: 'second'
-    }
-  }
-}
+const activeName = ref('second')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/tabs/before-leave.vue b/examples/sites/demos/mobile/app/tabs/before-leave.vue
index 7f736b1c17..40613b05a2 100644
--- a/examples/sites/demos/mobile/app/tabs/before-leave.vue
+++ b/examples/sites/demos/mobile/app/tabs/before-leave.vue
@@ -9,26 +9,16 @@
   </tiny-tabs>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTabs, TinyTabItem, TinyToast } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
-  },
-  data() {
-    return {
-      activeName: 'second'
-    }
-  },
-  methods: {
-    beforeLeave(activeName, oldActiveName) {
-      TinyToast.service({
-        text: '页签切换被阻止'
-      })
-      return false
-    }
-  }
+const activeName = ref('second')
+
+function beforeLeave(activeName, oldActiveName) { // NISVUE3 FIXME: activeName重复定义，请手工修改
+  TinyToast.service({
+    text: '页签切换被阻止'
+  })
+  return false
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/tabs/expand.vue b/examples/sites/demos/mobile/app/tabs/expand.vue
index 57de582e5e..164ec9436f 100644
--- a/examples/sites/demos/mobile/app/tabs/expand.vue
+++ b/examples/sites/demos/mobile/app/tabs/expand.vue
@@ -6,67 +6,58 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
+const tabs = ref([
+  {
+    title: '标签 1',
+    name: '1',
+    content: '内容 1'
   },
-  data() {
-    return {
-      tabs: [
-        {
-          title: '标签 1',
-          name: '1',
-          content: '内容 1'
-        },
-        {
-          title: '标签 2',
-          name: '2',
-          content: '内容 2'
-        },
-        {
-          title: '标签 3',
-          name: '3',
-          content: '内容 3'
-        },
-        {
-          title: '标签 4',
-          name: '4',
-          content: '内容 4'
-        },
-        {
-          title: '标签 5',
-          name: '5',
-          content: '内容 5'
-        },
-        {
-          title: '标签 6',
-          name: '6',
-          content: '内容 6'
-        },
-        {
-          title: '标签 7',
-          name: '7',
-          content: '内容 7'
-        },
-        {
-          title: '标签 8',
-          name: '8',
-          content: '内容 8'
-        },
-        {
-          title: '标签 9',
-          name: '9',
-          content: '内容 9'
-        }
-      ],
-      activeName: '1'
-    }
+  {
+    title: '标签 2',
+    name: '2',
+    content: '内容 2'
+  },
+  {
+    title: '标签 3',
+    name: '3',
+    content: '内容 3'
+  },
+  {
+    title: '标签 4',
+    name: '4',
+    content: '内容 4'
+  },
+  {
+    title: '标签 5',
+    name: '5',
+    content: '内容 5'
+  },
+  {
+    title: '标签 6',
+    name: '6',
+    content: '内容 6'
+  },
+  {
+    title: '标签 7',
+    name: '7',
+    content: '内容 7'
+  },
+  {
+    title: '标签 8',
+    name: '8',
+    content: '内容 8'
+  },
+  {
+    title: '标签 9',
+    name: '9',
+    content: '内容 9'
   }
-}
+])
+const activeName = ref('1')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/tabs/size.vue b/examples/sites/demos/mobile/app/tabs/size.vue
index 4054629beb..4351f50e5c 100644
--- a/examples/sites/demos/mobile/app/tabs/size.vue
+++ b/examples/sites/demos/mobile/app/tabs/size.vue
@@ -10,20 +10,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
-  },
-  data() {
-    return {
-      activeName: 'third'
-    }
-  }
-}
+const activeName = ref('third')
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/tabs/stretch.vue b/examples/sites/demos/mobile/app/tabs/stretch.vue
index 4bb8f391e0..13be4f4cdf 100644
--- a/examples/sites/demos/mobile/app/tabs/stretch.vue
+++ b/examples/sites/demos/mobile/app/tabs/stretch.vue
@@ -5,18 +5,9 @@
   </tiny-tabs>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
-  },
-  data() {
-    return {
-      activeName: 'second'
-    }
-  }
-}
+const activeName = ref('second')
 </script>
diff --git a/examples/sites/demos/mobile/app/tabs/swipe.vue b/examples/sites/demos/mobile/app/tabs/swipe.vue
index 7312f94ed7..a99629ae3c 100644
--- a/examples/sites/demos/mobile/app/tabs/swipe.vue
+++ b/examples/sites/demos/mobile/app/tabs/swipe.vue
@@ -10,18 +10,9 @@
   </tiny-tabs>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
-  },
-  data() {
-    return {
-      activeName: 'second'
-    }
-  }
-}
+const activeName = ref('second')
 </script>
diff --git a/examples/sites/demos/mobile/app/tabs/tabs-events.vue b/examples/sites/demos/mobile/app/tabs/tabs-events.vue
index da8f484370..736dba27a6 100644
--- a/examples/sites/demos/mobile/app/tabs/tabs-events.vue
+++ b/examples/sites/demos/mobile/app/tabs/tabs-events.vue
@@ -8,53 +8,43 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTabs, TinyTabItem, TinyToast } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTabs,
-    TinyTabItem
+const activeName = ref('first')
+const tabsData = ref([
+  {
+    title: '表单组件',
+    name: 'first',
+    content: '表单组件,具有与用户交互，并可完成数据采集功能的控件。 '
   },
-  data() {
-    return {
-      activeName: 'first',
-      tabsData: [
-        {
-          title: '表单组件',
-          name: 'first',
-          content: '表单组件,具有与用户交互，并可完成数据采集功能的控件。 '
-        },
-        {
-          title: '数据组件',
-          name: 'second',
-          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
-        },
-        {
-          title: '导航组件',
-          name: 'third',
-          content: ' 导航组件,帮助网站访问者浏览站点的组件。'
-        },
-        {
-          title: '业务组件',
-          name: 'fourth',
-          content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
-        },
-        {
-          title: '其他组件',
-          name: 'fifth.',
-          content: '其他组件，更多种类组件。'
-        }
-      ]
-    }
+  {
+    title: '数据组件',
+    name: 'second',
+    content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
   },
-  methods: {
-    click(tabItem, event) {
-      event.stopPropagation()
-      TinyToast.service({
-        text: '点击的页签 name 是 ' + tabItem.name
-      })
-    }
+  {
+    title: '导航组件',
+    name: 'third',
+    content: ' 导航组件,帮助网站访问者浏览站点的组件。'
+  },
+  {
+    title: '业务组件',
+    name: 'fourth',
+    content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
+  },
+  {
+    title: '其他组件',
+    name: 'fifth.',
+    content: '其他组件，更多种类组件。'
   }
+])
+
+function click(tabItem, event) {
+  event.stopPropagation()
+  TinyToast.service({
+    text: '点击的页签 name 是 ' + tabItem.name
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/tag/basic-usage.vue b/examples/sites/demos/mobile/app/tag/basic-usage.vue
index 6b2f3fdf01..c5c25d291c 100644
--- a/examples/sites/demos/mobile/app/tag/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/tag/basic-usage.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyTag } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTag
-  }
-}
+
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/tag/different-color.vue b/examples/sites/demos/mobile/app/tag/different-color.vue
index a6d56d78bf..42de2c3fca 100644
--- a/examples/sites/demos/mobile/app/tag/different-color.vue
+++ b/examples/sites/demos/mobile/app/tag/different-color.vue
@@ -8,14 +8,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyTag } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTag
-  }
-}
+
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/tag/max-width.vue b/examples/sites/demos/mobile/app/tag/max-width.vue
index 63e86e0235..cf0bb717bc 100644
--- a/examples/sites/demos/mobile/app/tag/max-width.vue
+++ b/examples/sites/demos/mobile/app/tag/max-width.vue
@@ -4,14 +4,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyTag } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTag
-  }
-}
+
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/tag/mini.vue b/examples/sites/demos/mobile/app/tag/mini.vue
index 9b1251ecac..086844f41f 100644
--- a/examples/sites/demos/mobile/app/tag/mini.vue
+++ b/examples/sites/demos/mobile/app/tag/mini.vue
@@ -5,14 +5,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { TinyTag } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTag
-  }
-}
+
 </script>
 
 <style>
diff --git a/examples/sites/demos/mobile/app/timeline/different-data.vue b/examples/sites/demos/mobile/app/timeline/different-data.vue
index fb7e43de9e..62b5363543 100644
--- a/examples/sites/demos/mobile/app/timeline/different-data.vue
+++ b/examples/sites/demos/mobile/app/timeline/different-data.vue
@@ -2,53 +2,44 @@
   <tiny-time-line :data="data" name-field="statusText" :active="active" @click="click"></tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTimeLine } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTimeLine
+const active = ref(1)
+const data = ref([
+  {
+    status: 'current',
+    statusText: '企业资料',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
   },
-  data() {
-    return {
-      active: 1,
-      data: [
-        {
-          status: 'current',
-          statusText: '企业资料',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'success',
-          statusText: '法人资料',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          statusText: '校验身份',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          statusText: '提交资料',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        }
-      ]
-    }
+  {
+    status: 'success',
+    statusText: '法人资料',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
   },
-  methods: {
-    click(index, node) {
-      this.active = index
-    }
+  {
+    status: 'complete',
+    statusText: '校验身份',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
+  },
+  {
+    status: 'complete',
+    statusText: '提交资料',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
   }
+])
+
+function click(index, node) {
+  active.value = index
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/timeline/mobileTimeLine.vue b/examples/sites/demos/mobile/app/timeline/mobileTimeLine.vue
index ccc5164009..32f476f4c6 100644
--- a/examples/sites/demos/mobile/app/timeline/mobileTimeLine.vue
+++ b/examples/sites/demos/mobile/app/timeline/mobileTimeLine.vue
@@ -36,45 +36,38 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTimeLine, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTimeLine
-  },
-  data() {
-    return {
-      timeActive1: 1,
-      timeActive2: 0,
-      timeActive3: 0,
-      data3: [
-        { name: '已下单', state: 'normal', fold: true },
-        { name: '运输中', state: 'success', fold: false, showFoldBtn: true },
-        { name: '已签收', state: 'error' },
-        { name: '已确认收货', state: 'handing' }
-      ],
-      data4: [
-        { name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
-        { name: '运输中', state: 'success', showFoldBtn: true, fold: true },
-        { name: '已签收', state: 'error', showFoldBtn: true, fold: true },
-        { name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
-      ]
-    }
-  },
-  methods: {
-    timeClick1(index, node) {
-      this.timeActive1 = index
+const timeActive1 = ref(1)
+const timeActive2 = ref(0)
+const timeActive3 = ref(0)
+const data3 = ref([
+  { name: '已下单', state: 'normal', fold: true },
+  { name: '运输中', state: 'success', fold: false, showFoldBtn: true },
+  { name: '已签收', state: 'error' },
+  { name: '已确认收货', state: 'handing' }
+])
+const data4 = ref([
+  { name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
+  { name: '运输中', state: 'success', showFoldBtn: true, fold: true },
+  { name: '已签收', state: 'error', showFoldBtn: true, fold: true },
+  { name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
+])
 
-      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-    },
-    timeClick2(index) {
-      this.timeActive2 = index
-    },
-    timeClick3(index) {
-      this.timeActive3 = index
-    }
-  }
+function timeClick1(index, node) {
+  timeActive1.value = index
+
+  TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+}
+
+function timeClick2(index) {
+  timeActive2.value = index
+}
+
+function timeClick3(index) {
+  timeActive3.value = index
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/timeline/slot.vue b/examples/sites/demos/mobile/app/timeline/slot.vue
index d6dcb566d6..72ec6bef98 100644
--- a/examples/sites/demos/mobile/app/timeline/slot.vue
+++ b/examples/sites/demos/mobile/app/timeline/slot.vue
@@ -13,73 +13,64 @@
   </tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTimeLine } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTimeLine
+const active = ref(1)
+const data = ref([
+  {
+    status: 'current',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
   },
-  data() {
-    return {
-      active: 1,
-      data: [
-        {
-          status: 'current',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'success',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'fail',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          time: '2019-11-11 00:01:30',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        }
-      ]
-    }
+  {
+    status: 'success',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
   },
-  methods: {
-    click(index, node) {
-      this.active = index
-    }
+  {
+    status: 'fail',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
+  },
+  {
+    status: 'complete',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
+  },
+  {
+    status: 'complete',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
+  },
+  {
+    status: 'complete',
+    time: '2019-11-11 00:01:30',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
   }
+])
+
+function click(index, node) {
+  active.value = index
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/timeline/space.vue b/examples/sites/demos/mobile/app/timeline/space.vue
index 4f99b3cfaf..698844a2e9 100644
--- a/examples/sites/demos/mobile/app/timeline/space.vue
+++ b/examples/sites/demos/mobile/app/timeline/space.vue
@@ -2,73 +2,64 @@
   <tiny-time-line :data="data" :space="100"></tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyTimeLine } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTimeLine
+const active = ref(1)
+const data = ref([
+  {
+    status: 'current',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
   },
-  data() {
-    return {
-      active: 1,
-      data: [
-        {
-          status: 'current',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'success',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'fail',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          time: '2019-11-12 14:20:15',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          time: '2019-11-11 00:01:30',
-          name: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        }
-      ]
-    }
+  {
+    status: 'success',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
   },
-  methods: {
-    click(index, node) {
-      this.active = index
-    }
+  {
+    status: 'fail',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
+  },
+  {
+    status: 'complete',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
+  },
+  {
+    status: 'complete',
+    time: '2019-11-12 14:20:15',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
+  },
+  {
+    status: 'complete',
+    time: '2019-11-11 00:01:30',
+    name: '筛选中',
+    personInfo: '张三',
+    cycle: '周期：2天',
+    overdue: '已超期 1 天'
   }
+])
+
+function click(index, node) {
+  active.value = index
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/timeline/steps.vue b/examples/sites/demos/mobile/app/timeline/steps.vue
index 397dd4d16e..06755050ff 100644
--- a/examples/sites/demos/mobile/app/timeline/steps.vue
+++ b/examples/sites/demos/mobile/app/timeline/steps.vue
@@ -36,45 +36,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { TinyTimeLine, TinyModal } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyTimeLine
-  },
-  data() {
-    return {
-      timeActive1: 1,
-      timeActive2: 0,
-      timeActive3: 0,
-      data3: [
-        { name: '已下单', state: 'normal', fold: true, time: '2019-11-12 14:20:15' },
-        { name: '运输中', state: 'success', fold: false, showFoldBtn: true, time: '2019-11-12 14:20:15' },
-        { name: '已签收', state: 'error', time: '2019-11-12 14:20:15' },
-        { name: '已确认收货', state: 'handing', time: '2019-11-12 14:20:15' }
-      ],
-      data4: [
-        { name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
-        { name: '运输中', state: 'success', showFoldBtn: true, fold: true },
-        { name: '已签收', state: 'error', showFoldBtn: true, fold: true },
-        { name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
-      ]
-    }
-  },
-  methods: {
-    timeClick1(index, node) {
-      this.timeActive1 = index
+const timeActive1 = ref(1)
+const timeActive2 = ref(0)
+const timeActive3 = ref(0)
+const data3 = ref([
+  { name: '已下单', state: 'normal', fold: true, time: '2019-11-12 14:20:15' },
+  { name: '运输中', state: 'success', fold: false, showFoldBtn: true, time: '2019-11-12 14:20:15' },
+  { name: '已签收', state: 'error', time: '2019-11-12 14:20:15' },
+  { name: '已确认收货', state: 'handing', time: '2019-11-12 14:20:15' }
+])
+const data4 = ref([
+  { name: '已下单', state: 'normal', showFoldBtn: true, fold: false },
+  { name: '运输中', state: 'success', showFoldBtn: true, fold: true },
+  { name: '已签收', state: 'error', showFoldBtn: true, fold: true },
+  { name: '已确认收货', state: 'handing', showFoldBtn: true, fold: true }
+])
 
-      TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
-    },
-    timeClick2(index) {
-      this.timeActive2 = index
-    },
-    timeClick3(index) {
-      this.timeActive3 = index
-    }
-  }
+function timeClick1(index, node) {
+  timeActive1.value = index
+
+  TinyModal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+}
+
+function timeClick2(index) {
+  timeActive2.value = index
+}
+
+function timeClick3(index) {
+  timeActive3.value = index
 }
 </script>
 
diff --git a/examples/sites/demos/mobile/app/toast/base.vue b/examples/sites/demos/mobile/app/toast/base.vue
index af22ef3a9d..69ec0b9457 100644
--- a/examples/sites/demos/mobile/app/toast/base.vue
+++ b/examples/sites/demos/mobile/app/toast/base.vue
@@ -4,25 +4,17 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyToast, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyToast
-  },
-  methods: {
-    showTextToast() {
-      TinyToast.service({
-        text: 'Toast',
-        type: 'text',
-        time: 2000,
-        timeout: () => {
-          alert('timeout')
-        }
-      })
+function showTextToast() {
+  TinyToast.service({
+    text: 'Toast',
+    type: 'text',
+    time: 2000,
+    timeout: () => {
+      alert('timeout')
     }
-  }
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/toast/failed.vue b/examples/sites/demos/mobile/app/toast/failed.vue
index 696d72117b..06b6a523b8 100644
--- a/examples/sites/demos/mobile/app/toast/failed.vue
+++ b/examples/sites/demos/mobile/app/toast/failed.vue
@@ -4,23 +4,15 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyToast, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyToast
-  },
-  methods: {
-    showErrorToast() {
-      TinyToast.service({
-        text: 'error',
-        type: 'error',
-        time: 2000,
-        zIndex: 102
-      })
-    }
-  }
+function showErrorToast() {
+  TinyToast.service({
+    text: 'error',
+    type: 'error',
+    time: 2000,
+    zIndex: 102
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/toast/success.vue b/examples/sites/demos/mobile/app/toast/success.vue
index 7392dd3a37..91f3ea5d9e 100644
--- a/examples/sites/demos/mobile/app/toast/success.vue
+++ b/examples/sites/demos/mobile/app/toast/success.vue
@@ -4,24 +4,16 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyToast, TinyButton } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyButton,
-    TinyToast
-  },
-  methods: {
-    showCorrectToast() {
-      TinyToast.service({
-        text: 'success',
-        type: 'correct',
-        time: 4000,
-        zIndex: 101,
-        timeout: () => {}
-      })
-    }
-  }
+function showCorrectToast() {
+  TinyToast.service({
+    text: 'success',
+    type: 'correct',
+    time: 4000,
+    zIndex: 101,
+    timeout: () => {}
+  })
 }
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/basic-usage.vue b/examples/sites/demos/mobile/app/user-head/basic-usage.vue
index dc467b9873..470ac3de15 100644
--- a/examples/sites/demos/mobile/app/user-head/basic-usage.vue
+++ b/examples/sites/demos/mobile/app/user-head/basic-usage.vue
@@ -25,20 +25,12 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyUserHead } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyUserHead
-  },
-  data() {
-    return {
-      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
-      name: '小明'
-    }
-  }
-}
+const imageUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`)
+const name = ref('小明')
 </script>
 
 <style lang="less" scoped>
diff --git a/examples/sites/demos/mobile/app/user-head/color.vue b/examples/sites/demos/mobile/app/user-head/color.vue
index a3119ebe4d..6683155d60 100644
--- a/examples/sites/demos/mobile/app/user-head/color.vue
+++ b/examples/sites/demos/mobile/app/user-head/color.vue
@@ -16,12 +16,8 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyUserHead } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyUserHead
-  }
-}
+
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/custom-background-color.vue b/examples/sites/demos/mobile/app/user-head/custom-background-color.vue
index 14c7b69fde..3dd0b7a569 100644
--- a/examples/sites/demos/mobile/app/user-head/custom-background-color.vue
+++ b/examples/sites/demos/mobile/app/user-head/custom-background-color.vue
@@ -2,12 +2,8 @@
   <tiny-user-head type="icon" background-color="'#5E7CE0'"></tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyUserHead } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyUserHead
-  }
-}
+
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/custom-user-head-content.vue b/examples/sites/demos/mobile/app/user-head/custom-user-head-content.vue
index e08146a002..9a0c062a8c 100644
--- a/examples/sites/demos/mobile/app/user-head/custom-user-head-content.vue
+++ b/examples/sites/demos/mobile/app/user-head/custom-user-head-content.vue
@@ -2,23 +2,18 @@
   <tiny-user-head>
     <div class="content">
       <span>
-        <icon-mail></icon-mail>
+        <tiny-icon-mail></tiny-icon-mail>
       </span>
       Mail
     </div>
   </tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyUserHead } from '@opentiny/vue-mobile'
 import { iconMail } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyUserHead,
-    IconMail: iconMail()
-  }
-}
+const TinyIconMail = iconMail()
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/mobile/app/user-head/icon-user-head.vue b/examples/sites/demos/mobile/app/user-head/icon-user-head.vue
index 974520b48b..a71b32896a 100644
--- a/examples/sites/demos/mobile/app/user-head/icon-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/icon-user-head.vue
@@ -2,18 +2,9 @@
   <tiny-user-head type="icon" :value="IconSmile"></tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
 import { TinyUserHead } from '@opentiny/vue-mobile'
 import { iconSmile } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyUserHead
-  },
-  data() {
-    return {
-      IconSmile: iconSmile()
-    }
-  }
-}
+const IconSmile = iconSmile()
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/image-user-head.vue b/examples/sites/demos/mobile/app/user-head/image-user-head.vue
index 8b9a061738..a01cb79f56 100644
--- a/examples/sites/demos/mobile/app/user-head/image-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/image-user-head.vue
@@ -2,17 +2,9 @@
   <tiny-user-head type="image" :modelValue="imgUrl"></tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup lang="jsx">
+import { ref } from 'vue'
 import { TinyUserHead } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyUserHead
-  },
-  data() {
-    return {
-      imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`
-    }
-  }
-}
+const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`)
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/label-user-head.vue b/examples/sites/demos/mobile/app/user-head/label-user-head.vue
index 83807cc0a1..c5a51a5e80 100644
--- a/examples/sites/demos/mobile/app/user-head/label-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/label-user-head.vue
@@ -2,17 +2,9 @@
   <tiny-user-head class="head-item" type="label" round v-model="text"></tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup>
+import { ref } from 'vue'
 import { TinyUserHead } from '@opentiny/vue-mobile'
 
-export default {
-  components: {
-    TinyUserHead
-  },
-  data() {
-    return {
-      text: '文字'
-    }
-  }
-}
+const text = ref('文字')
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/message-count-limit.vue b/examples/sites/demos/mobile/app/user-head/message-count-limit.vue
index 99689ac7a0..494f3534b4 100644
--- a/examples/sites/demos/mobile/app/user-head/message-count-limit.vue
+++ b/examples/sites/demos/mobile/app/user-head/message-count-limit.vue
@@ -2,12 +2,6 @@
   <tiny-user-head :message-total="100" :message-upper-limit="99" type="icon"></tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup>
 import { TinyUserHead } from '@opentiny/vue-mobile'
-
-export default {
-  components: {
-    TinyUserHead
-  }
-}
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/message-count-total.vue b/examples/sites/demos/mobile/app/user-head/message-count-total.vue
index b3767d62fd..266e4a8181 100644
--- a/examples/sites/demos/mobile/app/user-head/message-count-total.vue
+++ b/examples/sites/demos/mobile/app/user-head/message-count-total.vue
@@ -2,12 +2,6 @@
   <tiny-user-head :message-total="100" type="icon"></tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup>
 import { TinyUserHead } from '@opentiny/vue-mobile'
-
-export default {
-  components: {
-    TinyUserHead
-  }
-}
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/message-count-type.vue b/examples/sites/demos/mobile/app/user-head/message-count-type.vue
index 7c2f3fcaf4..2d97da73c8 100644
--- a/examples/sites/demos/mobile/app/user-head/message-count-type.vue
+++ b/examples/sites/demos/mobile/app/user-head/message-count-type.vue
@@ -2,12 +2,6 @@
   <tiny-user-head :message-total="100" message-type="basic" type="icon"></tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup>
 import { TinyUserHead } from '@opentiny/vue-mobile'
-
-export default {
-  components: {
-    TinyUserHead
-  }
-}
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/min-user-head.vue b/examples/sites/demos/mobile/app/user-head/min-user-head.vue
index 77c11a56f6..72bd833705 100644
--- a/examples/sites/demos/mobile/app/user-head/min-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/min-user-head.vue
@@ -2,12 +2,6 @@
   <tiny-user-head type="icon" min></tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup>
 import { TinyUserHead } from '@opentiny/vue-mobile'
-
-export default {
-  components: {
-    TinyUserHead
-  }
-}
 </script>
diff --git a/examples/sites/demos/mobile/app/user-head/round-user-head.vue b/examples/sites/demos/mobile/app/user-head/round-user-head.vue
index ebed469d00..166941f59a 100644
--- a/examples/sites/demos/mobile/app/user-head/round-user-head.vue
+++ b/examples/sites/demos/mobile/app/user-head/round-user-head.vue
@@ -2,12 +2,6 @@
   <tiny-user-head type="icon" round></tiny-user-head>
 </template>
 
-<script lang="jsx">
+<script setup>
 import { TinyUserHead } from '@opentiny/vue-mobile'
-
-export default {
-  components: {
-    TinyUserHead
-  }
-}
 </script>