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)