chore: prefer using unref

src/composition/use-global-event.ts

@@ -1,8 +1,7 @@
 import { on, off } from '../utils/dom/event';
 import {
   Ref,
-  ref,
+  unref,
-  isRef,
   watch,
   onMounted,
   onActivated,
@@ -11,7 +10,7 @@ import {
 } from 'vue';
 
 export function useGlobalEvent(
-  target: Ref<EventTarget>,
+  target: EventTarget | Ref<EventTarget>,
   event: string,
   handler: EventListener,
   passive = false,
@@ -19,25 +18,24 @@ export function useGlobalEvent(
 ) {
   let binded: boolean;
 
-  if (!isRef(target)) {
+  const add = () => {
-    target = ref(target);
+    const element = unref(target);
-  }
 
-  function add() {
+    if (binded || (flag && !flag.value) || !element) {
-    if (binded || (flag && !flag.value) || !target.value) {
       return;
     }
 
-    on(target.value, event, handler, passive);
+    on(element, event, handler, passive);
     binded = true;
-  }
+  };
 
-  function remove() {
+  const remove = () => {
-    if (binded && target.value) {
+    const element = unref(target);
-      off(target.value, event, handler);
+    if (binded && element) {
+      off(element, event, handler);
       binded = false;
     }
-  }
+  };
 
   if (flag) {
     watch(flag, () => {

src/composition/use-rect.ts

@@ -1,13 +1,15 @@
-import { Ref, ref, onMounted, nextTick } from 'vue';
+import { Ref, ref, unref, onMounted, nextTick } from 'vue';
 
-export const useRect = (el: Ref<Element>) => el.value.getBoundingClientRect();
+export const useRect = (element: Element | Ref<Element>) => {
+  return unref(element).getBoundingClientRect();
+};
 
-export const useHeight = (el: Ref<Element>) => {
+export const useHeight = (element: Element | Ref<Element>) => {
   const height = ref();
 
   onMounted(() => {
     nextTick(() => {
-      height.value = useRect(el).height;
+      height.value = useRect(element).height;
     });
   });