refactor(reactivity): 重构目录结构

pages.json

@@ -277,34 +277,6 @@
         "navigationBarTitleText": "v-html"
       }
     },
-    {
-      "path": "pages/lifecycle/page/page-composition",
-      "style": {
-        "navigationBarTitleText": "page-lifecycle 组合式 API",
-        "enablePullDownRefresh": true
-      }
-    },
-    {
-      "path": "pages/lifecycle/page/page-options",
-      "style": {
-        "navigationBarTitleText": "page-lifecycle 选项式 API",
-        "enablePullDownRefresh": true
-      }
-    },
-    {
-      "path": "pages/lifecycle/component/component-options",
-      "style": {
-        "navigationBarTitleText": "component-lifecycle 选项式 API",
-        "enablePullDownRefresh": true
-      }
-    },
-    {
-      "path": "pages/lifecycle/component/component-composition",
-      "style": {
-        "navigationBarTitleText": "component-lifecycle 组合式 API",
-        "enablePullDownRefresh": true
-      }
-    },
     {
       "path": "pages/component-instance/slots/slots-options",
       "style": {
@@ -489,320 +461,274 @@
       }
     },
     // #endif
-
-
-    {
-      "path": "pages/state/data/data",
-      "style": {
-        "navigationBarTitleText": "data"
-      }
-    },
-    {
-      "path": "pages/state/methods/methods",
-      "style": {
-        "navigationBarTitleText": ""
-      }
-    },
-    {
-      "path": "pages/state/props/props",
-      "style": {
-        "navigationBarTitleText": ""
-      }
-    },
     {
-      "path": "pages/state/computed/computed",
+      "path": "pages/reactivity/core/ref/ref",
       "style": {
-        "navigationBarTitleText": ""
-      }
-    },
-    {
-      "path": "pages/state/watch/watch",
-      "style": {
-        "navigationBarTitleText": ""
-      }
-    },
-    {
-      "path": "pages/built-in/component/slots/slots-composition",
-      "style": {
-        "navigationBarTitleText": "slots 组合式 API"
-      }
-    },
-    {
-      "path": "pages/built-in/component/slots/slots-options",
-      "style": {
-        "navigationBarTitleText": "slots 选项式 API"
-      }
-    },
-    {
-      "path": "pages/built-in/component/template/template-options",
-      "style": {
-        "navigationBarTitleText": "template 选项式 API"
+        "navigationBarTitleText": "ref"
       }
     },
     {
-      "path": "pages/built-in/component/template/template-composition",
+      "path": "pages/reactivity/core/computed/computed",
       "style": {
-        "navigationBarTitleText": "template 组合式 API"
+        "navigationBarTitleText": "computed"
       }
     },
     {
-      "path": "pages/built-in/component/template/template-map-style-options",
+      "path": "pages/reactivity/core/reactive/reactive",
       "style": {
-        "navigationBarTitleText": "template-map-style 选项式 API"
+        "navigationBarTitleText": "reactive"
       }
     },
     {
-      "path": "pages/built-in/component/template/template-map-style-composition",
+      "path": "pages/reactivity/core/readonly/readonly",
       "style": {
-        "navigationBarTitleText": "template-map-style 组合式 API"
+        "navigationBarTitleText": "readonly"
       }
     },
     {
-      "path": "pages/rendering/unrecognized-component/unrecognized-component",
+      "path": "pages/reactivity/core/watch/watch",
       "style": {
-        "navigationBarTitleText": "unrecognized-component"
+        "navigationBarTitleText": "watch"
       }
     },
     {
-      "path": "pages/built-in/component/component/component-options",
+      "path": "pages/reactivity/core/watch-effect/watch-effect",
       "style": {
-        "navigationBarTitleText": "component 选项式 API"
+        "navigationBarTitleText": "watchEffect"
       }
     },
     {
-      "path": "pages/built-in/component/component/component-composition",
+      "path": "pages/reactivity/core/watch-post-effect/watch-post-effect",
       "style": {
-        "navigationBarTitleText": "component 组合式 API"
+        "navigationBarTitleText": "watchPostEffect"
       }
     },
     {
-      "path": "pages/rendering/render/render",
+      "path": "pages/reactivity/core/watch-sync-effect/watch-sync-effect",
       "style": {
-        "navigationBarTitleText": "render function"
+        "navigationBarTitleText": "watchSyncEffect"
       }
     },
     {
-      "path": "pages/examples/nested-component-communication/nested-component-communication-options",
+      "path": "pages/reactivity/utilities/is-ref/is-ref",
       "style": {
-        "navigationBarTitleText": "嵌套组件通信 选项式 API"
+        "navigationBarTitleText": "isRef"
       }
     },
     {
-      "path": "pages/examples/nested-component-communication/nested-component-communication-composition",
+      "path": "pages/reactivity/utilities/un-ref/un-ref",
       "style": {
-        "navigationBarTitleText": "嵌套组件通信 组合式 API"
-      }
-    },
-    {
-      "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-options",
-      "style": {
-        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式 选项式 API"
+        "navigationBarTitleText": "unRef"
       }
     },
     {
-      "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition",
+      "path": "pages/reactivity/utilities/to-ref/to-ref",
       "style": {
-        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式 组合式 API"
+        "navigationBarTitleText": "toRef"
       }
     },
+    // #ifdef APP
     {
-      "path": "pages/composition-api/basic/define-props/define-props",
+      "path": "pages/reactivity/utilities/to-value/to-value",
       "style": {
-        "navigationBarTitleText": "defineProps"
+        "navigationBarTitleText": "toValue"
       }
     },
     {
-      "path": "pages/composition-api/basic/define-emits/define-emits",
+      "path": "pages/reactivity/utilities/to-refs/to-refs",
       "style": {
-        "navigationBarTitleText": "defineEmits"
+        "navigationBarTitleText": "toRefs"
       }
     },
+    // #endif
     {
-      "path": "pages/composition-api/basic/define-model/define-model",
+      "path": "pages/reactivity/utilities/is-proxy/is-proxy",
       "style": {
-        "navigationBarTitleText": "defineModel"
+        "navigationBarTitleText": "isProxy"
       }
     },
     {
-      "path": "pages/composition-api/basic/define-options/define-options",
+      "path": "pages/reactivity/utilities/is-reactive/is-reactive",
       "style": {
-        "navigationBarTitleText": "defineOptions"
+        "navigationBarTitleText": "isReactive"
       }
     },
     {
-      "path": "pages/composition-api/basic/define-slots/define-slots",
+      "path": "pages/reactivity/utilities/is-readonly/is-readonly",
       "style": {
-        "navigationBarTitleText": "defineSlots"
+        "navigationBarTitleText": "isReadonly"
       }
     },
     {
-      "path": "pages/composition-api/basic/use-attrs/use-attrs",
+      "path": "pages/reactivity/advanced/shallow-ref/shallow-ref",
       "style": {
-        "navigationBarTitleText": "useAttrs"
+        "navigationBarTitleText": "shallowRef"
       }
     },
     {
-      "path": "pages/composition-api/basic/use-slots/use-slots",
+      "path": "pages/reactivity/advanced/trigger-ref/trigger-ref",
       "style": {
-        "navigationBarTitleText": "useSlots"
+        "navigationBarTitleText": "triggerRef"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/ref/ref",
+      "path": "pages/reactivity/advanced/custom-ref/custom-ref",
       "style": {
-        "navigationBarTitleText": "ref"
+        "navigationBarTitleText": "customRef"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/computed/computed",
+      "path": "pages/reactivity/advanced/shallow-reactive/shallow-reactive",
       "style": {
-        "navigationBarTitleText": "computed"
+        "navigationBarTitleText": "shallowReactive"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/reactive/reactive",
+      "path": "pages/reactivity/advanced/shallow-readonly/shallow-readonly",
       "style": {
-        "navigationBarTitleText": "reactive"
+        "navigationBarTitleText": "shallowReadonly"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/readonly/readonly",
+      "path": "pages/reactivity/advanced/to-raw/to-raw",
       "style": {
-        "navigationBarTitleText": "readonly"
+        "navigationBarTitleText": "toRaw"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/watch/watch",
+      "path": "pages/reactivity/advanced/mark-raw/mark-raw",
       "style": {
-        "navigationBarTitleText": "watch"
+        "navigationBarTitleText": "markRaw"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/watch-effect/watch-effect",
+      "path": "pages/reactivity/advanced/effect-scope/effect-scope",
       "style": {
-        "navigationBarTitleText": "watchEffect"
+        "navigationBarTitleText": "effectScope"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/watch-post-effect/watch-post-effect",
+      "path": "pages/reactivity/advanced/get-current-scope/get-current-scope",
       "style": {
-        "navigationBarTitleText": "watchPostEffect"
+        "navigationBarTitleText": "getCurrentScope"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/watch-sync-effect/watch-sync-effect",
+      "path": "pages/reactivity/advanced/on-scope-dispose/on-scope-dispose",
       "style": {
-        "navigationBarTitleText": "watchSyncEffect"
+        "navigationBarTitleText": "onScopeDispose"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/is-ref/is-ref",
+      "path": "pages/lifecycle/page/page-composition",
       "style": {
-        "navigationBarTitleText": "isRef"
+        "navigationBarTitleText": "page-lifecycle 组合式 API",
+        "enablePullDownRefresh": true
       }
     },
     {
-      "path": "pages/composition-api/reactivity/un-ref/un-ref",
+      "path": "pages/lifecycle/page/page-options",
       "style": {
-        "navigationBarTitleText": "unRef"
+        "navigationBarTitleText": "page-lifecycle 选项式 API",
+        "enablePullDownRefresh": true
       }
     },
     {
-      "path": "pages/composition-api/reactivity/to-ref/to-ref",
+      "path": "pages/lifecycle/component/component-options",
       "style": {
-        "navigationBarTitleText": "toRef"
+        "navigationBarTitleText": "component-lifecycle 选项式 API",
+        "enablePullDownRefresh": true
       }
     },
-    // #ifdef APP
     {
-      "path": "pages/composition-api/reactivity/to-value/to-value",
+      "path": "pages/lifecycle/component/component-composition",
       "style": {
-        "navigationBarTitleText": "toValue"
+        "navigationBarTitleText": "component-lifecycle 组合式 API",
+        "enablePullDownRefresh": true
       }
     },
     {
-      "path": "pages/composition-api/reactivity/to-refs/to-refs",
+      "path": "pages/built-in/component/slots/slots-composition",
       "style": {
-        "navigationBarTitleText": "toRefs"
+        "navigationBarTitleText": "slots 组合式 API"
       }
     },
-    // #endif
     {
-      "path": "pages/composition-api/reactivity/is-proxy/is-proxy",
+      "path": "pages/built-in/component/slots/slots-options",
       "style": {
-        "navigationBarTitleText": "isProxy"
+        "navigationBarTitleText": "slots 选项式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/is-reactive/is-reactive",
+      "path": "pages/built-in/component/template/template-options",
       "style": {
-        "navigationBarTitleText": "isReactive"
+        "navigationBarTitleText": "template 选项式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/is-readonly/is-readonly",
+      "path": "pages/built-in/component/template/template-composition",
       "style": {
-        "navigationBarTitleText": "isReadonly"
+        "navigationBarTitleText": "template 组合式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/shallow-ref/shallow-ref",
+      "path": "pages/built-in/component/template/template-map-style-options",
       "style": {
-        "navigationBarTitleText": "shallowRef"
+        "navigationBarTitleText": "template-map-style 选项式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/trigger-ref/trigger-ref",
+      "path": "pages/built-in/component/template/template-map-style-composition",
       "style": {
-        "navigationBarTitleText": "triggerRef"
+        "navigationBarTitleText": "template-map-style 组合式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/custom-ref/custom-ref",
+      "path": "pages/rendering/unrecognized-component/unrecognized-component",
       "style": {
-        "navigationBarTitleText": "customRef"
+        "navigationBarTitleText": "unrecognized-component"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/shallow-reactive/shallow-reactive",
+      "path": "pages/built-in/component/component/component-options",
       "style": {
-        "navigationBarTitleText": "shallowReactive"
+        "navigationBarTitleText": "component 选项式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/shallow-readonly/shallow-readonly",
+      "path": "pages/built-in/component/component/component-composition",
       "style": {
-        "navigationBarTitleText": "shallowReadonly"
+        "navigationBarTitleText": "component 组合式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/to-raw/to-raw",
+      "path": "pages/rendering/render/render",
       "style": {
-        "navigationBarTitleText": "toRaw"
+        "navigationBarTitleText": "render function"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/mark-raw/mark-raw",
+      "path": "pages/examples/nested-component-communication/nested-component-communication-options",
       "style": {
-        "navigationBarTitleText": "markRaw"
+        "navigationBarTitleText": "嵌套组件通信 选项式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/effect-scope/effect-scope",
+      "path": "pages/examples/nested-component-communication/nested-component-communication-composition",
       "style": {
-        "navigationBarTitleText": "effectScope"
+        "navigationBarTitleText": "嵌套组件通信 组合式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/get-current-scope/get-current-scope",
+      "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-options",
       "style": {
-        "navigationBarTitleText": "getCurrentScope"
+        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式 选项式 API"
       }
     },
     {
-      "path": "pages/composition-api/reactivity/on-scope-dispose/on-scope-dispose",
+      "path": "pages/examples/set-custom-child-component-root-node-class/set-custom-child-component-root-node-class-composition",
       "style": {
-        "navigationBarTitleText": "onScopeDispose"
+        "navigationBarTitleText": "自定义组件中使用 class 定制另一个自定义组件根节点样式 组合式 API"
       }
     },
     {

pages/index/index.uvue

@@ -422,6 +422,23 @@ export default {
             }
           ] as Page[]
         },
+        {
+          id: 'reactivity',
+          name: '响应式',
+          pages: [
+            {
+              id: 'core',
+              name: '核心',
+              children: [
+                {
+                  id: 'ref',
+                  name: 'ref',
+                  url: 'ref/ref'
+                }
+              ]
+            }
+          ] as Page[]
+        },
         {
           id: 'lifecycle',
           name: '生命周期',

pages/composition-api/reactivity/custom-ref/custom-ref.uvue → pages/reactivity/advanced/custom-ref/custom-ref.uvue

  <template>
    <view class="page">
      <text id="state-count">state.count: {{state['count']}}</text>
-     <button class="uni-common-mt increment-btn" @click="increment">increment state.count</button>
-     <button class="uni-common-mt trigger-ref-btn" @click="triggerRefState">triggerRef state</button>
+     <button class="mt-10 increment-btn" @click="increment">increment state.count</button>
+     <button class="mt-10 trigger-ref-btn" @click="triggerRefState">triggerRef state</button>
    </view>
  </template>
 
  <script setup>
-  const useCustomRef = (value : UTSJSONObject) : Ref<UTSJSONObject> => {
-    // @ts-ignore
+  const useCustomRef = (value : UTSJSONObject) : Ref<UTSJSONObject> => {
+    // @ts-ignore
     return customRef<UTSJSONObject>((track, trigger) : UTSJSONObject => {
       return {
         get() : UTSJSONObject {

pages/composition-api/reactivity/effect-scope/effect-scope.uvue → pages/reactivity/advanced/effect-scope/effect-scope.uvue

 <template>
   <view class="page">
     <text id="counter">counter: {{ counter }}</text>
-    <text id="watch-counter-res" class="uni-common-mt">watch counter result: {{ watchCounterRes }}</text>
-    <text id="watch-effect-counter-res" class="uni-common-mt">watchEffect counter result:
+    <text id="watch-counter-res" class="mt-10">watch counter result: {{ watchCounterRes }}</text>
+    <text id="watch-effect-counter-res" class="mt-10">watchEffect counter result:
       {{ watchEffectCounterRes }}</text>
-    <button id="increment-counter-btn" class="uni-common-mt" @click="() => {counter++}">increment counter</button>
-    <button id="stop-effect-scope-btn" class="uni-common-mt" @click="stopEffectScope">stop effect scope</button>
+    <button id="increment-counter-btn" class="mt-10" @click="() => {counter++}">increment counter</button>
+    <button id="stop-effect-scope-btn" class="mt-10" @click="stopEffectScope">stop effect scope</button>
   </view>
 </template>
 

pages/composition-api/reactivity/get-current-scope/get-current-scope.uvue → pages/reactivity/advanced/get-current-scope/get-current-scope.uvue

-<template>
-  <view class="page">
-    <text id="has-current-scope">hasCurrentScope: {{ hasCurrentScope }}</text>
-    <button id="create-scope-btn" class="uni-common-mt" @click="createScope">create scope</button>
-  </view>
-</template>
-
+<template>
+  <view class="page">
+    <text id="has-current-scope">hasCurrentScope: {{ hasCurrentScope }}</text>
+    <button id="create-scope-btn" class="mt-10" @click="createScope">create scope</button>
+  </view>
+</template>
+
 <script setup>
   
   const hasCurrentScope = ref(false)
@@ -14,5 +14,5 @@
     scope.run(() => {
       hasCurrentScope.value = getCurrentScope() !== null
     })
-  }
+  }
 </script>
\ No newline at end of file

pages/composition-api/reactivity/on-scope-dispose/on-scope-dispose.uvue → pages/reactivity/advanced/on-scope-dispose/on-scope-dispose.uvue

 <template>
   <view class="page">
     <text id="has-current-scope">hasCurrentScope: {{ hasCurrentScope }}</text>
-    <button id="create-scope-btn" class="uni-common-mt" @click="createScope">create scope</button>
-    <button id="stop-scope-btn" class="uni-common-mt" @click="stopScope">stop scope</button>
+    <button id="create-scope-btn" class="mt-10" @click="createScope">create scope</button>
+    <button id="stop-scope-btn" class="mt-10" @click="stopScope">stop scope</button>
   </view>
 </template>
 

pages/composition-api/reactivity/shallow-reactive/shallow-reactive.uvue → pages/reactivity/advanced/shallow-reactive/shallow-reactive.uvue

 <template>
   <view class="page">
-    <text id="state-count" class="uni-common-mb" :data-count="state.count">state.count: {{ state.count }}</text>
-    <text id="state-nested-count" class="uni-common-mb">state.nested.count: {{ state.nested.count }}</text>
-    <button class="increment-state-count-btn uni-common-mb" @click="incrementStateCount">
+    <text id="state-count" class="mb-10" :data-count="state.count">state.count: {{ state.count }}</text>
+    <text id="state-nested-count" class="mb-10">state.nested.count: {{ state.nested.count }}</text>
+    <button class="increment-state-count-btn mb-10" @click="incrementStateCount">
       increment state.count
     </button>
     <button class="increment-state-nested-count-btn" @click="incrementStateNestedCount">

pages/composition-api/reactivity/shallow-readonly/shallow-readonly.uvue → pages/reactivity/advanced/shallow-readonly/shallow-readonly.uvue

 <template>
   <view :key="pageKey" class="page">
-    <text id="state-count" class="uni-common-mb">state.count: {{ state.count }}</text>
-    <text id="state-nested-count" class="uni-common-mb">state.nested.count: {{ state.nested.count }}</text>
-    <button id="increment-state-count-btn" class="uni-common-mb" @click="incrementStateCount">
+    <text id="state-count" class="mb-10">state.count: {{ state.count }}</text>
+    <text id="state-nested-count" class="mb-10">state.nested.count: {{ state.nested.count }}</text>
+    <button id="increment-state-count-btn" class="mb-10" @click="incrementStateCount">
       increment state.count
     </button>
-    <button id="increment-state-nested-count-btn" class="uni-common-mb" @click="incrementStateNestedCount">
+    <button id="increment-state-nested-count-btn" class="mb-10" @click="incrementStateNestedCount">
       increment state.nested.count
     </button>
     <button id="update-page-render-btn" @click="updatePageRender">update page render</button>

pages/composition-api/reactivity/shallow-ref/shallow-ref.uvue → pages/reactivity/advanced/shallow-ref/shallow-ref.uvue

 <template>
   <view class="page">
-    <text id="state-count" class="uni-common-mb">state.count: {{ state.count }}</text>
-    <button class="increment-state-count-btn uni-common-mb" @click="incrementStateCount">increment
+    <text id="state-count" class="mb-10">state.count: {{ state.count }}</text>
+    <button class="increment-state-count-btn mb-10" @click="incrementStateCount">increment
       state.count</button>
     <button class="update-state-btn" @click="updateState">update state</button>
   </view>

pages/composition-api/reactivity/to-raw/to-raw.uvue → pages/reactivity/advanced/to-raw/to-raw.uvue

 <template>
   <view class="page">
     <text id="check-to-raw-ref">check toRaw ref: {{ checkToRawRef }}</text>
-    <text class="uni-common-mt" id="check-to-raw-reactive">check toRaw reactive: {{ checkToRawReactive }}</text>
-    <text class="uni-common-mt" id="check-to-raw-readonly">check toRaw readonly: {{ checkToRawReadonly }}</text>
-    <text class="uni-common-mt" id="check-to-raw-shallow-reactive">check toRaw shallowReactive:
+    <text class="mt-10" id="check-to-raw-reactive">check toRaw reactive: {{ checkToRawReactive }}</text>
+    <text class="mt-10" id="check-to-raw-readonly">check toRaw readonly: {{ checkToRawReadonly }}</text>
+    <text class="mt-10" id="check-to-raw-shallow-reactive">check toRaw shallowReactive:
       {{ checkToRawShallowReactive }}</text>
-    <text class="uni-common-mt" id="check-to-raw-shallow-readonly">check toRaw shallowReadonly:
+    <text class="mt-10" id="check-to-raw-shallow-readonly">check toRaw shallowReadonly:
       {{ checkToRawShallowReadonly }}</text>
   </view>
 </template>

pages/composition-api/reactivity/trigger-ref/trigger-ref.uvue → pages/reactivity/advanced/trigger-ref/trigger-ref.uvue

 <template>
   <view class="page">
-    <text id="state-count" class="uni-common-mb">state.count: {{ state.count }}</text>
-    <button id="increment-state-count-btn" class="uni-common-mb" @click="incrementStateCount">increment
+    <text id="state-count" class="mb-10">state.count: {{ state.count }}</text>
+    <button id="increment-state-count-btn" class="mb-10" @click="incrementStateCount">increment
       state.count</button>
     <button id="trigger-ref-state-btn" @click="triggerRefState">trigger state</button>
   </view>
 </template>
 
-<script setup>
-  type State = {
-    count: number
+<script setup>
+  type State = {
+    count: number
   }
   const state = shallowRef({
     count: 0

pages/composition-api/reactivity/computed/computed.uvue → pages/reactivity/core/computed/computed.uvue

 <template>
   <view class="page">
-    <text id="count" class="uni-common-mb">count: {{ count }}</text>
-    <text id="double-count" class="uni-common-mb">computed double count: {{ doubleCount }}</text>
-    <text id="obj-arr" class="uni-common-mb">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
-    <text id="obj-arr-len" class="uni-common-mb">computed obj.arr.length: {{ objArrLen }}</text>
+    <text id="count" class="mb-10">count: {{ count }}</text>
+    <text id="double-count" class="mb-10">computed double count: {{ doubleCount }}</text>
+    <text id="obj-arr" class="mb-10">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
+    <text id="obj-arr-len" class="mb-10">computed obj.arr.length: {{ objArrLen }}</text>
     <button id="update-btn" @click="update">update</button>
   </view>
 </template>

pages/composition-api/reactivity/reactive/reactive.uvue → pages/reactivity/core/reactive/reactive.uvue

 <template>
   <view class="page">
-    <text id="count" class="uni-common-mb">count: {{ count }}</text>
-    <text id="obj-str" class="uni-common-mb">obj.str: {{obj['str']}}</text>
-    <text id="obj-num" class="uni-common-mb">obj.num: {{obj['num']}}</text>
-    <text id="obj-arr" class="uni-common-mb">obj.arr: {{JSON.stringify(obj['arr'])}}</text>
+    <text id="count" class="mb-10">count: {{ count }}</text>
+    <text id="obj-str" class="mb-10">obj.str: {{obj['str']}}</text>
+    <text id="obj-num" class="mb-10">obj.num: {{obj['num']}}</text>
+    <text id="obj-arr" class="mb-10">obj.arr: {{JSON.stringify(obj['arr'])}}</text>
     <button class="update-btn" @click="update">update</button>
   </view>
 </template>

pages/composition-api/reactivity/readonly/readonly.uvue → pages/reactivity/core/readonly/readonly.uvue

 <template>
   <view class="page">
-    <text id="data-str" class="uni-common-mb">data.str: {{ data.str }}</text>
-    <text id="data-num" class="uni-common-mb">data.num: {{ data.num }}</text>
-    <text id="data-arr" class="uni-common-mb">data.arr: {{ JSON.stringify(data.arr) }}</text>
+    <text id="data-str" class="mb-10">data.str: {{ data.str }}</text>
+    <text id="data-num" class="mb-10">data.num: {{ data.num }}</text>
+    <text id="data-arr" class="mb-10">data.arr: {{ JSON.stringify(data.arr) }}</text>
 
-    <text id="readonly-data-str" class="uni-common-mb">readonly data.str: {{ readonlyData.str }}</text>
-    <text id="readonly-data-num" class="uni-common-mb">readonly data.num: {{ readonlyData.num }}</text>
-    <text id="readonly-data-arr" class="uni-common-mb">readonly data.arr: {{ JSON.stringify(readonlyData.arr) }}</text>
+    <text id="readonly-data-str" class="mb-10">readonly data.str: {{ readonlyData.str }}</text>
+    <text id="readonly-data-num" class="mb-10">readonly data.num: {{ readonlyData.num }}</text>
+    <text id="readonly-data-arr" class="mb-10">readonly data.arr: {{ JSON.stringify(readonlyData.arr) }}</text>
 
-    <button id="update-data-btn" class="uni-common-mb" @click="updateData">update data</button>
+    <button id="update-data-btn" class="mb-10" @click="updateData">update data</button>
     <button id="update-readonly-data-btn" @click="updateReadonlyData">update readonly data</button>
   </view>
 </template>

pages/composition-api/reactivity/ref/ref.test.js → pages/reactivity/core/ref/ref.test.js

-const PAGE_PATH = '/pages/composition-api/reactivity/ref/ref'
+const PAGE_PATH = '/pages/reactivity/core/ref/ref'
 
 describe('ref', () => {
   let page = null

pages/composition-api/reactivity/ref/ref.uvue → pages/reactivity/core/ref/ref.uvue

 <template>
   <view class="page">
-    <text id="count1" class="uni-common-mb">count1: {{ count1 }}</text>
-    <text id="count2" class="uni-common-mb">count2: {{ count2 }}</text>
-    <text id="counter-count" class="uni-common-mb">counter.count: {{ counter.count }}</text>
+    <text id="count1" class="mb-10">count1: {{ count1 }}</text>
+    <text id="count2" class="mb-10">count2: {{ count2 }}</text>
+    <text id="counter-count" class="mb-10">counter.count: {{ counter.count }}</text>
     <button class="increment-btn" @click="increment">increment</button>
   </view>
 </template>
 
-<script setup>
+<script setup lang='uts'>
   const count1 = ref(0)
   const count2 = ref(count1)
 

pages/composition-api/reactivity/watch-effect/watch-effect.uvue → pages/reactivity/core/watch-effect/watch-effect.uvue

@@ -3,31 +3,31 @@
   <scroll-view style="flex: 1; padding-bottom: 20px">
   <!-- #endif -->
     <view class="page">
-      <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
-      <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
-      <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
-      <text id="watch-count-cleanup-res" class="uni-common-mb">watch count cleanup result:
+      <text id="count" ref="countRef" class="mb-10">count: {{ count }}</text>
+      <text id="watch-count-res" class="mb-10">watch count result: {{ watchCountRes }}</text>
+      <text id="watch-count-track-num" class="mb-10">watch count track number: {{ watchCountTrackNum }}</text>
+      <text id="watch-count-cleanup-res" class="mb-10">watch count cleanup result:
         {{ watchCountCleanupRes }}</text>
-      <button class="increment-btn uni-common-mb" @click="increment">
+      <button class="increment-btn mb-10" @click="increment">
         increment
       </button>
-      <button class="stop-watch-count-btn uni-common-mb" @click="triggerStopWatchCount">
+      <button class="stop-watch-count-btn mb-10" @click="triggerStopWatchCount">
         stop watch count
       </button>
-      <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
-      <text id="watch-obj-str-trigger-num" class="uni-common-mb">watch obj.str trigger number:
+      <text id="obj-str" ref="objStrRef" class="mb-10">obj.str: {{ obj.str }}</text>
+      <text id="watch-obj-str-trigger-num" class="mb-10">watch obj.str trigger number:
         {{ watchObjStrTriggerNum }}</text>
-      <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
-      <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
-      <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
-      <text id="watch-obj-res" class="uni-common-mb">watch obj result: {{ watchObjRes }}</text>
-      <text id="watch-obj-str-res" class="uni-common-mb">watch obj.str result: {{ watchObjStrRes }}</text>
-      <text id="watch-obj-bool-res" class="uni-common-mb">watch obj.bool result: {{ watchObjBoolRes }}</text>
-      <text id="watch-obj-arr-res" class="uni-common-mb">watch obj.arr result: {{ watchObjArrRes }}</text>
-      <button class="update-obj-btn uni-common-mb" @click="updateObj">
+      <text id="obj-num" class="mb-10">obj.num: {{ obj.num }}</text>
+      <text id="obj-bool" ref="objBoolRef" class="mb-10">obj.bool: {{ obj.bool }}</text>
+      <text id="obj-arr" ref="objArrRef" class="mb-10">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
+      <text id="watch-obj-res" class="mb-10">watch obj result: {{ watchObjRes }}</text>
+      <text id="watch-obj-str-res" class="mb-10">watch obj.str result: {{ watchObjStrRes }}</text>
+      <text id="watch-obj-bool-res" class="mb-10">watch obj.bool result: {{ watchObjBoolRes }}</text>
+      <text id="watch-obj-arr-res" class="mb-10">watch obj.arr result: {{ watchObjArrRes }}</text>
+      <button class="update-obj-btn mb-10" @click="updateObj">
         update obj
       </button>
-      <text id="watch-count-obj-num-res" class="uni-common-mb">watch count and obj.num result:
+      <text id="watch-count-obj-num-res" class="mb-10">watch count and obj.num result:
         {{ watchCountAndObjNumRes }}</text>
     </view>
   <!-- #ifdef APP -->

pages/composition-api/reactivity/watch-post-effect/watch-post-effect.uvue → pages/reactivity/core/watch-post-effect/watch-post-effect.uvue

@@ -3,29 +3,29 @@
   <scroll-view style="flex: 1; padding-bottom: 20px">
   <!-- #endif -->
     <view class="page">
-      <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
-      <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
-      <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
-      <text id="watch-count-cleanup-res" class="uni-common-mb">watch count cleanup result: {{ watchCountCleanupRes }}</text>
-      <button id="increment-btn" class="uni-common-mb" @click="increment">
+      <text id="count" ref="countRef" class="mb-10">count: {{ count }}</text>
+      <text id="watch-count-res" class="mb-10">watch count result: {{ watchCountRes }}</text>
+      <text id="watch-count-track-num" class="mb-10">watch count track number: {{ watchCountTrackNum }}</text>
+      <text id="watch-count-cleanup-res" class="mb-10">watch count cleanup result: {{ watchCountCleanupRes }}</text>
+      <button id="increment-btn" class="mb-10" @click="increment">
         increment
       </button>
-      <button id="stop-watch-count-btn" class="uni-common-mb" @click="triggerStopWatchCount">
+      <button id="stop-watch-count-btn" class="mb-10" @click="triggerStopWatchCount">
         stop watch count
       </button>
-      <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
-      <text id="watch-obj-str-trigger-num" class="uni-common-mb">watch obj.str trigger number:
+      <text id="obj-str" ref="objStrRef" class="mb-10">obj.str: {{ obj.str }}</text>
+      <text id="watch-obj-str-trigger-num" class="mb-10">watch obj.str trigger number:
         {{ watchObjStrTriggerNum }}</text>
-      <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
-      <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
-      <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
-      <text id="watch-obj-res" class="uni-common-mb">watch obj result: {{ watchObjRes }}</text>
-      <text id="watch-obj-str-res" class="uni-common-mb">watch obj.str result: {{ watchObjStrRes }}</text>
-      <text id="watch-obj-arr-res" class="uni-common-mb">watch obj.arr result: {{ watchObjArrRes }}</text>
-      <button id="update-obj-btn" class="uni-common-mb" @click="updateObj">
+      <text id="obj-num" class="mb-10">obj.num: {{ obj.num }}</text>
+      <text id="obj-bool" ref="objBoolRef" class="mb-10">obj.bool: {{ obj.bool }}</text>
+      <text id="obj-arr" ref="objArrRef" class="mb-10">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
+      <text id="watch-obj-res" class="mb-10">watch obj result: {{ watchObjRes }}</text>
+      <text id="watch-obj-str-res" class="mb-10">watch obj.str result: {{ watchObjStrRes }}</text>
+      <text id="watch-obj-arr-res" class="mb-10">watch obj.arr result: {{ watchObjArrRes }}</text>
+      <button id="update-obj-btn" class="mb-10" @click="updateObj">
         update obj
       </button>
-      <text id="watch-count-obj-num-res" class="uni-common-mb">watch count and obj.num result:
+      <text id="watch-count-obj-num-res" class="mb-10">watch count and obj.num result:
         {{ watchCountAndObjNumRes }}</text>
     </view>
   <!-- #ifdef APP -->

pages/composition-api/reactivity/watch-sync-effect/watch-sync-effect.uvue → pages/reactivity/core/watch-sync-effect/watch-sync-effect.uvue

@@ -3,30 +3,30 @@
   <scroll-view style="flex: 1; padding-bottom: 20px">
   <!-- #endif -->
     <view class="page">
-      <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
-      <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
-      <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
-      <text id="watch-count-cleanup-res" class="uni-common-mb">watch count cleanup result:
+      <text id="count" ref="countRef" class="mb-10">count: {{ count }}</text>
+      <text id="watch-count-res" class="mb-10">watch count result: {{ watchCountRes }}</text>
+      <text id="watch-count-track-num" class="mb-10">watch count track number: {{ watchCountTrackNum }}</text>
+      <text id="watch-count-cleanup-res" class="mb-10">watch count cleanup result:
         {{ watchCountCleanupRes }}</text>
-      <button id="increment-btn" class="uni-common-mb" @click="increment">
+      <button id="increment-btn" class="mb-10" @click="increment">
         increment
       </button>
-      <button id="stop-watch-count-btn" class="uni-common-mb" @click="triggerStopWatchCount">
+      <button id="stop-watch-count-btn" class="mb-10" @click="triggerStopWatchCount">
         stop watch count
       </button>
-      <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
-      <text id="watch-obj-str-trigger-num" class="uni-common-mb">watch obj.str trigger number:
+      <text id="obj-str" ref="objStrRef" class="mb-10">obj.str: {{ obj.str }}</text>
+      <text id="watch-obj-str-trigger-num" class="mb-10">watch obj.str trigger number:
         {{ watchObjStrTriggerNum }}</text>
-      <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
-      <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
-      <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
-      <text id="watch-obj-res" class="uni-common-mb">watch obj result: {{ watchObjRes }}</text>
-      <text id="watch-obj-str-res" class="uni-common-mb">watch obj.str result: {{ watchObjStrRes }}</text>
-      <text id="watch-obj-arr-res" class="uni-common-mb">watch obj.arr result: {{ watchObjArrRes }}</text>
-      <button id="update-obj-btn" class="uni-common-mb" @click="updateObj">
+      <text id="obj-num" class="mb-10">obj.num: {{ obj.num }}</text>
+      <text id="obj-bool" ref="objBoolRef" class="mb-10">obj.bool: {{ obj.bool }}</text>
+      <text id="obj-arr" ref="objArrRef" class="mb-10">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
+      <text id="watch-obj-res" class="mb-10">watch obj result: {{ watchObjRes }}</text>
+      <text id="watch-obj-str-res" class="mb-10">watch obj.str result: {{ watchObjStrRes }}</text>
+      <text id="watch-obj-arr-res" class="mb-10">watch obj.arr result: {{ watchObjArrRes }}</text>
+      <button id="update-obj-btn" class="mb-10" @click="updateObj">
         update obj
       </button>
-      <text id="watch-count-obj-num-res" class="uni-common-mb">watch count and obj.num result:
+      <text id="watch-count-obj-num-res" class="mb-10">watch count and obj.num result:
         {{ watchCountAndObjNumRes }}</text>
     </view>
   <!-- #ifdef APP -->

pages/composition-api/reactivity/watch/watch.uvue → pages/reactivity/core/watch/watch.uvue

@@ -3,31 +3,31 @@
   <scroll-view style="flex: 1; padding-bottom: 20px">
   <!-- #endif -->
     <view class="page">
-      <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
-      <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
-      <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
-      <text id="watch-count-cleanup-res" class="uni-common-mb">watch count cleanup result:
+      <text id="count" ref="countRef" class="mb-10">count: {{ count }}</text>
+      <text id="watch-count-res" class="mb-10">watch count result: {{ watchCountRes }}</text>
+      <text id="watch-count-track-num" class="mb-10">watch count track number: {{ watchCountTrackNum }}</text>
+      <text id="watch-count-cleanup-res" class="mb-10">watch count cleanup result:
         {{ watchCountCleanupRes }}</text>
-      <button class="increment-btn uni-common-mb" @click="increment">
+      <button class="increment-btn mb-10" @click="increment">
         increment
       </button>
-      <button class="stop-watch-count-btn uni-common-mb" @click="triggerStopWatchCount">
+      <button class="stop-watch-count-btn mb-10" @click="triggerStopWatchCount">
         stop watch count
       </button>
-      <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
-      <text id="watch-obj-str-trigger-num" class="uni-common-mb">watch obj.str trigger number:
+      <text id="obj-str" ref="objStrRef" class="mb-10">obj.str: {{ obj.str }}</text>
+      <text id="watch-obj-str-trigger-num" class="mb-10">watch obj.str trigger number:
         {{ watchObjStrTriggerNum }}</text>
-      <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
-      <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
-      <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
-      <text id="watch-obj-res" class="uni-common-mb">watch obj result: {{ watchObjRes }}</text>
-      <text id="watch-obj-str-res" class="uni-common-mb">watch obj.str result: {{ watchObjStrRes }}</text>
-      <text id="watch-obj-bool-res" class="uni-common-mb">watch obj.bool result: {{ watchObjBoolRes }}</text>
-      <text id="watch-obj-arr-res" class="uni-common-mb">watch obj.arr result: {{ watchObjArrRes }}</text>
-      <button class="update-obj-btn uni-common-mb" @click="updateObj">
+      <text id="obj-num" class="mb-10">obj.num: {{ obj.num }}</text>
+      <text id="obj-bool" ref="objBoolRef" class="mb-10">obj.bool: {{ obj.bool }}</text>
+      <text id="obj-arr" ref="objArrRef" class="mb-10">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
+      <text id="watch-obj-res" class="mb-10">watch obj result: {{ watchObjRes }}</text>
+      <text id="watch-obj-str-res" class="mb-10">watch obj.str result: {{ watchObjStrRes }}</text>
+      <text id="watch-obj-bool-res" class="mb-10">watch obj.bool result: {{ watchObjBoolRes }}</text>
+      <text id="watch-obj-arr-res" class="mb-10">watch obj.arr result: {{ watchObjArrRes }}</text>
+      <button class="update-obj-btn mb-10" @click="updateObj">
         update obj
       </button>
-      <text id="watch-count-obj-num-res" class="uni-common-mb">watch count and obj.num result:
+      <text id="watch-count-obj-num-res" class="mb-10">watch count and obj.num result:
         {{ watchCountAndObjNumRes }}</text>
     </view>
   <!-- #ifdef APP -->

pages/composition-api/reactivity/is-proxy/is-proxy.uvue → pages/reactivity/utilities/is-proxy/is-proxy.uvue

 <template>
   <view class="page">
     <text id="is-proxy-count">isProxy(count): {{ isProxyCount }}</text>
-    <text class="uni-common-mt" id="is-proxy-ref-count">isProxy(refCount): {{ isProxyRefCount }}</text>
-    <text class="uni-common-mt" id="is-proxy-reactive-count">isProxy(reactiveCount): {{ isProxyReactiveCount }}</text>
-    <text class="uni-common-mt" id="is-proxy-readonly-count">isProxy(readonlyCount): {{ isProxyReadonlyCount }}</text>
-    <text class="uni-common-mt" id="is-proxy-shallow-reactive-count">isProxy(shallowReactiveCount): {{ isProxyShallowReactiveCount }}</text>
-    <text class="uni-common-mt" id="is-proxy-shallow-readonly-count">isProxy(shallowReadonlyCount): {{ isProxyShallowReadonlyCount }}</text>
+    <text class="mt-10" id="is-proxy-ref-count">isProxy(refCount): {{ isProxyRefCount }}</text>
+    <text class="mt-10" id="is-proxy-reactive-count">isProxy(reactiveCount): {{ isProxyReactiveCount }}</text>
+    <text class="mt-10" id="is-proxy-readonly-count">isProxy(readonlyCount): {{ isProxyReadonlyCount }}</text>
+    <text class="mt-10" id="is-proxy-shallow-reactive-count">isProxy(shallowReactiveCount): {{ isProxyShallowReactiveCount }}</text>
+    <text class="mt-10" id="is-proxy-shallow-readonly-count">isProxy(shallowReadonlyCount): {{ isProxyShallowReadonlyCount }}</text>
   </view>
 </template>
 

pages/composition-api/reactivity/is-reactive/is-reactive.uvue → pages/reactivity/utilities/is-reactive/is-reactive.uvue

 <template>
   <view class="page">
     <text id="is-reactive-count">isReactive(count): {{ isProxyCount }}</text>
-    <text class="uni-common-mt" id="is-reactive-ref-count">isReactive(refCount): {{ isProxyRefCount }}</text>
-    <text class="uni-common-mt" id="is-reactive-reactive-count">isReactive(reactiveCount):
+    <text class="mt-10" id="is-reactive-ref-count">isReactive(refCount): {{ isProxyRefCount }}</text>
+    <text class="mt-10" id="is-reactive-reactive-count">isReactive(reactiveCount):
       {{ isProxyReactiveCount }}</text>
-    <text class="uni-common-mt" id="is-reactive-readonly-count">isReactive(readonlyCount):
+    <text class="mt-10" id="is-reactive-readonly-count">isReactive(readonlyCount):
       {{ isProxyReadonlyCount }}</text>
-    <text class="uni-common-mt" id="is-reactive-shallow-reactive-count">isReactive(shallowReactiveCount):
+    <text class="mt-10" id="is-reactive-shallow-reactive-count">isReactive(shallowReactiveCount):
       {{ isProxyShallowReactiveCount }}</text>
-    <text class="uni-common-mt" id="is-reactive-shallow-readonly-count">isReactive(shallowReadonlyCount):
+    <text class="mt-10" id="is-reactive-shallow-readonly-count">isReactive(shallowReadonlyCount):
       {{ isProxyShallowReadonlyCount }}</text>
   </view>
 </template>

pages/composition-api/reactivity/is-readonly/is-readonly.uvue → pages/reactivity/utilities/is-readonly/is-readonly.uvue

 <template>
   <view class="page">
     <text id="is-readonly-count">isReadonly(count): {{ isProxyCount }}</text>
-    <text class="uni-common-mt" id="is-readonly-ref-count">isReadonly(refCount): {{ isProxyRefCount }}</text>
-    <text class="uni-common-mt" id="is-readonly-reactive-count">isReadonly(reactiveCount):
+    <text class="mt-10" id="is-readonly-ref-count">isReadonly(refCount): {{ isProxyRefCount }}</text>
+    <text class="mt-10" id="is-readonly-reactive-count">isReadonly(reactiveCount):
       {{ isProxyReactiveCount }}</text>
-    <text class="uni-common-mt" id="is-readonly-readonly-count">isReadonly(readonlyCount):
+    <text class="mt-10" id="is-readonly-readonly-count">isReadonly(readonlyCount):
       {{ isProxyReadonlyCount }}</text>
-    <text class="uni-common-mt" id="is-readonly-shallow-reactive-count">isReadonly(shallowReactiveCount):
+    <text class="mt-10" id="is-readonly-shallow-reactive-count">isReadonly(shallowReactiveCount):
       {{ isProxyShallowReactiveCount }}</text>
-    <text class="uni-common-mt" id="is-readonly-shallow-readonly-count">isReadonly(shallowReadonlyCount):
+    <text class="mt-10" id="is-readonly-shallow-readonly-count">isReadonly(shallowReadonlyCount):
       {{ isProxyShallowReadonlyCount }}</text>
   </view>
 </template>

pages/composition-api/reactivity/is-ref/is-ref.uvue → pages/reactivity/utilities/is-ref/is-ref.uvue

 <template>
   <view class="page">
     <text id="ref-count">ref count: {{ refCount }}</text>
-    <text class="uni-common-mt" id="is-ref-ref-count">isRef ref count: {{ isRefRefCount }}</text>
-    <text class="uni-common-mt" id="count">count: {{ count }}</text>
-    <text class="uni-common-mt" id="is-ref-count">isRef count: {{ isRefCount }}</text>
+    <text class="mt-10" id="is-ref-ref-count">isRef ref count: {{ isRefRefCount }}</text>
+    <text class="mt-10" id="count">count: {{ count }}</text>
+    <text class="mt-10" id="is-ref-count">isRef count: {{ isRefCount }}</text>
   </view>
 </template>
 

pages/composition-api/reactivity/to-ref/to-ref.uvue → pages/reactivity/utilities/to-ref/to-ref.uvue

 <template>
   <view class="page">
     <text id="count">count: {{ count }}</text>
-    <text class="uni-common-mt" id="is-ref-count">isRef count: {{ isRefCount }}</text>
-    <text class="uni-common-mt" id="ref-count">ref count: {{ refCount }}</text>
-    <text class="uni-common-mt" id="is-ref-ref-count">isRef ref count: {{ isRefRefCount }}</text>
+    <text class="mt-10" id="is-ref-count">isRef count: {{ isRefCount }}</text>
+    <text class="mt-10" id="ref-count">ref count: {{ refCount }}</text>
+    <text class="mt-10" id="is-ref-ref-count">isRef ref count: {{ isRefRefCount }}</text>
 
-    <text class="uni-common-mt" id="obj-num">obj.num: {{ obj.num }}</text>
-    <text class="uni-common-mt" id="to-ref-obj-num">toRef(obj, "num"): {{ objNum }}</text>
-    <text class="uni-common-mt" id="to-ref-fn-obj-num">toRef(() => obj.num): {{ readonlyObjNum }}</text>
-    <button class="uni-common-mt" id="increment-btn" @click="increment">increment obj.num</button>
+    <text class="mt-10" id="obj-num">obj.num: {{ obj.num }}</text>
+    <text class="mt-10" id="to-ref-obj-num">toRef(obj, "num"): {{ objNum }}</text>
+    <text class="mt-10" id="to-ref-fn-obj-num">toRef(() => obj.num): {{ readonlyObjNum }}</text>
+    <button class="mt-10" id="increment-btn" @click="increment">increment obj.num</button>
   </view>
 </template>
 

pages/composition-api/reactivity/to-refs/to-refs.uvue → pages/reactivity/utilities/to-refs/to-refs.uvue

 <template>
   <view class="page">
     <text id="state-num">state.num: {{ state['num'] }}</text>
-    <text class="uni-common-mt" id="state-str">state.str: {{ state['str'] }}</text>
-    <text class="uni-common-mt" id="state-as-refs-num">stateAsRefs.num:
+    <text class="mt-10" id="state-str">state.str: {{ state['str'] }}</text>
+    <text class="mt-10" id="state-as-refs-num">stateAsRefs.num:
       {{ (stateAsRefs['num'] as Ref<number>).value }}</text>
-    <text class="uni-common-mt" id="state-as-refs-str">stateAsRefs.str:
+    <text class="mt-10" id="state-as-refs-str">stateAsRefs.str:
       {{ (stateAsRefs['str'] as Ref<string>).value}}</text>
-    <button class="uni-common-mt" id="update-state-btn" @click="updateState">update state</button>
+    <button class="mt-10" id="update-state-btn" @click="updateState">update state</button>
   </view>
 </template>
 

pages/composition-api/reactivity/to-value/to-value.uvue → pages/reactivity/utilities/to-value/to-value.uvue

 <template>
   <view class="page">
     <text id="ref-count">ref count: {{ refCount }}</text>
-    <text class="uni-common-mt" id="is-ref-ref-count">isRef ref count: {{ isRefRefCount }}</text>
-    <text class="uni-common-mt" id="count">count: {{ count }}</text>
-    <text class="uni-common-mt" id="is-ref-count">isRef count: {{ isRefCount }}</text>
+    <text class="mt-10" id="is-ref-ref-count">isRef ref count: {{ isRefRefCount }}</text>
+    <text class="mt-10" id="count">count: {{ count }}</text>
+    <text class="mt-10" id="is-ref-count">isRef count: {{ isRefCount }}</text>
 
-    <text class="uni-common-mt" id="obj-num">obj.num: {{ obj.num }}</text>
-    <text class="uni-common-mt" id="to-value-obj-num">toValue(() => obj.num): {{ toValueObjNum }}</text>
-    <button class="uni-common-mt" id="increment-btn" @click="increment">increment obj.num</button>
+    <text class="mt-10" id="obj-num">obj.num: {{ obj.num }}</text>
+    <text class="mt-10" id="to-value-obj-num">toValue(() => obj.num): {{ toValueObjNum }}</text>
+    <button class="mt-10" id="increment-btn" @click="increment">increment obj.num</button>
   </view>
 </template>
 

pages/composition-api/reactivity/un-ref/un-ref.uvue → pages/reactivity/utilities/un-ref/un-ref.uvue

 <template>
   <view class="page">
     <text id="ref-count">ref count: {{ refCount }}</text>
-    <text class="uni-common-mt" id="ref-count-type">ref count type: {{ refCountType }}</text>
-    <text class="uni-common-mt" id="count">count: {{ count }}</text>
-    <text class="uni-common-mt" id="count-type">count type: {{ countType }}</text>
+    <text class="mt-10" id="ref-count-type">ref count type: {{ refCountType }}</text>
+    <text class="mt-10" id="count">count: {{ count }}</text>
+    <text class="mt-10" id="count-type">count type: {{ countType }}</text>
   </view>
 </template>