From a731db6e9ae851253cca0ed82ca5849ab1d0f499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Tue, 27 Jun 2023 21:15:13 +0800
Subject: [PATCH] perf: cancel `MutationObserver` listener when disconnected

---
 packages/runtime-dom/src/apiCustomElement.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 1e551cc05da..cbbbd5d8ac1 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -176,7 +176,7 @@ export class VueElement extends BaseClass {
   private _resolved = false
   private _numberProps: Record<string, true> | null = null
   private _styles?: HTMLStyleElement[]
-
+  private _ob?: MutationObserver | null = null
   constructor(
     private _def: InnerComponentDef,
     private _props: Record<string, any> = {},
@@ -213,6 +213,10 @@ export class VueElement extends BaseClass {
 
   disconnectedCallback() {
     this._connected = false
+    if (this._ob) {
+      this._ob.disconnect()
+      this._ob = null
+    }
     nextTick(() => {
       if (!this._connected) {
         render(null, this.shadowRoot!)
@@ -233,11 +237,13 @@ export class VueElement extends BaseClass {
     }
 
     // watch future attr changes
-    new MutationObserver(mutations => {
+    this._ob = new MutationObserver(mutations => {
       for (const m of mutations) {
         this._setAttr(m.attributeName!)
       }
-    }).observe(this, { attributes: true })
+    })
+
+    this._ob.observe(this, { attributes: true })
 
     const resolve = (def: InnerComponentDef, isAsync = false) => {
       const { props, styles } = def