From f536bd683af1eb32e82031adb7048bd1e02745c0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 21 Jul 2021 16:11:12 +0800
Subject: [PATCH] feat(@vant/use): watch target change (#9077)

* feat(@vant/use): watch target change

* types: TargetRef
---
 .../vant-use/src/useEventListener/index.ts    | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/vant-use/src/useEventListener/index.ts b/packages/vant-use/src/useEventListener/index.ts
index 2eeca23e4..b58e23314 100644
--- a/packages/vant-use/src/useEventListener/index.ts
+++ b/packages/vant-use/src/useEventListener/index.ts
@@ -1,4 +1,4 @@
-import { Ref, unref, onUnmounted, onDeactivated } from 'vue';
+import { Ref, unref, onUnmounted, onDeactivated, watch } from 'vue';
 import { onMountedOrActivated } from '../onMountedOrActivated';
 import { inBrowser } from '../utils';
 
@@ -18,8 +18,10 @@ if (inBrowser) {
   } catch (e) {}
 }
 
+type TargetRef = EventTarget | Ref<EventTarget | undefined>;
+
 export type UseEventListenerOptions = {
-  target?: EventTarget | Ref<EventTarget | undefined>;
+  target?: TargetRef;
   capture?: boolean;
   passive?: boolean;
 };
@@ -37,7 +39,7 @@ export function useEventListener(
 
   let attached: boolean;
 
-  const add = () => {
+  const add = (target?: TargetRef) => {
     const element = unref(target);
 
     if (element && !attached) {
@@ -50,7 +52,7 @@ export function useEventListener(
     }
   };
 
-  const remove = () => {
+  const remove = (target?: TargetRef) => {
     const element = unref(target);
 
     if (element && attached) {
@@ -59,7 +61,12 @@ export function useEventListener(
     }
   };
 
-  onUnmounted(remove);
-  onDeactivated(remove);
-  onMountedOrActivated(add);
+  onUnmounted(() => remove(target));
+  onDeactivated(() => remove(target));
+  onMountedOrActivated(() => add(target));
+
+  watch(target, (val, oldVal) => {
+    remove(oldVal);
+    add(val);
+  });
 }