feat: 组合式 API 示例结构

pages.json

 {
   "pages": [
-    {
-      "path": "pages/tab-bar/options-api",
-      "style": {
-        "navigationBarTitleText": "选项式 API"
-      }
-    },
-    {
-      "path": "pages/tab-bar/composition-api",
-      "style": {
-        "navigationBarTitleText": "组合式 API"
-      }
+    {
+      "path": "pages/tab-bar/options-api",
+      "style": {
+        "navigationBarTitleText": "选项式 API"
+      }
+    },
+    {
+      "path": "pages/tab-bar/composition-api",
+      "style": {
+        "navigationBarTitleText": "组合式 API"
+      }
     },
     {
       "path": "pages/app-instance/index/index",
@@ -378,22 +378,227 @@
       "style": {
         "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式"
       }
+    },
+    {
+      "path": "pages/composition-api/basic/define-props/define-props",
+      "style": {
+        "navigationBarTitleText": "defineProps"
+      }
+    },
+    {
+      "path": "pages/composition-api/basic/define-emits/define-emits",
+      "style": {
+        "navigationBarTitleText": "defineEmits"
+      }
+    },
+    {
+      "path": "pages/composition-api/basic/define-expose/define-expose",
+      "style": {
+        "navigationBarTitleText": "defineExpose"
+      }
+    },
+    {
+      "path": "pages/composition-api/basic/define-model/define-model",
+      "style": {
+        "navigationBarTitleText": "defineModel"
+      }
+    },
+    {
+      "path": "pages/composition-api/basic/define-options/define-options",
+      "style": {
+        "navigationBarTitleText": "defineOptions"
+      }
+    },
+    {
+      "path": "pages/composition-api/basic/define-slots/define-slots",
+      "style": {
+        "navigationBarTitleText": "defineSlots"
+      }
+    },
+    {
+      "path": "pages/composition-api/basic/use-attrs/use-attrs",
+      "style": {
+        "navigationBarTitleText": "useAttrs"
+      }
+    },
+    {
+      "path": "pages/composition-api/basic/use-slots/use-slots",
+      "style": {
+        "navigationBarTitleText": "useSlots"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/ref/ref",
+      "style": {
+        "navigationBarTitleText": "ref"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/computed/computed",
+      "style": {
+        "navigationBarTitleText": "computed"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/reactive/reactive",
+      "style": {
+        "navigationBarTitleText": "reactive"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/readonly/readonly",
+      "style": {
+        "navigationBarTitleText": "readonly"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/watch/watch",
+      "style": {
+        "navigationBarTitleText": "watch"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/watch-effect/watch-effect",
+      "style": {
+        "navigationBarTitleText": "watchEffect"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/watch-post-effect/watch-post-effect",
+      "style": {
+        "navigationBarTitleText": "watchPostEffect"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/watch-sync-effect/watch-sync-effect",
+      "style": {
+        "navigationBarTitleText": "watchSyncEffect"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/is-ref/is-ref",
+      "style": {
+        "navigationBarTitleText": "isRef"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/un-ref/un-ref",
+      "style": {
+        "navigationBarTitleText": "unRef"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/to-ref/to-ref",
+      "style": {
+        "navigationBarTitleText": "toRef"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/to-value/to-value",
+      "style": {
+        "navigationBarTitleText": "toValue"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/to-refs/to-refs",
+      "style": {
+        "navigationBarTitleText": "toRefs"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/is-proxy/is-proxy",
+      "style": {
+        "navigationBarTitleText": "isProxy"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/is-reactive/is-reactive",
+      "style": {
+        "navigationBarTitleText": "isReactive"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/is-readonly/is-readonly",
+      "style": {
+        "navigationBarTitleText": "isReadonly"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/shallow-ref/shallow-ref",
+      "style": {
+        "navigationBarTitleText": "shallowRef"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/trigger-ref/trigger-ref",
+      "style": {
+        "navigationBarTitleText": "triggerRef"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/custom-ref/custom-ref",
+      "style": {
+        "navigationBarTitleText": "customRef"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/shallow-reactive/shallow-reactive",
+      "style": {
+        "navigationBarTitleText": "shallowReactive"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/shallow-readonly/shallow-readonly",
+      "style": {
+        "navigationBarTitleText": "shallowReadonly"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/to-raw/to-raw",
+      "style": {
+        "navigationBarTitleText": "toRaw"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/mark-raw/mark-raw",
+      "style": {
+        "navigationBarTitleText": "markRaw"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/effect-scope/effect-scope",
+      "style": {
+        "navigationBarTitleText": "effectScope"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/get-current-scope/get-current-scope",
+      "style": {
+        "navigationBarTitleText": "getCurrentScope"
+      }
+    },
+    {
+      "path": "pages/composition-api/reactive/on-scope-dispose/on-scope-dispose",
+      "style": {
+        "navigationBarTitleText": "onScopeDispose"
+      }
     }
-  ],
-  "tabBar": {
-    "color": "#7A7E83",
-    "selectedColor": "#007AFF",
-    "borderStyle": "black",
-    "backgroundColor": "#F8F8F8",
-    "list": [{
-        "pagePath": "pages/tab-bar/options-api",
-        "text": "选项式 API"
-      },
-      {
-        "pagePath": "pages/tab-bar/composition-api",
-        "text": "组合式 API"
-      }
-    ]
+  ],
+  "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#007AFF",
+    "borderStyle": "black",
+    "backgroundColor": "#F8F8F8",
+    "list": [
+      {
+        "pagePath": "pages/tab-bar/options-api",
+        "text": "选项式 API"
+      },
+      {
+        "pagePath": "pages/tab-bar/composition-api",
+        "text": "组合式 API"
+      }
+    ]
   },
   "globalStyle": {
     "pageOrientation": "portrait",
@@ -421,4 +626,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}

pages/composition-api/basic/define-emits/define-emits.uvue

+<template>
+  <view class="page"> defineEmits </view>
+</template>
+
+<script setup></script>

pages/composition-api/basic/define-expose/define-expose.uvue

+<template>
+  <view class="page"> defineExpose </view>
+</template>
+
+<script setup></script>

pages/composition-api/basic/define-model/define-model.uvue

+<template>
+  <view class="page"> defineModel </view>
+</template>
+
+<script setup></script>

pages/composition-api/basic/define-options/define-options.uvue

+<template>
+  <view class="page"> defineOptions </view>
+</template>
+
+<script setup></script>

pages/composition-api/basic/define-props/define-props.uvue

+<template>
+  <view class="page"> defineProps </view>
+</template>
+
+<script setup></script>

pages/composition-api/basic/define-slots/define-slots.uvue

+<template>
+  <view class="page"> defineSlots </view>
+</template>
+
+<script setup></script>

pages/composition-api/basic/use-attrs/use-attrs.uvue

+<template>
+  <view class="page"> useAttrs </view>
+</template>
+
+<script setup></script>

pages/composition-api/basic/use-slots/use-slots.uvue

+<template>
+  <view class="page"> useSlots </view>
+</template>
+
+<script setup></script>

pages/composition-api/reactive/computed/computed.uvue

+ <template><view class="page">computed</view></template>

pages/composition-api/reactive/custom-ref/custom-ref.uvue

+ <template><view class="page">customRef</view></template>
\ No newline at end of file

pages/composition-api/reactive/effect-scope/effect-scope.uvue

+ <template><view class="page">getCurrentScope</view></template>
\ No newline at end of file

pages/composition-api/reactive/get-current-scope/get-current-scope.uvue

+ <template><view class="page">effectScope</view></template>
\ No newline at end of file

pages/composition-api/reactive/is-proxy/is-proxy.uvue

+ <template><view class="page">isProxy</view></template>
\ No newline at end of file

pages/composition-api/reactive/is-reactive/is-reactive.uvue

+ <template><view class="page">isReactive</view></template>
\ No newline at end of file

pages/composition-api/reactive/is-readonly/is-readonly.uvue

+ <template><view class="page">isReadonly</view></template>
\ No newline at end of file

pages/composition-api/reactive/is-ref/is-ref.uvue

+ <template><view class="page">isRef</view></template>
\ No newline at end of file

pages/composition-api/reactive/mark-raw/mark-raw.uvue

+ <template><view class="page">markRaw</view></template>
\ No newline at end of file

pages/composition-api/reactive/on-scope-dispose/on-scope-dispose.uvue

+ <template><view class="page">onScopeDispose</view></template>
\ No newline at end of file

pages/composition-api/reactive/reactive/reactive.uvue

+ <template><view class="page">reactive</view></template>
\ No newline at end of file

pages/composition-api/reactive/readonly/readonly.uvue

+ <template><view class="page">readonly</view></template>
\ No newline at end of file

pages/composition-api/reactive/ref/ref.uvue

+ <template><view class="page">ref</view></template>
\ No newline at end of file

pages/composition-api/reactive/shallow-reactive/shallow-reactive.uvue

+ <template><view class="page">shallowReactive</view></template>
\ No newline at end of file

pages/composition-api/reactive/shallow-readonly/shallow-readonly.uvue

+ <template><view class="page">shallowReadonly</view></template>
\ No newline at end of file

pages/composition-api/reactive/shallow-ref/shallow-ref.uvue

+ <template><view class="page">shallowRef</view></template>
\ No newline at end of file

pages/composition-api/reactive/to-raw/to-raw.uvue

+ <template><view class="page">toRaw</view></template>
\ No newline at end of file

pages/composition-api/reactive/to-ref/to-ref.uvue

+ <template><view class="page">toRef</view></template>
\ No newline at end of file

pages/composition-api/reactive/to-refs/to-refs.uvue

+ <template><view class="page">toRefs</view></template>
\ No newline at end of file

pages/composition-api/reactive/to-value/to-value.uvue

+ <template><view class="page">toValue</view></template>
\ No newline at end of file

pages/composition-api/reactive/trigger-ref/trigger-ref.uvue

+ <template><view class="page">triggerRef</view></template>
\ No newline at end of file

pages/composition-api/reactive/un-ref/un-ref.uvue

+ <template><view class="page">unRef</view></template>
\ No newline at end of file

pages/composition-api/reactive/watch-effect/watch-effect.uvue

+ <template><view class="page">watchEffect</view></template>

pages/composition-api/reactive/watch-post-effect/watch-post-effect.uvue

+ <template><view class="page">watchPostEffect</view></template>

pages/composition-api/reactive/watch-sync-effect/watch-sync-effect.uvue

+ <template><view class="page">watchSyncEffect</view></template>

pages/composition-api/reactive/watch/watch.uvue

+ <template><view class="page">watch</view></template>

pages/tab-bar/composition-api.uvue

@@ -10,7 +10,6 @@
               v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(item.id, page)">
               <text class="uni-navigate-text"
                 :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
-              <view class="down_arrow"></view>
             </view>
           </uni-collapse-item>
         </template>
@@ -21,7 +20,7 @@
   <!-- #endif -->
 </template>
 
-<script lang="uts">
+<script setup lang="uts">
   type PageItem = {
     name : string
     enable ?: boolean
@@ -36,33 +35,201 @@
     url ?: string
     enable ?: boolean
   }
-
-  export default {
-    data() {
-      return {
-        list: [
-        ] as PageList[],
+  
+  const list = [
+      {
+        id: 'basic',
+        name: '基本使用',
+        open: false,
+        pages: [
+          {
+            name: 'defineProps',
+            url: 'define-props',
+            enable: false,
+          },
+          {
+            name: 'defineEmits',
+            url: 'define-emits',
+            enable: false,
+          },
+          {
+            name: 'defineExpose',
+            url: 'define-expose',
+            enable: false,
+          },
+          {
+            name: 'defineOptions',
+            url: 'define-options',
+            enable: false,
+          },
+          {
+            name: 'defineSlots',
+            url: 'define-slots',
+            enable: false,
+          },
+          {
+            name: 'useSlots',
+            url: 'use-slots',
+            enable: false,
+          },
+          {
+            name: 'useAttrs',
+            url: 'use-attrs',
+            enable: false,
+          },
+        ] as PageItem[],
+      }, {
+        id: 'reactive',
+        name: '响应式',
+        open: false,
+        pages: [
+          {
+            name: 'ref',
+            url: 'ref',
+            enable: false,
+          },
+          {
+            name: 'computed',
+            url: 'computed',
+            enable: false,
+          },
+          {
+            name: 'reactive',
+            url: 'reactive',
+            enable: false,
+          },
+          {
+            name: 'readonly',
+            url: 'readonly',
+            enable: false,
+          },
+          {
+            name: 'watch',
+            url: 'watch',
+            enable: false,
+          },
+          {
+            name: 'watchEffect',
+            url: 'watch-effect',
+            enable: false,
+          },
+          {
+            name: 'watchPostEffect',
+            url: 'watch-post-effect',
+            enable: false,
+          },
+          {
+            name: 'watchSyncEffect',
+            url: 'watch-sync-effect',
+            enable: false,
+          },
+          {
+            name: 'isRef',
+            url: 'is-ref',
+            enable: false,
+          },
+          {
+            name: 'unRef',
+            url: 'un-ref',
+            enable: false,
+          },
+          {
+            name: 'toRef',
+            url: 'to-ref',
+            enable: false,
+          },
+          {
+            name: 'toValue',
+            url: 'to-value',
+            enable: false,
+          },
+          {
+            name: 'toRefs',
+            url: 'to-refs',
+            enable: false,
+          },
+          {
+            name: 'isProxy',
+            url: 'is-proxy',
+            enable: false,
+          },
+          {
+            name: 'isReactive',
+            url: 'is-reactive',
+            enable: false,
+          },
+          {
+            name: 'isReadonly',
+            url: 'is-readonly',
+            enable: false,
+          },
+          {
+            name: 'shallowRef',
+            url: 'shallow-ref',
+            enable: false,
+          },
+          {
+            name: 'triggerRef',
+            url: 'trigger-ref',
+            enable: false,
+          },
+          {
+            name: 'customRef',
+            url: 'custom-ref',
+            enable: false,
+          },
+          {
+            name: 'shallowReactive',
+            url: 'shallow-reactive',
+            enable: false,
+          },
+          {
+            name: 'shallowReadonly',
+            url: 'shallow-readonly',
+            enable: false,
+          },
+          {
+            name: 'toRaw',
+            url: 'to-raw',
+            enable: false,
+          },
+          {
+            name: 'markRaw',
+            url: 'mark-raw',
+            enable: false, // 暂不支持
+          },
+          {
+            name: 'effectScope',
+            url: 'effect-scope',
+            enable: false,
+          },
+          {
+            name: 'getCurrentScope',
+            url: 'get-current-scope',
+            enable: false,
+          },
+          {
+            name: 'onScopeDispose',
+            url: 'on-scope-dispose',
+            enable: false,
+          },
+        ] as PageItem[],
       }
-    },
-    methods: {
-      triggerCollapse(_ : PageList, index : number) {
-        this.list[index].open = !this.list[index].open
-      },
-      goDetailPage(id : string, e : PageItem) {
-        if (e.enable == false) {
-          uni.showToast({
-            icon: 'none',
-            title: '暂不支持',
-          })
-          return
-        }
+    ] as PageList[]
+
+  const goDetailPage = (id : string, e : PageItem) => {
+    if (e.enable == false) {
+      uni.showToast({
+        icon: 'none',
+        title: '暂不支持',
+      })
+      return
+    }
 
-        const url = e.url!.includes('/') ? e.url : `${e.url}/${e.url}`
-        uni.navigateTo({
-          url: `/pages/${id}/${url}`,
-        })
-      },
-    },
+    const url = e.url!.includes('/') ? e.url : `${e.url}/${e.url}`
+    uni.navigateTo({
+      url: `/pages/composition-api/${id}/${url}`,
+    })
   }
 </script>
 
@@ -70,15 +237,4 @@
   .item {
     margin-bottom: 12px;
   }
-
-  .down_arrow {
-    width: 8px;
-    height: 8px;
-    transform: rotate(45deg);
-    border-right: 1px #999 solid;
-    border-bottom: 1px #999 solid;
-    margin-top: -3px;
-    transition-property: transform;
-    transition-duration: 0.2s;
-  }
 </style>
\ No newline at end of file

pages/tab-bar/options-api.uvue

@@ -10,7 +10,6 @@
               v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(item.id, page)">
               <text class="uni-navigate-text"
                 :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
-              <view class="down_arrow"></view>
             </view>
           </uni-collapse-item>
         </template>
@@ -444,9 +443,6 @@
       }
     },
     methods: {
-      triggerCollapse(_ : PageList, index : number) {
-        this.list[index].open = !this.list[index].open
-      },
       goDetailPage(id : string, e : PageItem) {
         if (e.enable == false) {
           uni.showToast({
@@ -482,15 +478,4 @@
   .item {
     margin-bottom: 12px;
   }
-
-  .down_arrow {
-    width: 8px;
-    height: 8px;
-    transform: rotate(45deg);
-    border-right: 1px #999 solid;
-    border-bottom: 1px #999 solid;
-    margin-top: -3px;
-    transition-property: transform;
-    transition-duration: 0.2s;
-  }
 </style>
\ No newline at end of file