refactor(reactivity): computed

pages.json

@@ -468,9 +468,15 @@
       }
     },
     {
-      "path": "pages/reactivity/core/computed/computed",
+      "path": "pages/reactivity/core/computed/computed-options",
       "style": {
-        "navigationBarTitleText": "computed"
+        "navigationBarTitleText": "computed 选项式 API"
+      }
+    },
+    {
+      "path": "pages/reactivity/core/computed/computed-composition",
+      "style": {
+        "navigationBarTitleText": "computed 组合式 API"
       }
     },
     {

pages/index/index.uvue

@@ -26,15 +26,45 @@
                 <uni-collapse-item :title="page.name" class="menu">
                   <view
                     v-for="(child, index) in page.children"
-                    :key="child.url"
-                    class="page-item"
-                    :class="{ 'first-child': index == 0 }"
-                    @click="goDetailPage(`${menu.id}/${page.id}`, child)">
-                    <text
-                      :class="{ 'text-disabled': child.enable == false }"
-                      class="text"
-                      >{{ child.name }}</text
-                    >
+                    :key="`${child.id}-${index}`">
+                    <view
+                      v-if="child.url"
+                      class="page-item"
+                      :class="{ 'first-child': index == 0 }"
+                      @click="goDetailPage(`${menu.id}/${page.id}`, child)">
+                      <text
+                        :class="{ 'text-disabled': child.enable == false }"
+                        class="text"
+                        >{{ child.name }}</text
+                      >
+                    </view>
+                    <template v-else>
+                      <uni-collapse style="flex: 1">
+                        <uni-collapse-item :title="child.name" class="menu">
+                          <view
+                            v-for="(childChild, index) in child.children"
+                            :key="`${childChild.id}-${index}`">
+                            <view
+                              class="page-item"
+                              :class="{ 'first-child': index == 0 }"
+                              @click="
+                                goDetailPage(
+                                  `${menu.id}/${page.id}/${child.id}`,
+                                  childChild
+                                )
+                              ">
+                              <text
+                                :class="{
+                                  'text-disabled': childChild.enable == false,
+                                }"
+                                class="text"
+                                >{{ childChild.name }}</text
+                              >
+                            </view>
+                          </view>
+                        </uni-collapse-item>
+                      </uni-collapse>
+                    </template>
                   </view>
                 </uni-collapse-item>
               </uni-collapse>
@@ -434,7 +464,23 @@ export default {
                   id: 'ref',
                   name: 'ref',
                   url: 'ref/ref'
-                }
+                },
+                {
+                  id: 'computed',
+                  name: 'computed',
+                  children: [
+                    {
+                      id: 'computed-options',
+                      name: 'computed 选项式 API',
+                      url: 'computed-options'
+                    },
+                    {
+                      id: 'computed-composition',
+                      name: 'computed 组合式 API',
+                      url: 'computed-composition'
+                    },
+                  ]
+                },
               ]
             }
           ] as Page[]
@@ -635,6 +681,8 @@ export default {
         })
         return
       }
+console.log('parentUrl', parentUrl)
+console.log('page', page)
       uni.navigateTo({
         url: `/pages/${parentUrl}/${page.url}`
       })

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

+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>computed double count:</text>
+      <text id="double-count">{{ doubleCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.arr:</text>
+      <text id="obj-arr">{{ JSON.stringify(obj.arr) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>computed obj.arr.length:</text>
+      <text id="obj-arr-len">{{ objArrLen }}</text>
+    </view>
+    <button id="update-btn" @click="update">update</button>
+  </view>
+</template>
+
+<script setup lang="uts">
+const count = ref(0)
+
+const doubleCount = computed(() : number => {
+  return count.value * 2
+})
+
+type Obj = {
+  arr : number[]
+}
+
+const obj = reactive({
+  arr: [1, 2, 3]
+} as Obj)
+
+
+const objArrLen = computed<number>(() : number => {
+  return obj.arr.length
+})
+
+const update = () => {
+  count.value++
+  obj.arr.push(obj.arr.length + 1)
+}
+</script>

pages/reactivity/core/computed/computed-options.uvue

+<template>
+  <view class="page">
+    <view class="flex justify-between flex-row mb-10">
+      <text>count:</text>
+      <text id="count">{{ count }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>computed double count:</text>
+      <text id="double-count">{{ doubleCount }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>obj.arr:</text>
+      <text id="obj-arr">{{ JSON.stringify(obj.arr) }}</text>
+    </view>
+    <view class="flex justify-between flex-row mb-10">
+      <text>computed obj.arr.length:</text>
+      <text id="obj-arr-len">{{ objArrLen }}</text>
+    </view>
+    <button id="update-btn" @click="update">update</button>
+  </view>
+</template>
+
+<script lang="uts">
+type Obj = {
+  arr : number[]
+}
+
+export default {
+  data(){
+    return {
+      count: 0,
+      obj:{
+        arr: [1,2,3]
+      } as Obj
+    }
+  },
+  computed: {
+    doubleCount(): number {
+      return this.count * 2
+    },
+    objArrLen(): number {
+      return this.obj.arr.length
+    }
+  },
+  methods: {
+    update(){
+      this.count++
+      this.obj.arr.push(this.obj.arr.length + 1)
+    }
+  }
+}
+</script>

pages/reactivity/core/computed/computed.test.js

-const PAGE_PATH = '/pages/composition-api/reactivity/computed/computed'
+const OPTIONS_PAGE_PATH = '/pages/reactivity/core/computed/computed-options'
+const COMPOSITION_PAGE_PATH = '/pages/reactivity/core/computed/computed-composition'
 
 describe('computed', () => {
   let page = null
-  beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor('view')
-  })
-  it('basic', async () => {
+  
+  const test = async (page) => {
     const count = await page.$('#count')
-    expect(await count.text()).toBe('count: 0')
+    expect(await count.text()).toBe('0')
     const doubleCount = await page.$('#double-count')
-    expect(await doubleCount.text()).toBe('computed double count: 0')
+    expect(await doubleCount.text()).toBe('0')
 
     const objArr = await page.$('#obj-arr')
-    expect(await objArr.text()).toBe('obj.arr: [1,2,3]')
+    expect(await objArr.text()).toBe('[1,2,3]')
     const objArrLen = await page.$('#obj-arr-len')
-    expect(await objArrLen.text()).toBe('computed obj.arr.length: 3')
+    expect(await objArrLen.text()).toBe('3')
 
     const updateBtn = await page.$('#update-btn')
     await updateBtn.tap()
 
-    expect(await count.text()).toBe('count: 1')
-    expect(await doubleCount.text()).toBe('computed double count: 2')
-    expect(await objArr.text()).toBe('obj.arr: [1,2,3,4]')
-    expect(await objArrLen.text()).toBe('computed obj.arr.length: 4')
+    expect(await count.text()).toBe('1')
+    expect(await doubleCount.text()).toBe('2')
+    expect(await objArr.text()).toBe('[1,2,3,4]')
+    expect(await objArrLen.text()).toBe('4')
+  }
+  
+  it('computed options API', async () => {
+    page = await program.reLaunch(OPTIONS_PAGE_PATH)
+    await page.waitFor('view')
+    
+    await test(page)
+  })
+  
+  it('computed composition API', async () => {
+    page = await program.reLaunch(COMPOSITION_PAGE_PATH)
+    await page.waitFor('view')
+    
+    await test(page)
   })
-
 })
\ No newline at end of file

pages/reactivity/core/computed/computed.uvue

-<template>
-  <view class="page">
-    <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>
-
-<script setup>
-  const count = ref(0)
-
-  const doubleCount = computed(() : number => {
-    return count.value * 2
-  })
-
-  type Obj = {
-    arr : number[]
-  }
-
-  const obj = reactive({
-    arr: [1, 2, 3]
-  } as Obj)
-
-
-  const objArrLen = computed<number>(() : number => {
-    return obj.arr.length
-  })
-
-  const update = () => {
-    count.value++
-    obj.arr.push(obj.arr.length + 1)
-  }
-</script>
\ No newline at end of file