From a0b368f1b4dcbb91157a31c34056d645b03e8d05 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 11 Nov 2021 17:25:48 +0800
Subject: [PATCH] perf(@vant/use): reduce usePageVisibility event binding
 (#9835)

* perf(@vant/use): reduce usePageVisibility event binding

* chore: update
---
 .eslintrc                                     |  5 ++++-
 packages/vant-use/src/useClickAway/index.ts   |  5 -----
 .../vant-use/src/usePageVisibility/index.ts   | 21 +++++++++++--------
 packages/vant-use/src/useRect/index.ts        | 13 +++++-------
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index d0707a444..d99a2ac50 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,4 +1,7 @@
 {
   "root": true,
-  "extends": ["@vant"]
+  "extends": ["@vant"],
+  "rules": {
+    "prefer-object-spread": "off"
+  }
 }
diff --git a/packages/vant-use/src/useClickAway/index.ts b/packages/vant-use/src/useClickAway/index.ts
index b36312dba..8a936eef7 100644
--- a/packages/vant-use/src/useClickAway/index.ts
+++ b/packages/vant-use/src/useClickAway/index.ts
@@ -1,5 +1,4 @@
 import { Ref, unref } from 'vue';
-import { inBrowser } from '../utils';
 import { useEventListener } from '../useEventListener';
 
 export type UseClickAwayOptions = {
@@ -11,10 +10,6 @@ export function useClickAway(
   listener: EventListener,
   options: UseClickAwayOptions = {}
 ) {
-  if (!inBrowser) {
-    return;
-  }
-
   const { eventName = 'click' } = options;
 
   const onClick = (event: Event) => {
diff --git a/packages/vant-use/src/usePageVisibility/index.ts b/packages/vant-use/src/usePageVisibility/index.ts
index 767192698..e63996815 100644
--- a/packages/vant-use/src/usePageVisibility/index.ts
+++ b/packages/vant-use/src/usePageVisibility/index.ts
@@ -1,18 +1,21 @@
-import { ref } from 'vue';
+import { ref, Ref } from 'vue';
 import { inBrowser } from '../utils';
-import { useEventListener } from '../useEventListener';
+
+let visibility: Ref<VisibilityState>;
 
 export function usePageVisibility() {
-  const visibility = ref<VisibilityState>('visible');
+  if (!visibility) {
+    visibility = ref<VisibilityState>('visible');
 
-  const setVisibility = () => {
     if (inBrowser) {
-      visibility.value = document.hidden ? 'hidden' : 'visible';
-    }
-  };
+      const update = () => {
+        visibility.value = document.hidden ? 'hidden' : 'visible';
+      };
 
-  setVisibility();
-  useEventListener('visibilitychange', setVisibility);
+      update();
+      window.addEventListener('visibilitychange', update);
+    }
+  }
 
   return visibility;
 }
diff --git a/packages/vant-use/src/useRect/index.ts b/packages/vant-use/src/useRect/index.ts
index 228549ffc..d8a4c9627 100644
--- a/packages/vant-use/src/useRect/index.ts
+++ b/packages/vant-use/src/useRect/index.ts
@@ -1,19 +1,16 @@
 import { Ref, unref } from 'vue';
 
-function isWindow(val: unknown): val is Window {
-  return val === window;
-}
+const isWindow = (val: unknown): val is Window => val === window;
 
-function makeDOMRect(width: number, height: number) {
-  return {
+const makeDOMRect = (width: number, height: number) =>
+  ({
     top: 0,
     left: 0,
     right: width,
     bottom: height,
     width,
     height,
-  } as DOMRect;
-}
+  } as DOMRect);
 
 export const useRect = (
   elementOrRef: Element | Window | Ref<Element | Window | undefined>
@@ -26,7 +23,7 @@ export const useRect = (
     return makeDOMRect(width, height);
   }
 
-  if (element && element.getBoundingClientRect) {
+  if (element?.getBoundingClientRect) {
     return element.getBoundingClientRect();
   }