From 4d404eb0f88a944e5fae7639ea8017ad91a45e32 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Thu, 18 Jan 2024 20:25:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(composition=20api):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E5=8F=8A=E6=B5=8B=E8=AF=95=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=20=20web?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../basic/define-emits/array-literal.uvue     |   2 +-
 .../basic/define-emits/define-emits.test.js   |  69 ++-
 .../basic/define-emits/type-emits-1.uvue      |   2 +-
 .../basic/define-emits/type-emits-2.uvue      |   2 +-
 .../define-options/define-options.test.js     |  48 +-
 .../basic/define-options/define-options.uvue  |   2 +-
 .../basic/define-props/define-props.test.js   | 108 ++--
 .../basic/define-slots/define-slots.test.js   |  36 +-
 .../basic/use-attrs/use-attrs.test.js         |  29 +-
 .../reactivity/computed/computed.test.js      |  49 +-
 .../reactivity/computed/computed.uvue         |   2 +-
 .../reactivity/is-ref/is-ref.test.js          |  38 +-
 .../reactivity/ref/ref.test.js                |  43 +-
 pages/composition-api/reactivity/ref/ref.uvue |   2 +-
 .../shallow-reactive/shallow-reactive.test.js |  42 +-
 .../shallow-reactive/shallow-reactive.uvue    |   6 +-
 .../shallow-ref/shallow-ref.test.js           |  44 +-
 .../reactivity/shallow-ref/shallow-ref.uvue   |   4 +-
 .../reactivity/un-ref/un-ref.test.js          |  36 +-
 .../watch-effect/watch-effect.test.js         | 219 +++++---
 .../reactivity/watch-effect/watch-effect.uvue |   6 +-
 .../reactivity/watch/watch.test.js            | 266 ++++++----
 .../reactivity/watch/watch.uvue               |   6 +-
 pages/tab-bar/composition-api.uvue            | 474 +++++++++++-------
 24 files changed, 851 insertions(+), 684 deletions(-)

diff --git a/pages/composition-api/basic/define-emits/array-literal.uvue b/pages/composition-api/basic/define-emits/array-literal.uvue
index 9503747..357563a 100644
--- a/pages/composition-api/basic/define-emits/array-literal.uvue
+++ b/pages/composition-api/basic/define-emits/array-literal.uvue
@@ -1,7 +1,7 @@
 <template>
   <view>
     <text class="bold">array literal</text>
-    <button id="array-literal-emit-btn" class="uni-common-mt" @click="emitChange">emit change</button>
+    <button class="array-literal-emit-btn uni-common-mt" @click="emitChange">emit change</button>
   </view>
 </template>
 
diff --git a/pages/composition-api/basic/define-emits/define-emits.test.js b/pages/composition-api/basic/define-emits/define-emits.test.js
index 8499c35..e8883f1 100644
--- a/pages/composition-api/basic/define-emits/define-emits.test.js
+++ b/pages/composition-api/basic/define-emits/define-emits.test.js
@@ -1,40 +1,37 @@
 const PAGE_PATH = '/pages/composition-api/basic/define-emits/define-emits'
 
 describe('defineEmits', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const handleArrayLiteralChangeRes = await page.$('#handle-array-literal-change-res')
-      expect(await handleArrayLiteralChangeRes.text()).toBe('handle array literal comp change result: ')
-      
-      const arrayLiteralEmitBtn = await page.$('#array-literal-emit-btn')
-      await arrayLiteralEmitBtn.tap()
-      
-      expect(await handleArrayLiteralChangeRes.text()).toBe('handle array literal comp change result: options is 1')
-      
-      const handleTypeEmits1ChangeRes = await page.$('#handle-type-emits1-change-res')
-      expect(await handleTypeEmits1ChangeRes.text()).toBe('handle type emits comp change result: ')
-      
-      const typeEmits1EmitBtn = await page.$('#type-emits1-emit-btn')
-      await typeEmits1EmitBtn.tap()
-      
-      expect(await handleTypeEmits1ChangeRes.text()).toBe('handle type emits comp change result: options is 2')
-      
-      const handleTypeEmits2ChangeRes = await page.$('#handle-type-emits2-change-res')
-      expect(await handleTypeEmits2ChangeRes.text()).toBe('handle type emits named tuple syntax comp change result: ')
-      
-      const typeEmits2EmitBtn = await page.$('#type-emits2-emit-btn')
-      await typeEmits2EmitBtn.tap()
-      
-      expect(await handleTypeEmits2ChangeRes.text()).toBe('handle type emits named tuple syntax comp change result: options is 3')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const handleArrayLiteralChangeRes = await page.$('#handle-array-literal-change-res')
+    expect((await handleArrayLiteralChangeRes.text()).trim()).toBe('handle array literal comp change result:')
+
+    const arrayLiteralEmitBtn = await page.$('.array-literal-emit-btn')
+    await arrayLiteralEmitBtn.tap()
+
+    expect(await handleArrayLiteralChangeRes.text()).toBe(
+      'handle array literal comp change result: options is 1')
+
+    const handleTypeEmits1ChangeRes = await page.$('#handle-type-emits1-change-res')
+    expect((await handleTypeEmits1ChangeRes.text()).trim()).toBe('handle type emits comp change result:')
+
+    const typeEmits1EmitBtn = await page.$('.type-emits1-emit-btn')
+    await typeEmits1EmitBtn.tap()
+
+    expect(await handleTypeEmits1ChangeRes.text()).toBe('handle type emits comp change result: options is 2')
+
+    const handleTypeEmits2ChangeRes = await page.$('#handle-type-emits2-change-res')
+    expect((await handleTypeEmits2ChangeRes.text()).trim()).toBe(
+      'handle type emits named tuple syntax comp change result:')
+
+    const typeEmits2EmitBtn = await page.$('.type-emits2-emit-btn')
+    await typeEmits2EmitBtn.tap()
+
+    expect(await handleTypeEmits2ChangeRes.text()).toBe(
+      'handle type emits named tuple syntax comp change result: options is 3')
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/basic/define-emits/type-emits-1.uvue b/pages/composition-api/basic/define-emits/type-emits-1.uvue
index 651c604..ac937d8 100644
--- a/pages/composition-api/basic/define-emits/type-emits-1.uvue
+++ b/pages/composition-api/basic/define-emits/type-emits-1.uvue
@@ -1,7 +1,7 @@
 <template>
   <view>
     <text class="uni-common-mt bold">type emits</text>
-    <button id="type-emits1-emit-btn" class="uni-common-mt" @click="emitChange">emit change</button>
+    <button class="type-emits1-emit-btn uni-common-mt" @click="emitChange">emit change</button>
   </view>
 </template>
 
diff --git a/pages/composition-api/basic/define-emits/type-emits-2.uvue b/pages/composition-api/basic/define-emits/type-emits-2.uvue
index 4f3589f..3e05199 100644
--- a/pages/composition-api/basic/define-emits/type-emits-2.uvue
+++ b/pages/composition-api/basic/define-emits/type-emits-2.uvue
@@ -1,7 +1,7 @@
 <template>
   <view>
     <text class="uni-common-mt bold">type emits named tuple syntax</text>
-    <button id="type-emits2-emit-btn" class="uni-common-mt" @click="emitChange">emit change</button>
+    <button class="type-emits2-emit-btn uni-common-mt" @click="emitChange">emit change</button>
   </view>
 </template>
 
diff --git a/pages/composition-api/basic/define-options/define-options.test.js b/pages/composition-api/basic/define-options/define-options.test.js
index 794d1ec..05f0ebd 100644
--- a/pages/composition-api/basic/define-options/define-options.test.js
+++ b/pages/composition-api/basic/define-options/define-options.test.js
@@ -1,31 +1,25 @@
 const PAGE_PATH = '/pages/composition-api/basic/define-options/define-options'
 
 describe('defineOptions', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const count = await page.$('#count')
-      expect(await count.text()).toBe('count: 0')
-      const doubleCount = await page.$('#double-count')
-      expect(await doubleCount.text()).toBe('double count: 0')
-      const total = await page.$('#total')
-      expect(await total.text()).toBe('total: 0')
-      
-      const incrementBtn = await page.$('#increment-btn')
-      await incrementBtn.tap()
-      
-      expect(await count.text()).toBe('count: 1')
-      expect(await doubleCount.text()).toBe('double count: 2')
-      const price = await page.data('price')
-      expect(await total.text()).toBe(`total: ${1*price}`)
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const count = await page.$('#count')
+    expect(await count.text()).toBe('count: 0')
+    const doubleCount = await page.$('#double-count')
+    expect(await doubleCount.text()).toBe('double count: 0')
+    const total = await page.$('#total')
+    expect(await total.text()).toBe('total: 0')
+
+    const incrementBtn = await page.$('.increment-btn')
+    await incrementBtn.tap()
+
+    expect(await count.text()).toBe('count: 1')
+    expect(await doubleCount.text()).toBe('double count: 2')
+    const price = await page.data('price')
+    expect(await total.text()).toBe(`total: ${1*price}`)
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/basic/define-options/define-options.uvue b/pages/composition-api/basic/define-options/define-options.uvue
index 7baf8a2..ce14c36 100644
--- a/pages/composition-api/basic/define-options/define-options.uvue
+++ b/pages/composition-api/basic/define-options/define-options.uvue
@@ -3,7 +3,7 @@
     <text id="count" class='uni-common-mb'>count: {{ count }}</text>
     <text id='double-count' class='uni-common-mb'>double count: {{ doubleCount}}</text>
     <text id="total" class='uni-common-mb'>total: {{ total}}</text>
-    <button id="increment-btn" @click="increment">increment</button>
+    <button class="increment-btn" @click="increment">increment</button>
   </view>
 </template>
 
diff --git a/pages/composition-api/basic/define-props/define-props.test.js b/pages/composition-api/basic/define-props/define-props.test.js
index e375515..49abf5b 100644
--- a/pages/composition-api/basic/define-props/define-props.test.js
+++ b/pages/composition-api/basic/define-props/define-props.test.js
@@ -1,55 +1,71 @@
 const PAGE_PATH = '/pages/composition-api/basic/define-props/define-props'
 
 describe('defineProps', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const arrayLiteralStr = await page.$('#array-literal-str')
-      expect(await arrayLiteralStr.text()).toBe('str: default str')
-      const arrayLiteralNum = await page.$('#array-literal-num')
-      expect(await arrayLiteralNum.text()).toBe('num: 0')
-      const arrayLiteralBool = await page.$('#array-literal-bool')
-      expect(await arrayLiteralBool.text()).toBe('bool: false')
-      const arrayLiteralArr = await page.$('#array-literal-arr')
-      expect(await arrayLiteralArr.text()).toBe('arr: ["a","b","c"]')
-      const arrayLiteralObj = await page.$('#array-literal-obj')
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const arrayLiteralStr = await page.$('#array-literal-str')
+    expect(await arrayLiteralStr.text()).toBe('str: default str')
+    const arrayLiteralNum = await page.$('#array-literal-num')
+    expect(await arrayLiteralNum.text()).toBe('num: 0')
+    const arrayLiteralBool = await page.$('#array-literal-bool')
+    expect(await arrayLiteralBool.text()).toBe('bool: false')
+    const arrayLiteralArr = await page.$('#array-literal-arr')
+    expect((await arrayLiteralArr.text()).replaceAll('\n', '')).toBe('arr: ["a","b","c"]')
+    
+    const arrayLiteralObj = await page.$('#array-literal-obj')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await arrayLiteralObj.text()).toBe('obj: {"arr":[1,2,3],"num":0,"str":"obj str"}')
-      const arrayLiteralFn = await page.$('#array-literal-fn')
-      expect(await arrayLiteralFn.text()).toBe('fn: fn res')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect((await arrayLiteralObj.text()).replaceAll('\n', '')).toBe(
+        'obj: {"str": "obj str","num": 0,"arr": [1,2,3]}')
+    }
 
-      const objectLiteralStr = await page.$('#object-literal-str')
-      expect(await objectLiteralStr.text()).toBe('str: default str')
-      const objectLiteralNum = await page.$('#object-literal-num')
-      expect(await objectLiteralNum.text()).toBe('num: 0')
-      const objectLiteralBool = await page.$('#object-literal-bool')
-      expect(await objectLiteralBool.text()).toBe('bool: false')
-      const objectLiteralArr = await page.$('#object-literal-arr')
-      expect(await objectLiteralArr.text()).toBe('arr: ["a","b","c"]')
-      const objectLiteralObj = await page.$('#object-literal-obj')
+    const arrayLiteralFn = await page.$('#array-literal-fn')
+    expect(await arrayLiteralFn.text()).toBe('fn: fn res')
+
+    const objectLiteralStr = await page.$('#object-literal-str')
+    expect(await objectLiteralStr.text()).toBe('str: default str')
+    const objectLiteralNum = await page.$('#object-literal-num')
+    expect(await objectLiteralNum.text()).toBe('num: 0')
+    const objectLiteralBool = await page.$('#object-literal-bool')
+    expect(await objectLiteralBool.text()).toBe('bool: false')
+    const objectLiteralArr = await page.$('#object-literal-arr')
+    expect((await objectLiteralArr.text()).replaceAll('\n', '')).toBe('arr: ["a","b","c"]')
+    
+    const objectLiteralObj = await page.$('#object-literal-obj')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await objectLiteralObj.text()).toBe('obj: {"a":1}')
-      const objectLiteralFn = await page.$('#object-literal-fn')
-      expect(await objectLiteralFn.text()).toBe('fn: fn res')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect((await objectLiteralObj.text()).replaceAll('\n', '')).toBe('obj: {"a": 1}')
+    }
+    
+    const objectLiteralFn = await page.$('#object-literal-fn')
+    expect(await objectLiteralFn.text()).toBe('fn: fn res')
 
-      const typeStr = await page.$('#type-str')
-      expect(await typeStr.text()).toBe('str: default str')
-      const typeNum = await page.$('#type-num')
-      expect(await typeNum.text()).toBe('num: 0')
-      const typeBool = await page.$('#type-bool')
-      expect(await typeBool.text()).toBe('bool: false')
-      const typeArr = await page.$('#type-arr')
-      expect(await typeArr.text()).toBe('arr: ["a","b","c"]')
-      const typeObj = await page.$('#type-obj')
+    const typeStr = await page.$('#type-str')
+    expect(await typeStr.text()).toBe('str: default str')
+    const typeNum = await page.$('#type-num')
+    expect(await typeNum.text()).toBe('num: 0')
+    const typeBool = await page.$('#type-bool')
+    expect(await typeBool.text()).toBe('bool: false')
+    const typeArr = await page.$('#type-arr')
+    expect((await typeArr.text()).replaceAll('\n', '')).toBe('arr: ["a","b","c"]')
+    
+    const typeObj = await page.$('#type-obj')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await typeObj.text()).toBe('obj: {"arr":[1,2,3],"num":0,"str":"obj str"}')
-      const typeFn = await page.$('#type-fn')
-      expect(await typeFn.text()).toBe('fn: fn res')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect((await typeObj.text()).replaceAll('\n', '')).toBe('obj: {"str": "obj str","num": 0,"arr": [1,2,3]}')
+
+    }
+    const typeFn = await page.$('#type-fn')
+    expect(await typeFn.text()).toBe('fn: fn res')
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/basic/define-slots/define-slots.test.js b/pages/composition-api/basic/define-slots/define-slots.test.js
index 427deb3..e87c039 100644
--- a/pages/composition-api/basic/define-slots/define-slots.test.js
+++ b/pages/composition-api/basic/define-slots/define-slots.test.js
@@ -1,25 +1,19 @@
 const PAGE_PATH = '/pages/composition-api/basic/define-slots/define-slots'
 
 describe('defineSlots', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const slotHeader = await page.$('#slot-header')
-      expect(await slotHeader.text()).toBe('header slot msg: foo msg')
-      
-      const slotContent = await page.$('#slot-default')
-      expect(await slotContent.text()).toBe('default slot num: 0')
-      
-      const slotFooter = await page.$('#slot-footer')
-      expect(await slotFooter.text()).toBe('footer slot arr: ["a","b","c"]')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const slotHeader = await page.$('#slot-header')
+    expect(await slotHeader.text()).toBe('header slot msg: foo msg')
+
+    const slotContent = await page.$('#slot-default')
+    expect(await slotContent.text()).toBe('default slot num: 0')
+
+    const slotFooter = await page.$('#slot-footer')
+    expect((await slotFooter.text()).replaceAll('\n', '')).toBe('footer slot arr: ["a","b","c"]')
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/basic/use-attrs/use-attrs.test.js b/pages/composition-api/basic/use-attrs/use-attrs.test.js
index 4b2575e..6f0c853 100644
--- a/pages/composition-api/basic/use-attrs/use-attrs.test.js
+++ b/pages/composition-api/basic/use-attrs/use-attrs.test.js
@@ -1,22 +1,17 @@
 const PAGE_PATH = '/pages/composition-api/basic/use-attrs/use-attrs'
 
 describe('useAttrs', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const attrsClass = await page.$('#attrs-class')
-      expect(await attrsClass.text()).toBe('attrs.class: foo')
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const attrsClass = await page.$('#attrs-class')
+    expect(await attrsClass.text()).toBe('attrs.class: foo')
+
+    const attrsMsg = await page.$('#attrs-msg')
+    expect(await attrsMsg.text()).toBe('attrs.msg: msg')
+  })
 
-      const attrsMsg = await page.$('#attrs-msg')
-      expect(await attrsMsg.text()).toBe('attrs.msg: msg')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
 })
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/computed/computed.test.js b/pages/composition-api/reactivity/computed/computed.test.js
index 49873d5..90a7e4f 100644
--- a/pages/composition-api/reactivity/computed/computed.test.js
+++ b/pages/composition-api/reactivity/computed/computed.test.js
@@ -1,34 +1,29 @@
 const PAGE_PATH = '/pages/composition-api/reactivity/computed/computed'
 
 describe('computed', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const count = await page.$('#count')
-      expect(await count.text()).toBe('count: 0')
-      const doubleCount = await page.$('#double-count')
-      expect(await doubleCount.text()).toBe('computed double count: 0')
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const count = await page.$('#count')
+    expect(await count.text()).toBe('count: 0')
+    const doubleCount = await page.$('#double-count')
+    expect(await doubleCount.text()).toBe('computed double count: 0')
 
-      const objArr = await page.$('#obj-arr')
-      expect(await objArr.text()).toBe('obj.arr: [1,2,3]')
-      const objArrLen = await page.$('#obj-arr-len')
-      expect(await objArrLen.text()).toBe('computed obj.arr.length: 3')
+    const objArr = await page.$('#obj-arr')
+    expect((await objArr.text()).replaceAll('\n', '')).toBe('obj.arr: [1,2,3]')
+    const objArrLen = await page.$('#obj-arr-len')
+    expect(await objArrLen.text()).toBe('computed obj.arr.length: 3')
 
-      const updateBtn = await page.$('#update-btn')
-      await updateBtn.tap()
+    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()).replaceAll('\n', '')).toBe('obj.arr: [1,2,3,4]')
+    expect(await objArrLen.text()).toBe('computed obj.arr.length: 4')
+  })
 
-      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')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
 })
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/computed/computed.uvue b/pages/composition-api/reactivity/computed/computed.uvue
index 2ec5d0f..bf59641 100644
--- a/pages/composition-api/reactivity/computed/computed.uvue
+++ b/pages/composition-api/reactivity/computed/computed.uvue
@@ -4,7 +4,7 @@
     <text id="double-count" class="uni-common-mb">computed double count: {{ doubleCount }}</text>
     <text id="obj-arr" class="uni-common-mb">obj.arr: {{ obj.arr }}</text>
     <text id="obj-arr-len" class="uni-common-mb">computed obj.arr.length: {{ objArrLen }}</text>
-    <button id="update-btn" @click="update">update</button>
+    <button class="update-btn" @click="update">update</button>
   </view>
 </template>
 
diff --git a/pages/composition-api/reactivity/is-ref/is-ref.test.js b/pages/composition-api/reactivity/is-ref/is-ref.test.js
index a36b71f..adf6266 100644
--- a/pages/composition-api/reactivity/is-ref/is-ref.test.js
+++ b/pages/composition-api/reactivity/is-ref/is-ref.test.js
@@ -1,26 +1,20 @@
 const PAGE_PATH = '/pages/composition-api/reactivity/is-ref/is-ref'
 
 describe('isRef', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const refCount = await page.$('#ref-count')
-      expect(await refCount.text()).toBe('ref count: 0')
-      const isRefRefCount = await page.$('#is-ref-ref-count')
-      expect(await isRefRefCount.text()).toBe('isRef ref count: true')
-      
-      const count = await page.$('#count')
-      expect(await count.text()).toBe('count: 0')
-      const isRefCount = await page.$('#is-ref-count')
-      expect(await isRefCount.text()).toBe('isRef count: false')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const refCount = await page.$('#ref-count')
+    expect(await refCount.text()).toBe('ref count: 0')
+    const isRefRefCount = await page.$('#is-ref-ref-count')
+    expect(await isRefRefCount.text()).toBe('isRef ref count: true')
+
+    const count = await page.$('#count')
+    expect(await count.text()).toBe('count: 0')
+    const isRefCount = await page.$('#is-ref-count')
+    expect(await isRefCount.text()).toBe('isRef count: false')
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/ref/ref.test.js b/pages/composition-api/reactivity/ref/ref.test.js
index d21563a..7d5603f 100644
--- a/pages/composition-api/reactivity/ref/ref.test.js
+++ b/pages/composition-api/reactivity/ref/ref.test.js
@@ -1,30 +1,25 @@
 const PAGE_PATH = '/pages/composition-api/reactivity/ref/ref'
 
 describe('ref', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const count1 = await page.$('#count1')
-      expect(await count1.text()).toBe('count1: 0')
-      const count2 = await page.$('#count2')
-      expect(await count2.text()).toBe('count2: 0')
-      const counterCount = await page.$('#counter-count')
-      expect(await counterCount.text()).toBe('counter.count: 0')
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const count1 = await page.$('#count1')
+    expect(await count1.text()).toBe('count1: 0')
+    const count2 = await page.$('#count2')
+    expect(await count2.text()).toBe('count2: 0')
+    const counterCount = await page.$('#counter-count')
+    expect(await counterCount.text()).toBe('counter.count: 0')
 
-      const incrementBtn = await page.$('#increment-btn')
-      await incrementBtn.tap()
+    const incrementBtn = await page.$('.increment-btn')
+    await incrementBtn.tap()
+
+    expect(await count1.text()).toBe('count1: 2')
+    expect(await count2.text()).toBe('count2: 2')
+    expect(await counterCount.text()).toBe('counter.count: 1')
+  })
 
-      expect(await count1.text()).toBe('count1: 2')
-      expect(await count2.text()).toBe('count2: 2')
-      expect(await counterCount.text()).toBe('counter.count: 1')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
 })
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/ref/ref.uvue b/pages/composition-api/reactivity/ref/ref.uvue
index 25dc5ed..bc73789 100644
--- a/pages/composition-api/reactivity/ref/ref.uvue
+++ b/pages/composition-api/reactivity/ref/ref.uvue
@@ -3,7 +3,7 @@
     <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>
-    <button id="increment-btn" @click="increment">increment</button>
+    <button class="increment-btn" @click="increment">increment</button>
   </view>
 </template>
 
diff --git a/pages/composition-api/reactivity/shallow-reactive/shallow-reactive.test.js b/pages/composition-api/reactivity/shallow-reactive/shallow-reactive.test.js
index 8691dcb..a5385c3 100644
--- a/pages/composition-api/reactivity/shallow-reactive/shallow-reactive.test.js
+++ b/pages/composition-api/reactivity/shallow-reactive/shallow-reactive.test.js
@@ -1,33 +1,27 @@
 const PAGE_PATH = '/pages/composition-api/reactivity/shallow-reactive/shallow-reactive'
 
 describe('shallowReactive', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const stateCount = await page.$('#state-count')
-      expect(await stateCount.text()).toBe('state.count: 0')
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const stateCount = await page.$('#state-count')
+    expect(await stateCount.text()).toBe('state.count: 0')
 
-      const stateNestedCount = await page.$('#state-nested-count')
-      expect(await stateNestedCount.text()).toBe('state.nested.count: 0')
+    const stateNestedCount = await page.$('#state-nested-count')
+    expect(await stateNestedCount.text()).toBe('state.nested.count: 0')
 
-      const incrementStateNestedCountBtn = await page.$('#increment-state-nested-count-btn')
-      await incrementStateNestedCountBtn.tap()
+    const incrementStateNestedCountBtn = await page.$('.increment-state-nested-count-btn')
+    await incrementStateNestedCountBtn.tap()
 
-      expect(await stateNestedCount.text()).toBe('state.nested.count: 0')
+    expect(await stateNestedCount.text()).toBe('state.nested.count: 0')
 
-      const incrementStateCountBtn = await page.$('#increment-state-count-btn')
-      await incrementStateCountBtn.tap()
+    const incrementStateCountBtn = await page.$('.increment-state-count-btn')
+    await incrementStateCountBtn.tap()
 
-      expect(await stateCount.text()).toBe('state.count: 1')
-      expect(await stateNestedCount.text()).toBe('state.nested.count: 1')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+    expect(await stateCount.text()).toBe('state.count: 1')
+    expect(await stateNestedCount.text()).toBe('state.nested.count: 1')
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/shallow-reactive/shallow-reactive.uvue b/pages/composition-api/reactivity/shallow-reactive/shallow-reactive.uvue
index 578c922..3c983c9 100644
--- a/pages/composition-api/reactivity/shallow-reactive/shallow-reactive.uvue
+++ b/pages/composition-api/reactivity/shallow-reactive/shallow-reactive.uvue
@@ -1,11 +1,11 @@
 <template>
   <view class="page">
-    <text id="state-count" class="uni-common-mb">state.count: {{ state.count }}</text>
+    <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 id="increment-state-count-btn" class="uni-common-mb" @click="incrementStateCount">
+    <button class="increment-state-count-btn uni-common-mb" @click="incrementStateCount">
       increment state.count
     </button>
-    <button id="increment-state-nested-count-btn" @click="incrementStateNestedCount">
+    <button class="increment-state-nested-count-btn" @click="incrementStateNestedCount">
       increment state.nested.count
     </button>
   </view>
diff --git a/pages/composition-api/reactivity/shallow-ref/shallow-ref.test.js b/pages/composition-api/reactivity/shallow-ref/shallow-ref.test.js
index 2570496..ed41580 100644
--- a/pages/composition-api/reactivity/shallow-ref/shallow-ref.test.js
+++ b/pages/composition-api/reactivity/shallow-ref/shallow-ref.test.js
@@ -1,29 +1,23 @@
 const PAGE_PATH = '/pages/composition-api/reactivity/shallow-ref/shallow-ref'
 
 describe('shallowRef', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const stateCount = await page.$('#state-count')
-      expect(await stateCount.text()).toBe('state.count: 0')
-
-      const incrementStateCountBtn = await page.$('#increment-state-count-btn')
-      await incrementStateCountBtn.tap()
-      
-      expect(await stateCount.text()).toBe('state.count: 0')
-      
-      const updateStateBtn = await page.$('#update-state-btn')
-      await updateStateBtn.tap()
-      
-      expect(await stateCount.text()).toBe('state.count: 1')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const stateCount = await page.$('#state-count')
+    expect(await stateCount.text()).toBe('state.count: 0')
+
+    const incrementStateCountBtn = await page.$('.increment-state-count-btn')
+    await incrementStateCountBtn.tap()
+
+    expect(await stateCount.text()).toBe('state.count: 0')
+
+    const updateStateBtn = await page.$('.update-state-btn')
+    await updateStateBtn.tap()
+
+    expect(await stateCount.text()).toBe('state.count: 1')
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/shallow-ref/shallow-ref.uvue b/pages/composition-api/reactivity/shallow-ref/shallow-ref.uvue
index 1cc32af..13931e2 100644
--- a/pages/composition-api/reactivity/shallow-ref/shallow-ref.uvue
+++ b/pages/composition-api/reactivity/shallow-ref/shallow-ref.uvue
@@ -1,9 +1,9 @@
 <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
+    <button class="increment-state-count-btn uni-common-mb" @click="incrementStateCount">increment
       state.count</button>
-    <button id="update-state-btn" @click="updateState">update state</button>
+    <button class="update-state-btn" @click="updateState">update state</button>
   </view>
 </template>
 
diff --git a/pages/composition-api/reactivity/un-ref/un-ref.test.js b/pages/composition-api/reactivity/un-ref/un-ref.test.js
index 6d7fb4d..d01813c 100644
--- a/pages/composition-api/reactivity/un-ref/un-ref.test.js
+++ b/pages/composition-api/reactivity/un-ref/un-ref.test.js
@@ -1,26 +1,20 @@
 const PAGE_PATH = '/pages/composition-api/reactivity/un-ref/un-ref'
 
 describe('unref', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('basic', async () => {
-      const refCount = await page.$('#ref-count')
-      expect(await refCount.text()).toBe('ref count: 0')
-      const refCountType = await page.$('#ref-count-type')
-      expect(await refCountType.text()).toBe('ref count type: object')
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('basic', async () => {
+    const refCount = await page.$('#ref-count')
+    expect(await refCount.text()).toBe('ref count: 0')
+    const refCountType = await page.$('#ref-count-type')
+    expect(await refCountType.text()).toBe('ref count type: object')
 
-      const count = await page.$('#count')
-      expect(await count.text()).toBe('count: 0')
-      const isRefCount = await page.$('#count-type')
-      expect(await isRefCount.text()).toBe('count type: number')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+    const count = await page.$('#count')
+    expect(await count.text()).toBe('count: 0')
+    const isRefCount = await page.$('#count-type')
+    expect(await isRefCount.text()).toBe('count type: number')
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/watch-effect/watch-effect.test.js b/pages/composition-api/reactivity/watch-effect/watch-effect.test.js
index b84f743..c323d3f 100644
--- a/pages/composition-api/reactivity/watch-effect/watch-effect.test.js
+++ b/pages/composition-api/reactivity/watch-effect/watch-effect.test.js
@@ -1,117 +1,170 @@
 const PAGE_PATH = '/pages/composition-api/reactivity/watch-effect/watch-effect'
 
 describe('watchEffect', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('count', async () => {
-      const count = await page.$('#count')
-      expect(await count.text()).toBe('count: 0')
-
-      // watch
-      const watchCountRes = await page.$('#watch-count-res')
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('count', async () => {
+    const count = await page.$('#count')
+    expect(await count.text()).toBe('count: 0')
+
+    // watch
+    const watchCountRes = await page.$('#watch-count-res')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchCountRes.text()).toBe(
         'watch count result: count: 0, count ref text (flush sync): count: 0')
-
-      // track
-      const watchCountTrackNum = await page.$('#watch-count-track-num')
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-
-      // trigger
-      const watchCountTriggerNum = await page.$('#watch-count-trigger-num')
-      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 1')
-      const watchCountCleanupRes = await page.$('#watch-count-cleanup-res')
-      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 0')
-
-      // watch count and obj.num
-      const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 0, obj.num: 0')
-
-      const incrementBtn = await page.$('#increment-btn')
-      await incrementBtn.tap()
-
-      expect(await count.text()).toBe('count: 1')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 0, count ref text (flush sync): null')
+    }
+    // track
+    const watchCountTrackNum = await page.$('#watch-count-track-num')
+    expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
+
+    // trigger
+    const watchCountTriggerNum = await page.$('#watch-count-trigger-num')
+    expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 1')
+    const watchCountCleanupRes = await page.$('#watch-count-cleanup-res')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 0')
+
+    // watch count and obj.num
+    const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
+    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 0, obj.num: 0')
+
+    const incrementBtn = await page.$('.increment-btn')
+    await incrementBtn.tap()
+
+    expect(await count.text()).toBe('count: 1')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchCountRes.text()).toBe(
         'watch count result: count: 1, count ref text (flush sync): count: 0')
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
-      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 1, count ref text (flush sync): null')
+    }
+    expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
+    expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
 
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 1, obj.num: 0')
+    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 1, obj.num: 0')
 
-      await incrementBtn.tap()
+    await incrementBtn.tap()
 
-      expect(await count.text()).toBe('count: 2')
+    expect(await count.text()).toBe('count: 2')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchCountRes.text()).toBe(
         'watch count result: count: 2, count ref text (flush sync): count: 1')
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 3')
-      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 2, count ref text (flush sync): null')
+    }
+    expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
+    expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 3')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
 
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 2, obj.num: 0')
+    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 2, obj.num: 0')
 
-      // stop watch
-      const stopWatchCountBtn = await page.$('#stop-watch-count-btn')
-      await stopWatchCountBtn.tap()
+    // stop watch
+    const stopWatchCountBtn = await page.$('.stop-watch-count-btn')
+    await stopWatchCountBtn.tap()
 
-      await incrementBtn.tap()
+    await incrementBtn.tap()
 
-      expect(await count.text()).toBe('count: 3')
+    expect(await count.text()).toBe('count: 3')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchCountRes.text()).toBe(
         'watch count result: count: 2, count ref text (flush sync): count: 1')
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 3')
-      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
-
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 3, obj.num: 0')
-    })
-    it('obj', async () => {
-      const objStr = await page.$('#obj-str')
-      expect(await objStr.text()).toBe('obj.str: num: 0')
-      const objNum = await page.$('#obj-num')
-      expect(await objNum.text()).toBe('obj.num: 0')
-      const objBool = await page.$('#obj-bool')
-      expect(await objBool.text()).toBe('obj.bool: false')
-      const objArr = await page.$('#obj-arr')
-      expect(await objArr.text()).toBe('obj.arr: [0]')
-
-      const watchObjRes = await page.$('#watch-obj-res')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 2, count ref text (flush sync): null')
+    }
+    expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
+    expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 3')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+
+    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 3, obj.num: 0')
+  })
+  it('obj', async () => {
+    const objStr = await page.$('#obj-str')
+    expect(await objStr.text()).toBe('obj.str: num: 0')
+    const objNum = await page.$('#obj-num')
+    expect(await objNum.text()).toBe('obj.num: 0')
+    const objBool = await page.$('#obj-bool')
+    expect(await objBool.text()).toBe('obj.bool: false')
+    const objArr = await page.$('#obj-arr')
+    expect((await objArr.text()).replaceAll('\n', '')).toBe('obj.arr: [0]')
+
+    const watchObjRes = await page.$('#watch-obj-res')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchObjRes.text()).toBe(
         'watch obj result: obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}')
-      const watchObjStrRes = await page.$('#watch-obj-str-res')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjRes.text()).toBe(
+        'watch obj result: obj: {"num":0,"str":"num: 0","bool":false,"arr":[0]}')
+    }
+    const watchObjStrRes = await page.$('#watch-obj-str-res')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchObjStrRes.text()).toBe(
         'watch obj.str result: str: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
-      const watchObjBoolRes = await page.$('#watch-obj-bool-res')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjStrRes.text()).toBe(
+        'watch obj.str result: str: num: 0, obj.str ref text (flush pre): null')
+    }
+    const watchObjBoolRes = await page.$('#watch-obj-bool-res')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchObjBoolRes.text()).toBe(
         'watch obj.bool result: bool: false, obj.bool ref text (flush post): obj.bool: false')
-      const watchObjArrRes = await page.$('#watch-obj-arr-res')
-      expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0]')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjBoolRes.text()).toBe(
+        'watch obj.bool result: bool: false, obj.bool ref text (flush post): null')
+    }
+    const watchObjArrRes = await page.$('#watch-obj-arr-res')
+    expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0]')
 
-      const updateObjBtn = await page.$('#update-obj-btn')
-      await updateObjBtn.tap()
+    const updateObjBtn = await page.$('.update-obj-btn')
+    await updateObjBtn.tap()
 
-      expect(await objStr.text()).toBe('obj.str: num: 1')
-      expect(await objNum.text()).toBe('obj.num: 1')
-      expect(await objBool.text()).toBe('obj.bool: true')
-      expect(await objArr.text()).toBe('obj.arr: [0,1]')
+    expect(await objStr.text()).toBe('obj.str: num: 1')
+    expect(await objNum.text()).toBe('obj.num: 1')
+    expect(await objBool.text()).toBe('obj.bool: true')
+    expect((await objArr.text()).replaceAll('\n', '')).toBe('obj.arr: [0,1]')
 
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchObjRes.text()).toBe(
         'watch obj result: obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjRes.text()).toBe(
+        'watch obj result: obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchObjStrRes.text()).toBe(
         'watch obj.str result: str: num: 1, obj.str ref text (flush pre): obj.str: num: 0')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjStrRes.text()).toBe(
+        'watch obj.str result: str: num: 1, obj.str ref text (flush pre): null')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
       expect(await watchObjBoolRes.text()).toBe(
         'watch obj.bool result: bool: true, obj.bool ref text (flush post): obj.bool: true')
-      expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1]')
-
-      const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 3, obj.num: 1')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjBoolRes.text()).toBe(
+        'watch obj.bool result: bool: true, obj.bool ref text (flush post): null')
+    }
+    expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1]')
+
+    const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
+    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 3, obj.num: 1')
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/watch-effect/watch-effect.uvue b/pages/composition-api/reactivity/watch-effect/watch-effect.uvue
index 5e666bf..fcea6c1 100644
--- a/pages/composition-api/reactivity/watch-effect/watch-effect.uvue
+++ b/pages/composition-api/reactivity/watch-effect/watch-effect.uvue
@@ -10,10 +10,10 @@
         {{ watchCountTriggerNum }}</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">
+      <button class="increment-btn uni-common-mb" @click="increment">
         increment
       </button>
-      <button id="stop-watch-count-btn" class="uni-common-mb" @click="triggerStopWatchCount">
+      <button class="stop-watch-count-btn uni-common-mb" @click="triggerStopWatchCount">
         stop watch count
       </button>
       <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
@@ -24,7 +24,7 @@
       <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 id="update-obj-btn" class="uni-common-mb" @click="updateObj">
+      <button class="update-obj-btn uni-common-mb" @click="updateObj">
         update obj
       </button>
       <text id="watch-count-obj-num-res" class="uni-common-mb">watch count and obj.num result:
diff --git a/pages/composition-api/reactivity/watch/watch.test.js b/pages/composition-api/reactivity/watch/watch.test.js
index 117c7c1..0017f5e 100644
--- a/pages/composition-api/reactivity/watch/watch.test.js
+++ b/pages/composition-api/reactivity/watch/watch.test.js
@@ -1,109 +1,165 @@
 const PAGE_PATH = '/pages/composition-api/reactivity/watch/watch'
 
 describe('watch', () => {
-  if (process.env.uniTestPlatformInfo.startsWith('android')) {
-    let page = null
-    beforeAll(async () => {
-      page = await program.reLaunch(PAGE_PATH)
-      await page.waitFor('view')
-    })
-    it('count', async () => {
-      const count = await page.$('#count')
-      expect(await count.text()).toBe('count: 0')
-      
-      // watch
-      const watchCountRes = await page.$('#watch-count-res')
-      expect(await watchCountRes.text()).toBe('watch count result: ')
-      
-      // track
-      const watchCountTrackNum = await page.$('#watch-count-track-num')
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
-      
-      // trigger
-      const watchCountTriggerNum = await page.$('#watch-count-trigger-num')
-      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 0')
-      const watchCountCleanupRes = await page.$('#watch-count-cleanup-res')
-      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: ')
-      
-      // watch count and obj.num
-      const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: ')
-
-      const incrementBtn = await page.$('#increment-btn')
-      await incrementBtn.tap()
-
-      expect(await count.text()).toBe('count: 1')
-      expect(await watchCountRes.text()).toBe('watch count result: count: 1, prevCount: 0, count ref text (flush sync): count: 0')
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
-      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 1')
-      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: ')
-      
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: state: [1,0], preState: [0,0]')
-      
-      await incrementBtn.tap()
-      
-      expect(await count.text()).toBe('count: 2')
-      expect(await watchCountRes.text()).toBe('watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
-      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
-      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
-      
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: state: [2,0], preState: [1,0]')
-      
-      // stop watch
-      const stopWatchCountBtn = await page.$('#stop-watch-count-btn')
-      await stopWatchCountBtn.tap()
-      
-      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
-      
-      await incrementBtn.tap()
-      
-      expect(await count.text()).toBe('count: 3')
-      expect(await watchCountRes.text()).toBe('watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
-      expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
-      expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
-      
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: state: [3,0], preState: [2,0]')
-    })
-    it('obj', async () => {
-      const objStr = await page.$('#obj-str')
-      expect(await objStr.text()).toBe('obj.str: num: 0')
-      const objNum = await page.$('#obj-num')
-      expect(await objNum.text()).toBe('obj.num: 0')
-      const objBool = await page.$('#obj-bool')
-      expect(await objBool.text()).toBe('obj.bool: false')
-      const objArr = await page.$('#obj-arr')
-      expect(await objArr.text()).toBe('obj.arr: [0]')
-      
-      const watchObjRes = await page.$('#watch-obj-res')
-      expect(await watchObjRes.text()).toBe('watch obj result: obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}, prevObj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}')
-      const watchObjStrRes = await page.$('#watch-obj-str-res')
-      expect(await watchObjStrRes.text()).toBe('watch obj.str result: ')
-      const watchObjBoolRes = await page.$('#watch-obj-bool-res')
-      expect(await watchObjBoolRes.text()).toBe('watch obj.bool result: ')
-      const watchObjArrRes = await page.$('#watch-obj-arr-res')
-      expect(await watchObjArrRes.text()).toBe('watch obj.arr result: ')
-      
-      const updateObjBtn = await page.$('#update-obj-btn')
-      await updateObjBtn.tap()
-      
-      expect(await objStr.text()).toBe('obj.str: num: 1')
-      expect(await objNum.text()).toBe('obj.num: 1')
-      expect(await objBool.text()).toBe('obj.bool: true')
-      expect(await objArr.text()).toBe('obj.arr: [0,1]')
-      
-      expect(await watchObjRes.text()).toBe('watch obj result: obj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}, prevObj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}')
-      expect(await watchObjStrRes.text()).toBe('watch obj.str result: str: num: 1, prevStr: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
-      expect(await watchObjBoolRes.text()).toBe('watch obj.bool result: bool: true, prevBool: false, obj.bool ref text (flush post): obj.bool: true')
-      expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1], prevArr: [0,1]')
-      
-      const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
-      expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: state: [3,1], preState: [3,0]')
-    })
-  } else {
-    it('other platform', () => {
-      expect(1).toBe(1)
-    })
-  }
+  let page = null
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  it('count', async () => {
+    const count = await page.$('#count')
+    expect(await count.text()).toBe('count: 0')
+
+    // watch
+    const watchCountRes = await page.$('#watch-count-res')
+    expect((await watchCountRes.text()).trim()).toBe('watch count result:')
+
+    // track
+    const watchCountTrackNum = await page.$('#watch-count-track-num')
+    expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
+
+    // trigger
+    const watchCountTriggerNum = await page.$('#watch-count-trigger-num')
+    expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 0')
+    const watchCountCleanupRes = await page.$('#watch-count-cleanup-res')
+    expect((await watchCountCleanupRes.text()).trim()).toBe('watch count cleanup result:')
+
+    // watch count and obj.num
+    const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
+    expect((await watchCountAndObjNumRes.text()).trim()).toBe('watch count and obj.num result:')
+
+    const incrementBtn = await page.$('.increment-btn')
+    await incrementBtn.tap()
+
+    expect(await count.text()).toBe('count: 1')
+
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 1, prevCount: 0, count ref text (flush sync): count: 0')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 1, prevCount: 0, count ref text (flush sync): null')
+    }
+
+    expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
+    expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 1')
+    expect((await watchCountCleanupRes.text()).trim()).toBe('watch count cleanup result:')
+
+    expect(await watchCountAndObjNumRes.text()).toBe(
+      'watch count and obj.num result: state: [1,0], preState: [0,0]')
+
+    await incrementBtn.tap()
+
+    expect(await count.text()).toBe('count: 2')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 2, prevCount: 1, count ref text (flush sync): null')
+
+    }
+    expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
+    expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
+
+    expect(await watchCountAndObjNumRes.text()).toBe(
+      'watch count and obj.num result: state: [2,0], preState: [1,0]')
+
+    // stop watch
+    const stopWatchCountBtn = await page.$('.stop-watch-count-btn')
+    await stopWatchCountBtn.tap()
+
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+
+    await incrementBtn.tap()
+
+    expect(await count.text()).toBe('count: 3')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 2, prevCount: 1, count ref text (flush sync): count: 1')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchCountRes.text()).toBe(
+        'watch count result: count: 2, prevCount: 1, count ref text (flush sync): null')
+    }
+    expect(await watchCountTrackNum.text()).toBe('watch count track number: 2')
+    expect(await watchCountTriggerNum.text()).toBe('watch count trigger number: 2')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+
+    expect(await watchCountAndObjNumRes.text()).toBe(
+      'watch count and obj.num result: state: [3,0], preState: [2,0]')
+  })
+  it('obj', async () => {
+    const objStr = await page.$('#obj-str')
+    expect(await objStr.text()).toBe('obj.str: num: 0')
+    const objNum = await page.$('#obj-num')
+    expect(await objNum.text()).toBe('obj.num: 0')
+    const objBool = await page.$('#obj-bool')
+    expect(await objBool.text()).toBe('obj.bool: false')
+    const objArr = await page.$('#obj-arr')
+    expect((await objArr.text()).replaceAll('\n', '')).toBe('obj.arr: [0]')
+
+    const watchObjRes = await page.$('#watch-obj-res')
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
+      expect(await watchObjRes.text()).toBe(
+        'watch obj result: obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}, prevObj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}'
+      )
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjRes.text()).toBe(
+        'watch obj result: obj: {"num":0,"str":"num: 0","bool":false,"arr":[0]}, prevObj: null'
+      )
+    }
+    const watchObjStrRes = await page.$('#watch-obj-str-res')
+    expect((await watchObjStrRes.text()).trim()).toBe('watch obj.str result:')
+    const watchObjBoolRes = await page.$('#watch-obj-bool-res')
+    expect((await watchObjBoolRes.text()).trim()).toBe('watch obj.bool result:')
+    const watchObjArrRes = await page.$('#watch-obj-arr-res')
+    expect((await watchObjArrRes.text()).trim()).toBe('watch obj.arr result:')
+
+    const updateObjBtn = await page.$('.update-obj-btn')
+    await updateObjBtn.tap()
+
+    expect(await objStr.text()).toBe('obj.str: num: 1')
+    expect(await objNum.text()).toBe('obj.num: 1')
+    expect(await objBool.text()).toBe('obj.bool: true')
+    expect((await objArr.text()).replaceAll('\n', '')).toBe('obj.arr: [0,1]')
+
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
+      expect(await watchObjRes.text()).toBe(
+        'watch obj result: obj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}, prevObj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}'
+      )
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjRes.text()).toBe(
+        'watch obj result: obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}, prevObj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}'
+      )
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
+      expect(await watchObjStrRes.text()).toBe(
+        'watch obj.str result: str: num: 1, prevStr: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjStrRes.text()).toBe(
+        'watch obj.str result: str: num: 1, prevStr: num: 0, obj.str ref text (flush pre): null')
+    }
+
+    if (process.env.uniTestPlatformInfo.startsWith('android')) {
+      expect(await watchObjBoolRes.text()).toBe(
+        'watch obj.bool result: bool: true, prevBool: false, obj.bool ref text (flush post): obj.bool: true'
+        )
+    }
+    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+      expect(await watchObjBoolRes.text()).toBe(
+        'watch obj.bool result: bool: true, prevBool: false, obj.bool ref text (flush post): null')
+    }
+    expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1], prevArr: [0,1]')
+
+    const watchCountAndObjNumRes = await page.$('#watch-count-obj-num-res')
+    expect(await watchCountAndObjNumRes.text()).toBe(
+      'watch count and obj.num result: state: [3,1], preState: [3,0]')
+  })
 })
\ No newline at end of file
diff --git a/pages/composition-api/reactivity/watch/watch.uvue b/pages/composition-api/reactivity/watch/watch.uvue
index 39a15b3..f806ddc 100644
--- a/pages/composition-api/reactivity/watch/watch.uvue
+++ b/pages/composition-api/reactivity/watch/watch.uvue
@@ -10,10 +10,10 @@
         {{ watchCountTriggerNum }}</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">
+      <button class="increment-btn uni-common-mb" @click="increment">
         increment
       </button>
-      <button id="stop-watch-count-btn" class="uni-common-mb" @click="triggerStopWatchCount">
+      <button class="stop-watch-count-btn uni-common-mb" @click="triggerStopWatchCount">
         stop watch count
       </button>
       <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
@@ -24,7 +24,7 @@
       <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 id="update-obj-btn" class="uni-common-mb" @click="updateObj">
+      <button class="update-obj-btn uni-common-mb" @click="updateObj">
         update obj
       </button>
       <text id="watch-count-obj-num-res" class="uni-common-mb">watch count and obj.num result:
diff --git a/pages/tab-bar/composition-api.uvue b/pages/tab-bar/composition-api.uvue
index 26ef502..84ca00a 100644
--- a/pages/tab-bar/composition-api.uvue
+++ b/pages/tab-bar/composition-api.uvue
@@ -35,196 +35,292 @@
     url ?: string
     enable ?: boolean
   }
-  
+
   const list = [
-      {
-        id: 'basic',
-        name: '基本使用',
-        open: false,
-        pages: [
-          {
-            name: 'defineProps',
-            url: 'define-props',
-            enable: false,
-          },
-          {
-            name: 'defineEmits',
-            url: 'define-emits',
-            enable: true,
-          },
-          {
-            name: 'defineExpose',
-            url: 'define-expose',
-            enable: true,
-          },
-          {
-            name: 'defineOptions',
-            url: 'define-options',
-            enable: true,
-          },
-          {
-            name: 'defineSlots',
-            url: 'define-slots',
-            enable: true,
-          },
-{
-            name: 'defineModel',
-            url: 'define-model',
-            enable: true,
-          },
-          {
-            name: 'useSlots',
-            url: 'use-slots',
-            enable: true,
-          },
-          {
-            name: 'useAttrs',
-            url: 'use-attrs',
-            enable: true,
-          },
-        ] as PageItem[],
-      }, {
-        id: 'reactivity',
-        name: '响应式',
-        open: false,
-        pages: [
-          {
-            name: 'ref',
-            url: 'ref',
-            enable: true,
-          },
-          {
-            name: 'computed',
-            url: 'computed',
-            enable: true,
-          },
-          {
-            name: 'reactive',
-            url: 'reactive',
-            enable: true,
-          },
-          {
-            name: 'readonly',
-            url: 'readonly',
-            enable: true,
-          },
-          {
-            name: 'watch',
-            url: 'watch',
-            enable: true,
-          },
-          {
-            name: 'watchEffect',
-            url: 'watch-effect',
-            enable: true,
-          },
-          {
-            name: 'watchPostEffect',
-            url: 'watch-post-effect',
-            enable: true,
-          },
-          {
-            name: 'watchSyncEffect',
-            url: 'watch-sync-effect',
-            enable: true,
-          },
-          {
-            name: 'isRef',
-            url: 'is-ref',
-            enable: true,
-          },
-          {
-            name: 'unRef',
-            url: 'un-ref',
-            enable: true,
-          },
-          {
-            name: 'toRef',
-            url: 'to-ref',
-            enable: true,
-          },
-          {
-            name: 'toValue',
-            url: 'to-value',
-            // #ifdef APP
-            enable: true,
-            // #else
-            enable: false,
-            // #endif
-          },
-          {
-            name: 'toRefs',
-            url: 'to-refs',
-            enable: true,
-          },
-          {
-            name: 'isProxy',
-            url: 'is-proxy',
-            enable: true,
-          },
-          {
-            name: 'isReactive',
-            url: 'is-reactive',
-            enable: true,
-          },
-          {
-            name: 'isReadonly',
-            url: 'is-readonly',
-            enable: true,
-          },
-          {
-            name: 'shallowRef',
-            url: 'shallow-ref',
-            enable: true,
-          },
-          {
-            name: 'triggerRef',
-            url: 'trigger-ref',
-            enable: true,
-          },
-          {
-            name: 'customRef',
-            url: 'custom-ref',
-            enable: true,
-          },
-          {
-            name: 'shallowReactive',
-            url: 'shallow-reactive',
-            enable: true,
-          },
-          {
-            name: 'shallowReadonly',
-            url: 'shallow-readonly',
-            enable: true,
-          },
-          {
-            name: 'toRaw',
-            url: 'to-raw',
-            enable: true,
-          },
-          {
-            name: 'markRaw',
-            url: 'mark-raw',
-            enable: false, // 暂不支持
-          },
-          {
-            name: 'effectScope',
-            url: 'effect-scope',
-            enable: true,
-          },
-          {
-            name: 'getCurrentScope',
-            url: 'get-current-scope',
-            enable: true,
-          },
-          {
-            name: 'onScopeDispose',
-            url: 'on-scope-dispose',
-            enable: true,
-          },
-        ] as PageItem[],
-      }
-    ] as PageList[]
+    {
+      id: 'basic',
+      name: '基本使用',
+      open: false,
+      pages: [
+        {
+          name: 'defineProps',
+          url: 'define-props',
+          enable: true,
+        },
+        {
+          name: 'defineEmits',
+          url: 'define-emits',
+          enable: true,
+        },
+        {
+          name: 'defineExpose',
+          url: 'define-expose',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'defineOptions',
+          url: 'define-options',
+          enable: true,
+        },
+        {
+          name: 'defineSlots',
+          url: 'define-slots',
+          enable: true,
+        },
+        {
+          name: 'defineModel',
+          url: 'define-model',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'useSlots',
+          url: 'use-slots',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'useAttrs',
+          url: 'use-attrs',
+          enable: true,
+        },
+      ] as PageItem[],
+    }, {
+      id: 'reactivity',
+      name: '响应式',
+      open: false,
+      pages: [
+        {
+          name: 'ref',
+          url: 'ref',
+          enable: true,
+        },
+        {
+          name: 'computed',
+          url: 'computed',
+          enable: true,
+        },
+        {
+          name: 'reactive',
+          url: 'reactive',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'readonly',
+          url: 'readonly',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'watch',
+          url: 'watch',
+          enable: true,
+        },
+        {
+          name: 'watchEffect',
+          url: 'watch-effect',
+          enable: true,
+        },
+        {
+          name: 'watchPostEffect',
+          url: 'watch-post-effect',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'watchSyncEffect',
+          url: 'watch-sync-effect',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'isRef',
+          url: 'is-ref',
+          enable: true,
+        },
+        {
+          name: 'unRef',
+          url: 'un-ref',
+          enable: true,
+        },
+        {
+          name: 'toRef',
+          url: 'to-ref',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'toValue',
+          url: 'to-value',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'toRefs',
+          url: 'to-refs',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'isProxy',
+          url: 'is-proxy',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'isReactive',
+          url: 'is-reactive',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'isReadonly',
+          url: 'is-readonly',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'shallowRef',
+          url: 'shallow-ref',
+          enable: true,
+        },
+        {
+          name: 'triggerRef',
+          url: 'trigger-ref',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'customRef',
+          url: 'custom-ref',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'shallowReactive',
+          url: 'shallow-reactive',
+          enable: true,
+        },
+        {
+          name: 'shallowReadonly',
+          url: 'shallow-readonly',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'toRaw',
+          url: 'to-raw',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'markRaw',
+          url: 'mark-raw',
+          enable: false, // 暂不支持
+        },
+        {
+          name: 'effectScope',
+          url: 'effect-scope',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'getCurrentScope',
+          url: 'get-current-scope',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+        {
+          name: 'onScopeDispose',
+          url: 'on-scope-dispose',
+          // #ifdef APP
+          enable: true,
+          // #endif
+          // #ifdef WEB
+          enable: false,
+          // #endif
+        },
+      ] as PageItem[],
+    }
+  ] as PageList[]
 
   const goDetailPage = (id : string, e : PageItem) => {
     if (e.enable == false) {
-- 
GitLab