fix(watch): 修复 vue 版本升级后 watch 示例报错问题

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

@@ -6,8 +6,6 @@
       <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
       <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
       <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
-      <text id="watch-count-trigger-num" class="uni-common-mb">watch count trigger number:
-        {{ watchCountTriggerNum }}</text>
       <text id="watch-count-cleanup-res" class="uni-common-mb">watch count cleanup result:
         {{ watchCountCleanupRes }}</text>
       <button class="increment-btn uni-common-mb" @click="increment">
@@ -17,6 +15,8 @@
         stop watch count
       </button>
       <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
+      <text id="watch-count-trigger-num" class="uni-common-mb">watch obj.str trigger number:
+        {{ watchObjStrTriggerNum }}</text>
       <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
       <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
       <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
@@ -48,7 +48,6 @@
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
   const watchCountTrackNum = ref(0)
-  const watchCountTriggerNum = ref(0)
 
   const stopWatchCount = watchEffect((onCleanup : OnCleanup) => {
     if (countRef.value !== null) {
@@ -74,12 +73,6 @@
         watchCountTrackNum.value++
       }
     },
-    // 侦听器回调被依赖项的变更触发时调用
-    onTrigger(event : DebuggerEvent) {
-      if (event.type === 'set') {
-        watchCountTriggerNum.value++
-      }
-    }
   })
 
   const triggerStopWatchCount = () => stopWatchCount()
@@ -102,6 +95,8 @@
 
   const objStrRef = ref<UniTextElement | null>(null)
   const watchObjStrRes = ref('')
+  const watchObjStrTriggerNum = ref(0)
+  
   watchEffect(() => {
     if (objStrRef.value !== null) {
       // #ifdef APP
@@ -116,6 +111,12 @@
   }, {
     // 侦听器在组件渲染之前触发
     flush: 'pre',
+    // 侦听器回调被依赖项的变更触发时调用
+    onTrigger(event : DebuggerEvent) {
+      if (event.type === 'set') {
+        watchObjStrTriggerNum.value++
+      }
+    }
   })
 
   const objBoolRef = ref<UniTextElement | null>(null)

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

@@ -6,8 +6,6 @@
       <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
       <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
       <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
-      <text id="watch-count-trigger-num" class="uni-common-mb">watch count trigger number:
-        {{ 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">
         increment
@@ -16,6 +14,8 @@
         stop watch count
       </button>
       <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
+      <text id="watch-count-trigger-num" class="uni-common-mb">watch obj.str trigger number:
+        {{ watchObjStrTriggerNum }}</text>
       <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
       <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
       <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
@@ -46,7 +46,6 @@
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
   const watchCountTrackNum = ref(0)
-  const watchCountTriggerNum = ref(0)
 
   const stopWatchCount = watchPostEffect((onCleanup : OnCleanup) => {
     if (countRef.value !== null) {
@@ -70,12 +69,6 @@
         if (event.type === 'get') {
           watchCountTrackNum.value++
         }
-      },
-      // 侦听器回调被依赖项的变更触发时调用
-      onTrigger(event : DebuggerEvent) {
-        if (event.type === 'set') {
-          watchCountTriggerNum.value++
-        }
       }
     },
   )
@@ -100,6 +93,8 @@
 
   const objStrRef = ref<UniTextElement | null>(null)
   const watchObjStrRes = ref('')
+  const watchObjStrTriggerNum = ref(0)
+  
   watchPostEffect(() => {
     if (objStrRef.value !== null) {
       // #ifdef APP
@@ -111,6 +106,13 @@
     } else {
       watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `
     }
+  },{
+    // 侦听器回调被依赖项的变更触发时调用
+    onTrigger(event : DebuggerEvent) {
+      if (event.type === 'set') {
+        watchObjStrTriggerNum.value++
+      }
+    }
   })
 
   const watchObjArrRes = ref('')

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

@@ -6,8 +6,6 @@
       <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
       <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
       <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
-      <text id="watch-count-trigger-num" class="uni-common-mb">watch count trigger number:
-        {{ 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">
@@ -17,6 +15,8 @@
         stop watch count
       </button>
       <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
+      <text id="watch-count-trigger-num" class="uni-common-mb">watch obj.str trigger number:
+        {{ watchObjStrTriggerNum }}</text>
       <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
       <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
       <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
@@ -47,7 +47,6 @@
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
   const watchCountTrackNum = ref(0)
-  const watchCountTriggerNum = ref(0)
 
   const stopWatchCount = watchSyncEffect((onCleanup : OnCleanup) => {
     if (countRef.value !== null) {
@@ -58,10 +57,10 @@
       watchCountRes.value = `count: ${count.value}, count ref text: ${(countRef.value!.childNodes[0] as HTMLElement).innerText}`
       // #endif 
     } else {
-      watchCountRes.value = `count: ${ count.value }, count ref text: `
+      watchCountRes.value = `count: ${count.value}, count ref text: `
     }
     const cancel = () => {
-      watchCountCleanupRes.value = `watch count cleanup: ${ count.value }`
+      watchCountCleanupRes.value = `watch count cleanup: ${count.value}`
     }
     onCleanup(cancel)
   },
@@ -71,12 +70,6 @@
         if (event.type === 'get') {
           watchCountTrackNum.value++
         }
-      },
-      // 侦听器回调被依赖项的变更触发时调用
-      onTrigger(event : DebuggerEvent) {
-        if (event.type === 'set') {
-          watchCountTriggerNum.value++
-        }
       }
     },
   )
@@ -96,37 +89,46 @@
 
   const watchObjRes = ref('')
   watchSyncEffect(() => {
-    watchObjRes.value = `obj: ${ JSON.stringify(obj) }`
+    watchObjRes.value = `obj: ${JSON.stringify(obj)}`
   })
 
   const objStrRef = ref<UniTextElement | null>(null)
   const watchObjStrRes = ref('')
+  const watchObjStrTriggerNum = ref(0)
+  
   watchSyncEffect(() => {
     if (objStrRef.value !== null) {
       // #ifdef APP
-      watchObjStrRes.value = `str: ${ obj.str }, obj.str ref text: ${ objStrRef.value!.value }`
+      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${objStrRef.value!.value}`
       // #endif
       // #ifdef WEB
-      watchObjStrRes.value = `str: ${ obj.str }, obj.str ref text: ${ (objStrRef.value!.childNodes[0] as HTMLElement).innerText }`
+      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${(objStrRef.value!.childNodes[0] as HTMLElement).innerText}`
       // #endif 
     } else {
-      watchObjStrRes.value = `str: ${ obj.str }, obj.str ref text: `
+      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `
+    }
+  }, {
+    // 侦听器回调被依赖项的变更触发时调用
+    onTrigger(event : DebuggerEvent) {
+      if (event.type === 'set') {
+        watchObjStrTriggerNum.value++
+      }
     }
   })
 
   const watchObjArrRes = ref('')
   watchSyncEffect(() => {
-    watchObjArrRes.value = `arr: ${ JSON.stringify(obj.arr) }`
+    watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`
   })
 
   const watchCountAndObjNumRes = ref('')
   watchSyncEffect(() => {
-    watchCountAndObjNumRes.value = `count: ${ count.value }, obj.num: ${ obj.num }`
+    watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`
   })
 
   const updateObj = () => {
     obj.num++
-    obj.str = `num: ${ obj.num }`
+    obj.str = `num: ${obj.num}`
     obj.bool = !obj.bool
     obj.arr.push(obj.num)
   }

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

@@ -6,8 +6,6 @@
       <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
       <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
       <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
-      <text id="watch-count-trigger-num" class="uni-common-mb">watch count trigger number:
-        {{ watchCountTriggerNum }}</text>
       <text id="watch-count-cleanup-res" class="uni-common-mb">watch count cleanup result:
         {{ watchCountCleanupRes }}</text>
       <button class="increment-btn uni-common-mb" @click="increment">
@@ -17,6 +15,8 @@
         stop watch count
       </button>
       <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
+      <text id="watch-obj-str-trigger-num" class="uni-common-mb">watch obj.str trigger number:
+        {{ watchObjStrTriggerNum }}</text>
       <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
       <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
       <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ JSON.stringify(obj.arr) }}</text>
@@ -48,7 +48,6 @@
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
   const watchCountTrackNum = ref(0)
-  const watchCountTriggerNum = ref(0)
 
   const stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup : OnCleanup) => {
     // #ifdef APP
@@ -64,19 +63,14 @@
   }, {
     // 侦听器在响应式依赖改变时立即触发
     flush: 'sync',
-    // 响应属性或引用作为依赖项被跟踪时调用
+    // 响应属性或引用作为依赖项被跟踪时调用
     // TODO: vue 3.4 开始, 数据更新,也会触发 onTrack, 待升级 vue 版本时,需要确认该变化是否合理及跟进
     onTrack(event : DebuggerEvent) {
       if (event.type === 'get') {
         watchCountTrackNum.value++
       }
-    },
-    // 侦听器回调被依赖项的变更触发时调用
-    onTrigger(event : DebuggerEvent) {
-      if (event.type === 'set') {
-        watchCountTriggerNum.value++
-      }
     }
+    // TODO: vue>3.4.15 开始 onTrack onTrigger 同时存在修改响应式数据时,会报错 Maximum call stack size exceeded
   })
 
   const triggerStopWatchCount = () => stopWatchCount()
@@ -100,6 +94,7 @@
 
   const objStrRef = ref<UniTextElement | null>(null)
   const watchObjStrRes = ref('')
+  const watchObjStrTriggerNum = ref(0)
   watch(() : string => obj.str, (str : string, prevStr : string) => {
     // #ifdef APP
     watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${objStrRef.value!.value}`
@@ -110,6 +105,12 @@
   }, {
     // 侦听器在组件渲染之前触发
     flush: 'pre',
+    // 侦听器回调被依赖项的变更触发时调用
+    onTrigger(event : DebuggerEvent) {
+      if (event.type === 'set') {
+        watchObjStrTriggerNum.value++
+      }
+    }
   })
 
   const objBoolRef = ref<UniTextElement | null>(null)