fix(h5): mediaQueryObserver remove listeners

packages/uni-h5/dist/uni-h5.es.js

@@ -1653,56 +1653,56 @@ function useProvideLabel() {
   });
   return handlers;
 }
-function useListeners$1(props2, listeners) {
-  _addListeners(props2.id, listeners);
+function useListeners$1(props2, listeners2) {
+  _addListeners(props2.id, listeners2);
   watch(() => props2.id, (newId, oldId) => {
-    _removeListeners(oldId, listeners, true);
-    _addListeners(newId, listeners, true);
+    _removeListeners(oldId, listeners2, true);
+    _addListeners(newId, listeners2, true);
   });
   onUnmounted(() => {
-    _removeListeners(props2.id, listeners);
+    _removeListeners(props2.id, listeners2);
   });
 }
-function _addListeners(id2, listeners, watch2) {
+function _addListeners(id2, listeners2, watch2) {
   const pageId = useCurrentPageId();
   if (watch2 && !id2) {
     return;
   }
-  if (!isPlainObject(listeners)) {
+  if (!isPlainObject(listeners2)) {
     return;
   }
-  Object.keys(listeners).forEach((name) => {
+  Object.keys(listeners2).forEach((name) => {
     if (watch2) {
       if (name.indexOf("@") !== 0 && name.indexOf("uni-") !== 0) {
-        UniViewJSBridge.on(`uni-${name}-${pageId}-${id2}`, listeners[name]);
+        UniViewJSBridge.on(`uni-${name}-${pageId}-${id2}`, listeners2[name]);
       }
     } else {
       if (name.indexOf("uni-") === 0) {
-        UniViewJSBridge.on(name, listeners[name]);
+        UniViewJSBridge.on(name, listeners2[name]);
       } else if (id2) {
-        UniViewJSBridge.on(`uni-${name}-${pageId}-${id2}`, listeners[name]);
+        UniViewJSBridge.on(`uni-${name}-${pageId}-${id2}`, listeners2[name]);
       }
     }
   });
 }
-function _removeListeners(id2, listeners, watch2) {
+function _removeListeners(id2, listeners2, watch2) {
   const pageId = useCurrentPageId();
   if (watch2 && !id2) {
     return;
   }
-  if (!isPlainObject(listeners)) {
+  if (!isPlainObject(listeners2)) {
     return;
   }
-  Object.keys(listeners).forEach((name) => {
+  Object.keys(listeners2).forEach((name) => {
     if (watch2) {
       if (name.indexOf("@") !== 0 && name.indexOf("uni-") !== 0) {
-        UniViewJSBridge.off(`uni-${name}-${pageId}-${id2}`, listeners[name]);
+        UniViewJSBridge.off(`uni-${name}-${pageId}-${id2}`, listeners2[name]);
       }
     } else {
       if (name.indexOf("uni-") === 0) {
-        UniViewJSBridge.off(name, listeners[name]);
+        UniViewJSBridge.off(name, listeners2[name]);
       } else if (id2) {
-        UniViewJSBridge.off(`uni-${name}-${pageId}-${id2}`, listeners[name]);
+        UniViewJSBridge.off(`uni-${name}-${pageId}-${id2}`, listeners2[name]);
       }
     }
   });
@@ -5696,8 +5696,8 @@ function removeIntersectionObserver({ reqId, component }, _pageId) {
     delete $el.__io[reqId];
   }
 }
-let mediaQueryObserver;
-let listener$2;
+let mediaQueryObservers = {};
+let listeners = {};
 function handleMediaQueryStr($props) {
   const mediaQueryArr = [];
   const propsMenu = [
@@ -5724,14 +5724,18 @@ function humpToLine(name) {
   return name.replace(/([A-Z])/g, "-$1").toLowerCase();
 }
 function addMediaQueryObserver({ reqId, component, options, callback }, _pageId) {
-  mediaQueryObserver = window.matchMedia(handleMediaQueryStr(options));
-  listener$2 = (observer) => callback(observer.matches);
-  listener$2(mediaQueryObserver);
-  mediaQueryObserver.addListener(listener$2);
+  const mediaQueryObserver = mediaQueryObservers[reqId] = window.matchMedia(handleMediaQueryStr(options));
+  const listener2 = listeners[reqId] = (observer) => callback(observer.matches);
+  listener2(mediaQueryObserver);
+  mediaQueryObserver.addListener(listener2);
 }
 function removeMediaQueryObserver({ reqId, component }, _pageId) {
+  const listener2 = listeners[reqId];
+  const mediaQueryObserver = mediaQueryObservers[reqId];
   if (mediaQueryObserver) {
-    mediaQueryObserver.removeListener(listener$2);
+    mediaQueryObserver.removeListener(listener2);
+    delete listeners[reqId];
+    delete mediaQueryObservers[reqId];
   }
 }
 function saveImage(base64, dirname, callback) {
@@ -8346,7 +8350,7 @@ const useAttrs = (params = {}) => {
   const { excludeListeners = false, excludeKeys = [] } = params;
   const instance2 = getCurrentInstance();
   const attrs2 = shallowRef({});
-  const listeners = shallowRef({});
+  const listeners2 = shallowRef({});
   const excludeAttrs = shallowRef({});
   const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS);
   instance2.attrs = reactive(instance2.attrs);
@@ -8369,10 +8373,10 @@ const useAttrs = (params = {}) => {
       listeners: {}
     });
     attrs2.value = res.attrs;
-    listeners.value = res.listeners;
+    listeners2.value = res.listeners;
     excludeAttrs.value = res.exclude;
   });
-  return { $attrs: attrs2, $listeners: listeners, $excludeAttrs: excludeAttrs };
+  return { $attrs: attrs2, $listeners: listeners2, $excludeAttrs: excludeAttrs };
 };
 function flatVNode(nodes) {
   const array = [];

packages/uni-h5/src/service/api/ui/mediaQueryObserver.ts

@@ -3,8 +3,8 @@ import {
   RemoveMediaQueryObserverArgs,
 } from '@dcloudio/uni-api'
 
-let mediaQueryObserver: MediaQueryList
-let listener: (e: MediaQueryList) => void
+let mediaQueryObservers: any = {}
+let listeners: any = {}
 
 // 拼接媒体查询条件
 function handleMediaQueryStr($props: UniApp.DescriptorOptions) {
@@ -48,11 +48,12 @@ export function addMediaQueryObserver(
   _pageId: number
 ) {
   // 创建一个媒体查询对象
-  mediaQueryObserver = window.matchMedia(handleMediaQueryStr(options))
-
+  const mediaQueryObserver = (mediaQueryObservers[reqId] = window.matchMedia(
+    handleMediaQueryStr(options)
+  ))
   // 创建一个监听器
-  listener = (observer) => callback(observer.matches as any)
-
+  const listener = (listeners[reqId] = (observer: any) =>
+    callback(observer.matches as any))
   listener(mediaQueryObserver) // 监听前执行一次媒体查询
   mediaQueryObserver.addListener(listener as any)
 }
@@ -62,7 +63,11 @@ export function removeMediaQueryObserver(
   { reqId, component }: RemoveMediaQueryObserverArgs,
   _pageId: number
 ) {
+  const listener = listeners[reqId]
+  const mediaQueryObserver = mediaQueryObservers[reqId]
   if (mediaQueryObserver) {
     mediaQueryObserver.removeListener(listener as any) // 移除监听
+    delete listeners[reqId]
+    delete mediaQueryObservers[reqId]
   }
 }

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

@@ -4044,7 +4044,7 @@ function createVueApp(rootComponent, rootProps = null) {
 function withModifiers() { }
 function createVNode$1() { }
 
-function initHooks(options, instance, publicThis) {
+function applyOptions(options, instance, publicThis) {
     options.mpType || publicThis.$mpType;
     // 为了组件也可以监听部分生命周期，故不再判断mpType，统一添加on开头的生命周期
     Object.keys(options).forEach((name) => {
@@ -4057,10 +4057,6 @@ function initHooks(options, instance, publicThis) {
     });
 }
 
-function applyOptions(options, instance, publicThis) {
-    initHooks(options, instance, publicThis);
-}
-
 function set(target, key, val) {
     return (target[key] = val);
 }