diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index 597af114584e0fb69cc94e266af1734e4649ff84..e673da035887c05f52a898f709adbdd0e49088f9 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -507,6 +507,11 @@ export default {
                     },
                   ]
                 },
+                {
+                  id: 'watch-effect',
+                  name: 'watchEffect',
+                  url: 'watch-effect/watch-effect'
+                },
               ]
             }
           ] as Page[]
diff --git a/pages/reactivity/core/watch-effect/watch-effect.test.js b/pages/reactivity/core/watch-effect/watch-effect.test.js
index 93abcddf20181bc4ca995073f811944d8290f464..29764a080dcdd590d6468f36dc6c1d0ec817eab4 100644
--- a/pages/reactivity/core/watch-effect/watch-effect.test.js
+++ b/pages/reactivity/core/watch-effect/watch-effect.test.js
@@ -1,72 +1,77 @@
-const PAGE_PATH = '/pages/composition-api/reactivity/watch-effect/watch-effect'
+const PAGE_PATH = '/pages/reactivity/core/watch-effect/watch-effect'
 
 describe('watchEffect', () => {
   let page = null
+  const platformInfo = process.env.uniTestPlatformInfo.toLowerCase()
+  const isAndroid = platformInfo.startsWith('android')
+  const isIos = platformInfo.startsWith('ios')
+  const isWeb = platformInfo.startsWith('web')
+  
   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')
+    expect(await count.text()).toBe('0')
 
     // watch
     const watchCountRes = await page.$('#watch-count-res')
     expect(await watchCountRes.text()).toBe(
-      'watch count result: count: 0, count ref text (flush sync): count: 0')
+      'count: 0, count ref text (flush sync): 0')
     // track
     const watchCountTrackNum = await page.$('#watch-count-track-num')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-    } else if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
+    if (isAndroid) {
+      expect(await watchCountTrackNum.text()).toBe('3')
+    } else if (isIos) {
       // TODO: 确认 IOS 的差异是否正常
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 11')
+      expect(await watchCountTrackNum.text()).toBe('11')
     } else {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 6')
+      expect(await watchCountTrackNum.text()).toBe('6')
     }
 
     const watchCountCleanupRes = await page.$('#watch-count-cleanup-res')
-    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 0')
+    expect(await watchCountCleanupRes.text()).toBe('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')
+    expect(await watchCountAndObjNumRes.text()).toBe('count: 0, obj.num: 0')
 
     const incrementBtn = await page.$('.increment-btn')
     await incrementBtn.tap()
 
-    expect(await count.text()).toBe('count: 1')
+    expect(await count.text()).toBe('1')
     expect(await watchCountRes.text()).toBe(
-      'watch count result: count: 1, count ref text (flush sync): count: 0')
+      'count: 1, count ref text (flush sync): 0')
 
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-    } else if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 19')
+    if (isAndroid) {
+      expect(await watchCountTrackNum.text()).toBe('3')
+    } else if (isIos) {
+      expect(await watchCountTrackNum.text()).toBe('19')
     } else {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 9')
+      expect(await watchCountTrackNum.text()).toBe('9')
     }
 
-    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 1')
+    expect(await watchCountCleanupRes.text()).toBe('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('count: 1, obj.num: 0')
 
     await incrementBtn.tap()
 
-    expect(await count.text()).toBe('count: 2')
+    expect(await count.text()).toBe('2')
     expect(await watchCountRes.text()).toBe(
-      'watch count result: count: 2, count ref text (flush sync): count: 1')
+      'count: 2, count ref text (flush sync): 1')
 
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-    } else if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 27')
+    if (isAndroid) {
+      expect(await watchCountTrackNum.text()).toBe('3')
+    } else if (isIos) {
+      expect(await watchCountTrackNum.text()).toBe('27')
     }  else {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 12')
+      expect(await watchCountTrackNum.text()).toBe('12')
     }
-    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+    expect(await watchCountCleanupRes.text()).toBe('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('count: 2, obj.num: 0')
 
     // stop watch
     const stopWatchCountBtn = await page.$('.stop-watch-count-btn')
@@ -74,82 +79,82 @@ describe('watchEffect', () => {
 
     await incrementBtn.tap()
 
-    expect(await count.text()).toBe('count: 3')
+    expect(await count.text()).toBe('3')
     expect(await watchCountRes.text()).toBe(
-      'watch count result: count: 2, count ref text (flush sync): count: 1')
+      'count: 2, count ref text (flush sync): 1')
 
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 3')
-    } else if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 27')
+    if (isAndroid) {
+      expect(await watchCountTrackNum.text()).toBe('3')
+    } else if (isIos) {
+      expect(await watchCountTrackNum.text()).toBe('27')
     }  else {
-      expect(await watchCountTrackNum.text()).toBe('watch count track number: 12')
+      expect(await watchCountTrackNum.text()).toBe('12')
     }
-    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup result: watch count cleanup: 2')
+    expect(await watchCountCleanupRes.text()).toBe('watch count cleanup: 2')
 
-    expect(await watchCountAndObjNumRes.text()).toBe('watch count and obj.num result: count: 3, obj.num: 0')
+    expect(await watchCountAndObjNumRes.text()).toBe('count: 3, obj.num: 0')
   })
   it('obj', async () => {
     const objStr = await page.$('#obj-str')
-    expect(await objStr.text()).toBe('obj.str: num: 0')
+    expect(await objStr.text()).toBe('num: 0')
     const objNum = await page.$('#obj-num')
-    expect(await objNum.text()).toBe('obj.num: 0')
+    expect(await objNum.text()).toBe('0')
     const objBool = await page.$('#obj-bool')
-    expect(await objBool.text()).toBe('obj.bool: false')
+    expect(await objBool.text()).toBe('false')
     const objArr = await page.$('#obj-arr')
-    expect(await objArr.text()).toBe('obj.arr: [0]')
+    expect(await objArr.text()).toBe('[0]')
 
     const watchObjRes = await page.$('#watch-obj-res')
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    if (isAndroid) {
       expect(await watchObjRes.text()).toBe(
-        'watch obj result: obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}')
+        'obj: {"arr":[0],"bool":false,"num":0,"str":"num: 0"}')
     }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+    if (isWeb) {
       expect(await watchObjRes.text()).toBe(
-        'watch obj result: obj: {"num":0,"str":"num: 0","bool":false,"arr":[0]}')
+        'obj: {"num":0,"str":"num: 0","bool":false,"arr":[0]}')
     }
     const watchObjStrRes = await page.$('#watch-obj-str-res')
     expect(await watchObjStrRes.text()).toBe(
-      'watch obj.str result: str: num: 0, obj.str ref text (flush pre): obj.str: num: 0')
+      'str: num: 0, obj.str ref text (flush pre): num: 0')
 
     // trigger
     const watchObjStrTriggerNum = await page.$('#watch-obj-str-trigger-num')
-    expect(await watchObjStrTriggerNum.text()).toBe('watch obj.str trigger number: 1')
+    expect(await watchObjStrTriggerNum.text()).toBe('1')
 
     const watchObjBoolRes = await page.$('#watch-obj-bool-res')
     expect(await watchObjBoolRes.text()).toBe(
-      'watch obj.bool result: bool: false, obj.bool ref text (flush post): obj.bool: false')
+      'bool: false, obj.bool ref text (flush post): false')
 
     const watchObjArrRes = await page.$('#watch-obj-arr-res')
-    expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0]')
+    expect(await watchObjArrRes.text()).toBe('arr: [0]')
 
     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('num: 1')
+    expect(await objNum.text()).toBe('1')
+    expect(await objBool.text()).toBe('true')
+    expect(await objArr.text()).toBe('[0,1]')
 
-    if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    if (isAndroid) {
       expect(await watchObjRes.text()).toBe(
-        'watch obj result: obj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}')
+        'obj: {"arr":[0,1],"bool":true,"num":1,"str":"num: 1"}')
     }
-    if (process.env.uniTestPlatformInfo.startsWith('web')) {
+    if (isWeb) {
       expect(await watchObjRes.text()).toBe(
-        'watch obj result: obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}')
+        'obj: {"num":1,"str":"num: 1","bool":true,"arr":[0,1]}')
     }
     expect(await watchObjStrRes.text()).toBe(
-      'watch obj.str result: str: num: 1, obj.str ref text (flush pre): obj.str: num: 0')
+      'str: num: 1, obj.str ref text (flush pre): num: 0')
 
-    expect(await watchObjStrTriggerNum.text()).toBe('watch obj.str trigger number: 2')
+    expect(await watchObjStrTriggerNum.text()).toBe('2')
 
     expect(await watchObjBoolRes.text()).toBe(
-      'watch obj.bool result: bool: true, obj.bool ref text (flush post): obj.bool: true')
+      'bool: true, obj.bool ref text (flush post): true')
 
-    expect(await watchObjArrRes.text()).toBe('watch obj.arr result: arr: [0,1]')
+    expect(await watchObjArrRes.text()).toBe('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')
+    expect(await watchCountAndObjNumRes.text()).toBe('count: 3, obj.num: 1')
   })
 })
\ No newline at end of file
diff --git a/pages/reactivity/core/watch-effect/watch-effect.uvue b/pages/reactivity/core/watch-effect/watch-effect.uvue
index 152e31e12b72cba2e5742046d1419c35d6c3a90b..7516714de237b3e49f537c5f2b92dd2c7c20fc24 100644
--- a/pages/reactivity/core/watch-effect/watch-effect.uvue
+++ b/pages/reactivity/core/watch-effect/watch-effect.uvue
@@ -1,41 +1,82 @@
 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1; padding-bottom: 20px">
-  <!-- #endif -->
+    <!-- #endif -->
     <view class="page">
-      <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 mb-10" @click="increment">
-        increment
-      </button>
+      <view class="flex justify-between flex-row mb-10">
+        <text>count:</text>
+        <text id="count" ref="countRef">{{ count }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count result:</text>
+        <text id="watch-count-res">{{ watchCountRes }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch count track number:</text>
+        <text id="watch-count-track-num">{{ watchCountTrackNum }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch count cleanup number:</text>
+        <text id="watch-count-cleanup-res">{{ watchCountCleanupRes }}</text>
+      </view>
+
+      <button class="increment-btn mb-10" @click="increment">increment</button>
       <button class="stop-watch-count-btn mb-10" @click="triggerStopWatchCount">
         stop watch count
       </button>
-      <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="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>
+
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.str:</text>
+        <text id="obj-str" ref="objStrRef">{{ obj.str }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>watch obj.str trigger number:</text>
+        <text id="watch-obj-str-trigger-num">{{ watchObjStrTriggerNum }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.num:</text>
+        <text id="obj-num">{{ obj.num }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.bool:</text>
+        <text id="obj-bool" ref="objBoolRef">{{ obj.bool }}</text>
+      </view>
+      <view class="flex justify-between flex-row mb-10">
+        <text>obj.arr:</text>
+        <text id="obj-arr" ref="objArrRef">{{ JSON.stringify(obj.arr) }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj result:</text>
+        <text id="watch-obj-res">{{ watchObjRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.str result:</text>
+        <text id="watch-obj-str-res">{{ watchObjStrRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.bool result:</text>
+        <text id="watch-obj-bool-res">{{ watchObjBoolRes }}</text>
+      </view>
+      <view class="flex justify-between mb-10">
+        <text>watch obj.arr result:</text>
+        <text id="watch-obj-arr-res">{{ watchObjArrRes }}</text>
+      </view>
+
       <button class="update-obj-btn mb-10" @click="updateObj">
         update obj
       </button>
-      <text id="watch-count-obj-num-res" class="mb-10">watch count and obj.num result:
-        {{ watchCountAndObjNumRes }}</text>
+
+      <view class="flex justify-between mb-10">
+        <text>watch count and obj.num result:</text>
+        <text id="watch-count-obj-num-res">{{ watchCountAndObjNumRes }}</text>
+      </view>
     </view>
-  <!-- #ifdef APP -->
+    <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
-<script setup>
+<script setup lang='uts'>
   type Obj = {
     num : number,
     str : string,