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

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

* chore: update

.eslintrc

@@ -1,4 +1,7 @@
 {
   "root": true,
-  "extends": ["@vant"]
+  "extends": ["@vant"],
+  "rules": {
+    "prefer-object-spread": "off"
+  }
 }

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) => {

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();
+      update();
-  useEventListener('visibilitychange', setVisibility);
+      window.addEventListener('visibilitychange', update);
+    }
+  }
 
   return visibility;
 }

packages/vant-use/src/useRect/index.ts

@@ -1,19 +1,16 @@
 import { Ref, unref } from 'vue';
 
-function isWindow(val: unknown): val is Window {
+const isWindow = (val: unknown): val is Window => val === window;
-  return val === window;
-}
 
-function makeDOMRect(width: number, height: number) {
+const makeDOMRect = (width: number, height: number) =>
-  return {
+  ({
     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();
   }