From f3e71e0795bd54bef22e43c50d868384d12ad1bf Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Thu, 31 Aug 2023 18:28:24 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=B0=B4=E5=8D=B0=20?=
 =?UTF-8?q?hook=20=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useWatermark.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useWatermark.ts b/src/hooks/useWatermark.ts
index 655a194..04fa3f0 100644
--- a/src/hooks/useWatermark.ts
+++ b/src/hooks/useWatermark.ts
@@ -56,11 +56,11 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
   }
 
   /** 刷新水印（防御时调用） */
-  const updateWatermark = () => {
+  const updateWatermark = debounce(() => {
     clearWatermark()
     createWatermarkEl()
     addParentElListener(parentEl.value!)
-  }
+  }, 500)
 
   /** 创建水印元素 */
   const createWatermarkEl = () => {
@@ -155,7 +155,7 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
       subtree: true
     }
     // 当观察到变动时执行的回调
-    const mutationCallback = (mutationList: MutationRecord[]) => {
+    const mutationCallback = debounce((mutationList: MutationRecord[]) => {
       // 水印的防御（防止用户手动删除水印元素或通过 CSS 隐藏水印）
       mutationList.forEach((mutation) => {
         switch (mutation.type) {
@@ -165,11 +165,13 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
             })
             break
           case "attributes":
-            updateWatermark()
+            if (mutation.target === watermarkEl) {
+              updateWatermark()
+            }
             break
         }
       })
-    }
+    }, 500)
     // 创建一个观察器实例并传入回调
     const mutationObserver = new MutationObserver(mutationCallback)
     // 以上述配置开始观察目标节点