From c47c6c81b97098c9603c6b9d936854b96a41f91e Mon Sep 17 00:00:00 2001 From: zhenyuWang <13641039885@163.com> Date: Thu, 21 Mar 2024 20:29:06 +0800 Subject: [PATCH] =?UTF-8?q?fix(watch):=20=E4=BF=AE=E5=A4=8D=20vue=20?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8D=87=E7=BA=A7=E5=90=8E=20watch=20?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reactivity/watch-effect/watch-effect.uvue | 19 +++++----- .../watch-post-effect/watch-post-effect.uvue | 20 +++++----- .../watch-sync-effect/watch-sync-effect.uvue | 38 ++++++++++--------- .../reactivity/watch/watch.uvue | 21 +++++----- 4 files changed, 52 insertions(+), 46 deletions(-) diff --git a/pages/composition-api/reactivity/watch-effect/watch-effect.uvue b/pages/composition-api/reactivity/watch-effect/watch-effect.uvue index c2e0548..65229ff 100644 --- a/pages/composition-api/reactivity/watch-effect/watch-effect.uvue +++ b/pages/composition-api/reactivity/watch-effect/watch-effect.uvue @@ -6,8 +6,6 @@ count: {{ count }} watch count result: {{ watchCountRes }} watch count track number: {{ watchCountTrackNum }} - watch count trigger number: - {{ watchCountTriggerNum }} watch count cleanup result: {{ watchCountCleanupRes }} obj.str: {{ obj.str }} + watch obj.str trigger number: + {{ watchObjStrTriggerNum }} obj.num: {{ obj.num }} obj.bool: {{ obj.bool }} obj.arr: {{ JSON.stringify(obj.arr) }} @@ -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(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(null) diff --git a/pages/composition-api/reactivity/watch-post-effect/watch-post-effect.uvue b/pages/composition-api/reactivity/watch-post-effect/watch-post-effect.uvue index fb40daf..4c66bef 100644 --- a/pages/composition-api/reactivity/watch-post-effect/watch-post-effect.uvue +++ b/pages/composition-api/reactivity/watch-post-effect/watch-post-effect.uvue @@ -6,8 +6,6 @@ count: {{ count }} watch count result: {{ watchCountRes }} watch count track number: {{ watchCountTrackNum }} - watch count trigger number: - {{ watchCountTriggerNum }} watch count cleanup result: {{ watchCountCleanupRes }} obj.str: {{ obj.str }} + watch obj.str trigger number: + {{ watchObjStrTriggerNum }} obj.num: {{ obj.num }} obj.bool: {{ obj.bool }} obj.arr: {{ JSON.stringify(obj.arr) }} @@ -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(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('') diff --git a/pages/composition-api/reactivity/watch-sync-effect/watch-sync-effect.uvue b/pages/composition-api/reactivity/watch-sync-effect/watch-sync-effect.uvue index 7519394..e945772 100644 --- a/pages/composition-api/reactivity/watch-sync-effect/watch-sync-effect.uvue +++ b/pages/composition-api/reactivity/watch-sync-effect/watch-sync-effect.uvue @@ -6,8 +6,6 @@ count: {{ count }} watch count result: {{ watchCountRes }} watch count track number: {{ watchCountTrackNum }} - watch count trigger number: - {{ watchCountTriggerNum }} watch count cleanup result: {{ watchCountCleanupRes }} obj.str: {{ obj.str }} + watch obj.str trigger number: + {{ watchObjStrTriggerNum }} obj.num: {{ obj.num }} obj.bool: {{ obj.bool }} obj.arr: {{ JSON.stringify(obj.arr) }} @@ -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(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) } diff --git a/pages/composition-api/reactivity/watch/watch.uvue b/pages/composition-api/reactivity/watch/watch.uvue index 5fc0afa..5ae9626 100644 --- a/pages/composition-api/reactivity/watch/watch.uvue +++ b/pages/composition-api/reactivity/watch/watch.uvue @@ -6,8 +6,6 @@ count: {{ count }} watch count result: {{ watchCountRes }} watch count track number: {{ watchCountTrackNum }} - watch count trigger number: - {{ watchCountTriggerNum }} watch count cleanup result: {{ watchCountCleanupRes }} obj.str: {{ obj.str }} + watch obj.str trigger number: + {{ watchObjStrTriggerNum }} obj.num: {{ obj.num }} obj.bool: {{ obj.bool }} obj.arr: {{ JSON.stringify(obj.arr) }} @@ -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(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(null) -- GitLab