fix(Popup): should watch lockScroll (#8169)

* fix(Popup): should watch lockScroll

* chore: oreder

* chore: upd

* chore: upd

src/composables/use-lock-scroll.ts

@@ -1,5 +1,9 @@
-import { Ref } from 'vue';
-import { getScrollParent, supportsPassive } from '@vant/use';
+import { Ref, watch, onBeforeUnmount, onDeactivated } from 'vue';
+import {
+  getScrollParent,
+  supportsPassive,
+  onMountedOrActivated,
+} from '@vant/use';
 import { useTouch } from './use-touch';
 import { preventDefault } from '../utils';
 
@@ -40,24 +44,22 @@ export function useLockScroll(
   };
 
   const lock = () => {
-    if (shouldLock()) {
-      document.addEventListener('touchstart', touch.start);
-      document.addEventListener(
-        'touchmove',
-        onTouchMove,
-        supportsPassive ? { passive: false } : false
-      );
+    document.addEventListener('touchstart', touch.start);
+    document.addEventListener(
+      'touchmove',
+      onTouchMove,
+      supportsPassive ? { passive: false } : false
+    );
 
-      if (!totalLockCount) {
-        document.body.classList.add(BODY_LOCK_CLASS);
-      }
-
-      totalLockCount++;
+    if (!totalLockCount) {
+      document.body.classList.add(BODY_LOCK_CLASS);
     }
+
+    totalLockCount++;
   };
 
   const unlock = () => {
-    if (shouldLock() && totalLockCount) {
+    if (totalLockCount) {
       document.removeEventListener('touchstart', touch.start);
       document.removeEventListener('touchmove', onTouchMove);
 
@@ -69,5 +71,23 @@ export function useLockScroll(
     }
   };
 
-  return [lock, unlock];
+  const init = () => {
+    if (shouldLock()) {
+      lock();
+    }
+  };
+
+  const destroy = () => {
+    if (shouldLock()) {
+      unlock();
+    }
+  };
+
+  onMountedOrActivated(init);
+  onDeactivated(destroy);
+  onBeforeUnmount(destroy);
+
+  watch(shouldLock, (value) => {
+    value ? lock() : unlock();
+  });
 }

src/popup/index.tsx

@@ -11,7 +11,6 @@ import {
   CSSProperties,
   TeleportProps,
   onDeactivated,
-  onBeforeUnmount,
 } from 'vue';
 import { createNamespace, isDef, UnknownProp } from '../utils';
 
@@ -116,11 +115,6 @@ export default createComponent({
     const zIndex = ref<number>();
     const popupRef = ref<HTMLElement>();
 
-    const [lockScroll, unlockScroll] = useLockScroll(
-      popupRef,
-      () => props.lockScroll
-    );
-
     const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
 
     const style = computed(() => {
@@ -146,7 +140,6 @@ export default createComponent({
         }
 
         opened = true;
-        lockScroll();
         zIndex.value = ++globalZIndex;
       }
     };
@@ -154,7 +147,6 @@ export default createComponent({
     const close = () => {
       if (opened) {
         opened = false;
-        unlockScroll();
         emit('update:show', false);
       }
     };
@@ -258,6 +250,8 @@ export default createComponent({
 
     useExpose({ popupRef });
 
+    useLockScroll(popupRef, () => props.show && props.lockScroll);
+
     useEventListener('popstate', () => {
       if (props.closeOnPopstate) {
         close();
@@ -285,12 +279,6 @@ export default createComponent({
       }
     });
 
-    onBeforeUnmount(() => {
-      if (opened) {
-        unlockScroll();
-      }
-    });
-
     return () => {
       if (props.teleport) {
         return (