diff --git a/pages/composition-api/reactivity/watch-effect/watch-effect.uvue b/pages/composition-api/reactivity/watch-effect/watch-effect.uvue index c2e05483d57e057d05a1bc5dd9bf6b47c6b1a63a..65229ff1b1b53f55a9aa07cd17eab8be998d76f7 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 fb40dafc7b331095440ac0f541bc2bcd2de40c42..4c66bef029bbb5c8bd34c4e83d52623d5fad5223 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 75193946e4a06e25e44efbf09420d97524a61c3d..e945772c78557f89022312b993de2f7693789c70 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 5fc0afa755dff34f4ba57ee9f8626eedac0c0b97..5ae96261a248695bf4608b9d1d666cf828336eac 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)