From e36da82d2928af6617c280939b02b6bc9f534b70 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 12 Nov 2025 19:49:55 +0800
Subject: [PATCH] =?UTF-8?q?fix(vue-runtime-hlep):=20=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=89=87=E9=94=80=E6=AF=81=E5=90=8E=E9=9C=80=E8=A6=81=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88app=E7=9A=84=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 runtime/vue-runtime-help/package.json         |  2 +-
 runtime/vue-runtime-help/src/hooks/use-dsl.ts | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/runtime/vue-runtime-help/package.json b/runtime/vue-runtime-help/package.json
index 27352b51..cf8de317 100644
--- a/runtime/vue-runtime-help/package.json
+++ b/runtime/vue-runtime-help/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.2.2",
+  "version": "1.2.3",
   "name": "@tmagic/vue-runtime-help",
   "type": "module",
   "sideEffects": false,
diff --git a/runtime/vue-runtime-help/src/hooks/use-dsl.ts b/runtime/vue-runtime-help/src/hooks/use-dsl.ts
index b815e4c0..75b3f86a 100644
--- a/runtime/vue-runtime-help/src/hooks/use-dsl.ts
+++ b/runtime/vue-runtime-help/src/hooks/use-dsl.ts
@@ -4,38 +4,48 @@ import type TMagicApp from '@tmagic/core';
 import type { ChangeEvent, Id, MNode } from '@tmagic/core';
 import { isPage, isPageFragment, replaceChildNode } from '@tmagic/core';
 
-export const useDsl = (app = inject<TMagicApp>('app'), pageFragmentConstainerId?: Id) => {
+export const useDsl = (app = inject<TMagicApp>('app'), pageFragmentContainerId?: Id) => {
   if (!app) {
     throw new Error('useDsl must be used after MagicApp is created');
   }
 
-  const pageFragment = pageFragmentConstainerId ? app.pageFragments.get(pageFragmentConstainerId) : null;
+  const pageFragment = pageFragmentContainerId ? app.pageFragments.get(pageFragmentContainerId) : null;
 
-  const pageConfig = ref<MNode | undefined>(pageFragmentConstainerId ? pageFragment?.data : app.page?.data);
+  const pageConfig = ref<MNode | undefined>(pageFragmentContainerId ? pageFragment?.data : app.page?.data);
 
-  if (pageFragmentConstainerId) {
-    app.on('dsl-change', () => {
+  if (pageFragmentContainerId) {
+    const setPageConfig = () => {
       pageConfig.value = pageFragment?.data;
+    };
+    app.on('dsl-change', setPageConfig);
+
+    onBeforeUnmount(() => {
+      app.off('dsl-change', setPageConfig);
     });
   } else {
-    app.on('page-change', () => {
+    const setPageConfig = () => {
       pageConfig.value = app.page?.data;
+    };
+    app.on('page-change', setPageConfig);
+
+    onBeforeUnmount(() => {
+      app.off('page-change', setPageConfig);
     });
   }
 
   const updateDataHandler = (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent, pageId: Id) => {
     if (
       !nodes.length ||
-      (pageFragmentConstainerId && pageFragment?.data.id !== pageId) ||
-      (!pageFragmentConstainerId && app.page?.data.id !== pageId)
+      (pageFragmentContainerId && pageFragment?.data.id !== pageId) ||
+      (!pageFragmentContainerId && app.page?.data.id !== pageId)
     ) {
       return;
     }
 
     for (const node of nodes) {
       if (
-        (isPage(node) && !pageFragmentConstainerId && node.id === pageId) ||
-        (isPageFragment(node) && pageFragmentConstainerId)
+        (isPage(node) && !pageFragmentContainerId && node.id === pageId) ||
+        (isPageFragment(node) && pageFragmentContainerId)
       ) {
         pageConfig.value = node;
       } else {