fix(mp): delay flush jobs when bubbling events (question/140539) (#3305) (#3228)

packages/uni-mp-vue/dist/vue.runtime.esm.js

@@ -1408,6 +1408,11 @@ function queueJob(job) {
     }
 }
 // fixed by xxxxxx
+let delayFlushJobs = false;
+function setDelayFlushJobs(isDelay) {
+    delayFlushJobs = isDelay;
+}
+// fixed by xxxxxx
 function sleep(ms) {
     return () => {
         return new Promise(resolve => setTimeout(() => resolve(void 0), ms));
@@ -1416,8 +1421,13 @@ function sleep(ms) {
 function queueFlush() {
     if (!isFlushing && !isFlushPending) {
         isFlushPending = true;
-        // fixed by xxxxxx 延迟执行，避免同一批次的事件执行时机不正确，对性能可能有略微影响 https://github.com/dcloudio/uni-app/issues/3228
-        currentFlushPromise = resolvedPromise.then(sleep(0)).then(flushJobs);
+        if (delayFlushJobs) {
+            // fixed by xxxxxx 延迟执行，避免同一批次的事件执行时机不正确，对性能可能有略微影响 https://github.com/dcloudio/uni-app/issues/3228
+            currentFlushPromise = resolvedPromise.then(sleep(0)).then(flushJobs);
+        }
+        else {
+            currentFlushPromise = resolvedPromise.then(flushJobs);
+        }
     }
 }
 function invalidateJob(job) {
@@ -1496,6 +1506,8 @@ function flushPostFlushCbs(seen) {
 }
 const getId = (job) => job.id == null ? Infinity : job.id;
 function flushJobs(seen) {
+    // fixed by xxxxxx
+    delayFlushJobs = false;
     isFlushPending = false;
     isFlushing = true;
     if ((process.env.NODE_ENV !== 'production')) {
@@ -5357,8 +5369,27 @@ function createInvoker(initialValue, instance) {
     invoker.value = initialValue;
     return invoker;
 }
+// 冒泡事件列表
+const bubbles = [
+    'touchstart',
+    'touchmove',
+    'touchcancel',
+    'touchend',
+    'tap',
+    'longpress',
+    'longtap',
+    'transitionend',
+    'animationstart',
+    'animationiteration',
+    'animationend',
+    'touchforcechange',
+];
 function patchMPEvent(event) {
     if (event.type && event.target) {
+        // 冒泡事件触发时，启用延迟策略，避免同一批次的事件执行时机不正确，对性能可能有略微影响 https://github.com/dcloudio/uni-app/issues/3228
+        if (bubbles.includes(event.type)) {
+            setDelayFlushJobs(true);
+        }
         event.preventDefault = NOOP;
         event.stopPropagation = NOOP;
         event.stopImmediatePropagation = NOOP;
@@ -5552,4 +5583,4 @@ function createApp(rootComponent, rootProps = null) {
 }
 const createSSRApp = createApp;
 
-export { EffectScope, Fragment, ReactiveEffect, Text, c, callWithAsyncErrorHandling, callWithErrorHandling, computed$1 as computed, createApp, createSSRApp, createVNode$1 as createVNode, createVueApp, customRef, d, defineAsyncComponent, defineComponent, defineEmits, defineExpose, defineProps, diff, e, effect, effectScope, f, findComponentPropsData, getCurrentInstance, getCurrentScope, getExposeProxy, guardReactiveProps, h, inject, injectHook, invalidateJob, isInSSRComponentSetup, isProxy, isReactive, isReadonly, isRef, logError, markRaw, mergeDefaults, mergeProps, n, nextTick, o, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, p, patch, provide, proxyRefs, pruneComponentPropsCache, queuePostFlushCb, r, reactive, readonly, ref, resolveComponent, resolveDirective, resolveFilter, s, setCurrentRenderingInstance, setTemplateRef, setupDevtoolsPlugin, shallowReactive, shallowReadonly, shallowRef, sr, stop, t, toHandlers, toRaw, toRef, toRefs, triggerRef, unref, updateProps, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, version, w, warn$1 as warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withModifiers, withScopeId };
+export { EffectScope, Fragment, ReactiveEffect, Text, c, callWithAsyncErrorHandling, callWithErrorHandling, computed$1 as computed, createApp, createSSRApp, createVNode$1 as createVNode, createVueApp, customRef, d, defineAsyncComponent, defineComponent, defineEmits, defineExpose, defineProps, diff, e, effect, effectScope, f, findComponentPropsData, getCurrentInstance, getCurrentScope, getExposeProxy, guardReactiveProps, h, inject, injectHook, invalidateJob, isInSSRComponentSetup, isProxy, isReactive, isReadonly, isRef, logError, markRaw, mergeDefaults, mergeProps, n, nextTick, o, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, p, patch, provide, proxyRefs, pruneComponentPropsCache, queuePostFlushCb, r, reactive, readonly, ref, resolveComponent, resolveDirective, resolveFilter, s, setCurrentRenderingInstance, setDelayFlushJobs, setTemplateRef, setupDevtoolsPlugin, shallowReactive, shallowReadonly, shallowRef, sr, stop, t, toHandlers, toRaw, toRef, toRefs, triggerRef, unref, updateProps, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, version, w, warn$1 as warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withModifiers, withScopeId };

packages/uni-mp-vue/lib/vue.runtime.esm.js

@@ -1408,6 +1408,11 @@ function queueJob(job) {
     }
 }
 // fixed by xxxxxx
+let delayFlushJobs = false;
+function setDelayFlushJobs(isDelay) {
+    delayFlushJobs = isDelay;
+}
+// fixed by xxxxxx
 function sleep(ms) {
     return () => {
         return new Promise(resolve => setTimeout(() => resolve(void 0), ms));
@@ -1416,8 +1421,13 @@ function sleep(ms) {
 function queueFlush() {
     if (!isFlushing && !isFlushPending) {
         isFlushPending = true;
-        // fixed by xxxxxx 延迟执行，避免同一批次的事件执行时机不正确，对性能可能有略微影响 https://github.com/dcloudio/uni-app/issues/3228
-        currentFlushPromise = resolvedPromise.then(sleep(0)).then(flushJobs);
+        if (delayFlushJobs) {
+            // fixed by xxxxxx 延迟执行，避免同一批次的事件执行时机不正确，对性能可能有略微影响 https://github.com/dcloudio/uni-app/issues/3228
+            currentFlushPromise = resolvedPromise.then(sleep(0)).then(flushJobs);
+        }
+        else {
+            currentFlushPromise = resolvedPromise.then(flushJobs);
+        }
     }
 }
 function invalidateJob(job) {
@@ -1496,6 +1506,8 @@ function flushPostFlushCbs(seen) {
 }
 const getId = (job) => job.id == null ? Infinity : job.id;
 function flushJobs(seen) {
+    // fixed by xxxxxx
+    delayFlushJobs = false;
     isFlushPending = false;
     isFlushing = true;
     if ((process.env.NODE_ENV !== 'production')) {
@@ -5105,4 +5117,4 @@ function initCssVarsRender(instance, getter) {
 function withModifiers() { }
 function createVNode$1() { }
 
-export { EffectScope, Fragment, ReactiveEffect, Text, callWithAsyncErrorHandling, callWithErrorHandling, computed$1 as computed, createVNode$1 as createVNode, createVueApp, customRef, defineAsyncComponent, defineComponent, defineEmits, defineExpose, defineProps, diff, effect, effectScope, getCurrentInstance, getCurrentScope, getExposeProxy, guardReactiveProps, inject, injectHook, invalidateJob, isInSSRComponentSetup, isProxy, isReactive, isReadonly, isRef, logError, markRaw, mergeDefaults, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, patch, provide, proxyRefs, queuePostFlushCb, reactive, readonly, ref, resolveComponent, resolveDirective, resolveFilter, setCurrentRenderingInstance, setTemplateRef, shallowReactive, shallowReadonly, shallowRef, stop, toHandlers, toRaw, toRef, toRefs, triggerRef, unref, updateProps, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, version, warn$1 as warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withModifiers, withScopeId };
+export { EffectScope, Fragment, ReactiveEffect, Text, callWithAsyncErrorHandling, callWithErrorHandling, computed$1 as computed, createVNode$1 as createVNode, createVueApp, customRef, defineAsyncComponent, defineComponent, defineEmits, defineExpose, defineProps, diff, effect, effectScope, getCurrentInstance, getCurrentScope, getExposeProxy, guardReactiveProps, inject, injectHook, invalidateJob, isInSSRComponentSetup, isProxy, isReactive, isReadonly, isRef, logError, markRaw, mergeDefaults, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, patch, provide, proxyRefs, queuePostFlushCb, reactive, readonly, ref, resolveComponent, resolveDirective, resolveFilter, setCurrentRenderingInstance, setDelayFlushJobs, setTemplateRef, shallowReactive, shallowReadonly, shallowRef, stop, toHandlers, toRaw, toRef, toRefs, triggerRef, unref, updateProps, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, version, warn$1 as warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withModifiers, withScopeId };

packages/uni-mp-vue/src/helpers/vOn.ts

@@ -12,6 +12,8 @@ import {
   ErrorCodes,
   getCurrentInstance,
 } from 'vue'
+// @ts-expect-error
+import { setDelayFlushJobs } from 'vue'
 
 type EventValue = Function | Function[]
 
@@ -85,9 +87,27 @@ function createInvoker(
   invoker.value = initialValue
   return invoker
 }
-
+// 冒泡事件列表
+const bubbles = [
+  'touchstart',
+  'touchmove',
+  'touchcancel',
+  'touchend',
+  'tap',
+  'longpress',
+  'longtap',
+  'transitionend',
+  'animationstart',
+  'animationiteration',
+  'animationend',
+  'touchforcechange',
+]
 function patchMPEvent(event: MPEvent) {
   if (event.type && event.target) {
+    // 冒泡事件触发时，启用延迟策略，避免同一批次的事件执行时机不正确，对性能可能有略微影响 https://github.com/dcloudio/uni-app/issues/3228
+    if (bubbles.includes(event.type)) {
+      setDelayFlushJobs(true)
+    }
     event.preventDefault = NOOP
     event.stopPropagation = NOOP
     event.stopImmediatePropagation = NOOP