@wsxjs/wsx-core 0.0.23 → 0.0.25

package/dist/jsx.js

@@ -100,6 +100,7 @@ var _RenderContext = class _RenderContext {
    * @param fn The function to execute (usually the render method).
    */
   static runInContext(component, fn) {
+    resetCounterForNewRenderCycle(component);
     const prev = _RenderContext.current;
     _RenderContext.current = component;
     try {
@@ -125,21 +126,20 @@ _RenderContext.current = null;
 var RenderContext = _RenderContext;
 
 // src/utils/cache-key.ts
-var POSITION_ID_KEY = "__wsxPositionId";
 var INDEX_KEY = "__wsxIndex";
 var componentElementCounters = /* @__PURE__ */ new WeakMap();
 var componentIdCache = /* @__PURE__ */ new WeakMap();
 function generateCacheKey(tag, props, componentId, component) {
-  const positionId = props?.[POSITION_ID_KEY];
   const userKey = props?.key;
   const index = props?.[INDEX_KEY];
+  const positionId = props?.__wsxPositionId;
   if (userKey !== void 0 && userKey !== null) {
     return `${componentId}:${tag}:key-${String(userKey)}`;
   }
   if (index !== void 0 && index !== null) {
     return `${componentId}:${tag}:idx-${String(index)}`;
   }
-  if (positionId !== void 0 && positionId !== null && positionId !== "no-id") {
+  if (positionId !== void 0 && positionId !== null) {
     return `${componentId}:${tag}:${String(positionId)}`;
   }
   if (component) {
@@ -150,6 +150,9 @@ function generateCacheKey(tag, props, componentId, component) {
   }
   return `${componentId}:${tag}:fallback-${Date.now()}-${Math.random()}`;
 }
+function resetCounterForNewRenderCycle(component) {
+  componentElementCounters.set(component, 0);
+}
 function getComponentId() {
   const component = RenderContext.getCurrentComponent();
   if (component) {
@@ -567,7 +570,9 @@ function applySingleProp(element, key, value, tag, isSVG) {
   }
   if (key.startsWith("on") && typeof value === "function") {
     const eventName = key.slice(2).toLowerCase();
+    const listenerKey = `__wsxListener_${eventName}`;
     element.addEventListener(eventName, value);
+    element[listenerKey] = value;
     return;
   }
   if (typeof value === "boolean") {
@@ -662,7 +667,7 @@ function findElementNode(oldChild, parent) {
 function findTextNode(parent, domIndex) {
   while (domIndex.value < parent.childNodes.length) {
     const node = parent.childNodes[domIndex.value];
-    if (node.nodeType === Node.TEXT_NODE) {
+    if (node.nodeType === Node.TEXT_NODE && node.parentNode === parent) {
       const textNode = node;
       domIndex.value++;
       return textNode;
@@ -676,13 +681,23 @@ function updateOrCreateTextNode(parent, oldNode, newText) {
     if (oldNode.textContent !== newText) {
       oldNode.textContent = newText;
     }
+    return oldNode;
   } else {
+    if (!oldNode) {
+      for (let i = 0; i < parent.childNodes.length; i++) {
+        const node = parent.childNodes[i];
+        if (node.nodeType === Node.TEXT_NODE && node.parentNode === parent && node.textContent === newText) {
+          return node;
+        }
+      }
+    }
     const newTextNode = document.createTextNode(newText);
     if (oldNode && !shouldPreserveElement(oldNode)) {
       parent.replaceChild(newTextNode, oldNode);
     } else {
       parent.insertBefore(newTextNode, oldNode || null);
     }
+    return newTextNode;
   }
 }
 function removeNodeIfNotPreserved(parent, node) {
@@ -691,29 +706,66 @@ function removeNodeIfNotPreserved(parent, node) {
   }
 }
 function replaceOrInsertElement(parent, newChild, oldNode) {
+  const targetNextSibling = oldNode && shouldPreserveElement(oldNode) ? oldNode : oldNode?.nextSibling || null;
+  replaceOrInsertElementAtPosition(parent, newChild, oldNode, targetNextSibling);
+}
+function replaceOrInsertElementAtPosition(parent, newChild, oldNode, targetNextSibling) {
   if (newChild.parentNode && newChild.parentNode !== parent) {
     newChild.parentNode.removeChild(newChild);
   }
-  if (oldNode && !shouldPreserveElement(oldNode)) {
+  const isInCorrectPosition = newChild.parentNode === parent && newChild.nextSibling === targetNextSibling;
+  if (isInCorrectPosition) {
+    return;
+  }
+  if (newChild.parentNode === parent) {
+    parent.insertBefore(newChild, targetNextSibling);
+    return;
+  }
+  if (oldNode && oldNode.parentNode === parent && !shouldPreserveElement(oldNode)) {
     if (oldNode !== newChild) {
       parent.replaceChild(newChild, oldNode);
     }
-  } else if (newChild.parentNode !== parent) {
-    parent.insertBefore(newChild, oldNode || null);
+  } else {
+    if (newChild.parentNode === parent) {
+      return;
+    }
+    const newChildCacheKey = getElementCacheKey(newChild);
+    if (!newChildCacheKey) {
+      const newChildContent = newChild.textContent || "";
+      const newChildTag = newChild.tagName.toLowerCase();
+      for (let i = 0; i < parent.childNodes.length; i++) {
+        const existingNode = parent.childNodes[i];
+        if (existingNode instanceof HTMLElement || existingNode instanceof SVGElement) {
+          const existingCacheKey = getElementCacheKey(existingNode);
+          if (!existingCacheKey && existingNode.tagName.toLowerCase() === newChildTag && existingNode.textContent === newChildContent && existingNode !== newChild) {
+            return;
+          }
+        }
+      }
+    }
+    parent.insertBefore(newChild, targetNextSibling);
   }
 }
-function appendNewChild(parent, child) {
+function appendNewChild(parent, child, processedNodes) {
   if (child === null || child === void 0 || child === false) {
     return;
   }
   if (typeof child === "string" || typeof child === "number") {
-    parent.appendChild(document.createTextNode(String(child)));
+    const newTextNode = document.createTextNode(String(child));
+    parent.appendChild(newTextNode);
+    if (processedNodes) {
+      processedNodes.add(newTextNode);
+    }
   } else if (child instanceof HTMLElement || child instanceof SVGElement) {
+    if (child.parentNode === parent) {
+      return;
+    }
     if (child.parentNode && child.parentNode !== parent) {
       child.parentNode.removeChild(child);
     }
-    if (child.parentNode !== parent) {
-      parent.appendChild(child);
+    parent.appendChild(child);
+    if (processedNodes) {
+      processedNodes.add(child);
     }
   } else if (child instanceof DocumentFragment) {
     parent.appendChild(child);
@@ -735,10 +787,22 @@ function buildNewChildrenMaps(flatNew) {
   }
   return { elementSet, cacheKeyMap };
 }
-function shouldRemoveNode(node, elementSet, cacheKeyMap) {
+function shouldRemoveNode(node, elementSet, cacheKeyMap, processedNodes) {
   if (shouldPreserveElement(node)) {
     return false;
   }
+  if (node.nodeType === Node.TEXT_NODE && processedNodes && processedNodes.has(node)) {
+    return false;
+  }
+  if (node.nodeType === Node.TEXT_NODE && processedNodes) {
+    let parent = node.parentNode;
+    while (parent) {
+      if (processedNodes.has(parent) && parent.parentNode) {
+        return false;
+      }
+      parent = parent.parentNode;
+    }
+  }
   if (node instanceof HTMLElement || node instanceof SVGElement || node instanceof DocumentFragment) {
     if (elementSet.has(node)) {
       return false;
@@ -767,24 +831,39 @@ function deduplicateCacheKeys(parent, cacheKeyMap) {
         if (child !== newChild) {
           parent.replaceChild(newChild, child);
         }
+      } else if (cacheKey && cacheKeyMap.has(cacheKey) && processedCacheKeys.has(cacheKey)) {
+        const newChild = cacheKeyMap.get(cacheKey);
+        if (child !== newChild) {
+          parent.removeChild(child);
+        }
       }
     }
   }
 }
-function collectNodesToRemove(parent, elementSet, cacheKeyMap) {
+function collectNodesToRemove(parent, elementSet, cacheKeyMap, processedNodes) {
   const nodesToRemove = [];
   for (let i = 0; i < parent.childNodes.length; i++) {
     const node = parent.childNodes[i];
-    if (shouldRemoveNode(node, elementSet, cacheKeyMap)) {
+    if (shouldRemoveNode(node, elementSet, cacheKeyMap, processedNodes)) {
       nodesToRemove.push(node);
     }
   }
   return nodesToRemove;
 }
-function removeNodes(parent, nodes) {
+function removeNodes(parent, nodes, cacheManager) {
   for (let i = nodes.length - 1; i >= 0; i--) {
     const node = nodes[i];
     if (node.parentNode === parent) {
+      if (cacheManager && (node instanceof HTMLElement || node instanceof SVGElement)) {
+        const metadata = cacheManager.getMetadata(node);
+        const refCallback = metadata?.ref;
+        if (typeof refCallback === "function") {
+          try {
+            refCallback(null);
+          } catch {
+          }
+        }
+      }
       parent.removeChild(node);
     }
   }
@@ -804,6 +883,12 @@ function flattenChildrenSafe(children) {
 function removeProp(element, key, oldValue, tag) {
   const isSVG = shouldUseSVGNamespace(tag);
   if (key === "ref") {
+    if (typeof oldValue === "function") {
+      try {
+        oldValue(null);
+      } catch {
+      }
+    }
     return;
   }
   if (key === "className" || key === "class") {
@@ -819,6 +904,13 @@ function removeProp(element, key, oldValue, tag) {
     return;
   }
   if (key.startsWith("on") && typeof oldValue === "function") {
+    const eventName = key.slice(2).toLowerCase();
+    const listenerKey = `__wsxListener_${eventName}`;
+    const savedListener = element[listenerKey];
+    if (savedListener) {
+      element.removeEventListener(eventName, savedListener);
+      delete element[listenerKey];
+    }
     return;
   }
   if (key === "value") {
@@ -862,7 +954,13 @@ function applySingleProp2(element, key, value, tag, isSVG) {
   }
   if (key.startsWith("on") && typeof value === "function") {
     const eventName = key.slice(2).toLowerCase();
+    const listenerKey = `__wsxListener_${eventName}`;
+    const oldListener = element[listenerKey];
+    if (oldListener) {
+      element.removeEventListener(eventName, oldListener);
+    }
     element.addEventListener(eventName, value);
+    element[listenerKey] = value;
     return;
   }
   if (typeof value === "boolean") {
@@ -917,12 +1015,13 @@ function updateProps(element, oldProps, newProps, tag) {
     applySingleProp2(element, key, newValue, tag, isSVG);
   }
 }
-function updateChildren(element, oldChildren, newChildren, cacheManager) {
+function updateChildren(element, oldChildren, newChildren, _cacheManager) {
   const flatOld = flattenChildrenSafe(oldChildren);
   const flatNew = flattenChildrenSafe(newChildren);
   const preservedElements = collectPreservedElements(element);
   const minLength = Math.min(flatOld.length, flatNew.length);
   const domIndex = { value: 0 };
+  const processedNodes = /* @__PURE__ */ new Set();
   for (let i = 0; i < minLength; i++) {
     const oldChild = flatOld[i];
     const newChild = flatNew[i];
@@ -938,9 +1037,10 @@ function updateChildren(element, oldChildren, newChildren, cacheManager) {
     } else if (typeof oldChild === "string" || typeof oldChild === "number") {
       oldNode = findTextNode(element, domIndex);
       if (!oldNode && element.childNodes.length > 0) {
+        const oldText = String(oldChild);
         for (let j = domIndex.value; j < element.childNodes.length; j++) {
           const node = element.childNodes[j];
-          if (node.nodeType === Node.TEXT_NODE) {
+          if (node.nodeType === Node.TEXT_NODE && node.parentNode === element && node.textContent === oldText) {
             oldNode = node;
             domIndex.value = j + 1;
             break;
@@ -954,7 +1054,14 @@ function updateChildren(element, oldChildren, newChildren, cacheManager) {
         const newText = String(newChild);
         const needsUpdate = oldText !== newText || oldNode && oldNode.nodeType === Node.TEXT_NODE && oldNode.textContent !== newText;
         if (needsUpdate) {
-          updateOrCreateTextNode(element, oldNode, newText);
+          const updatedNode = updateOrCreateTextNode(element, oldNode, newText);
+          if (updatedNode && !processedNodes.has(updatedNode)) {
+            processedNodes.add(updatedNode);
+          }
+        } else {
+          if (oldNode && oldNode.parentNode === element) {
+            processedNodes.add(oldNode);
+          }
         }
       } else {
         removeNodeIfNotPreserved(element, oldNode);
@@ -968,30 +1075,48 @@ function updateChildren(element, oldChildren, newChildren, cacheManager) {
       if (oldNode && shouldPreserveElement(oldNode)) {
         continue;
       }
-      if (newChild === oldChild && (newChild instanceof HTMLElement || newChild instanceof SVGElement)) {
-        if (cacheManager) {
-          const childMetadata = cacheManager.getMetadata(newChild);
-          if (childMetadata) {
-            if (oldNode === newChild && newChild.parentNode === element) {
-              continue;
+      if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
+        let targetNextSibling = null;
+        let foundPreviousElement = false;
+        for (let j = i - 1; j >= 0; j--) {
+          const prevChild = flatNew[j];
+          if (prevChild instanceof HTMLElement || prevChild instanceof SVGElement) {
+            if (prevChild.parentNode === element) {
+              targetNextSibling = prevChild.nextSibling;
+              foundPreviousElement = true;
+              break;
             }
           }
-        } else {
-          if (oldNode === newChild && newChild.parentNode === element) {
-            continue;
-          }
         }
-      }
-      if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
-        if (newChild.parentNode === element && oldNode === newChild) {
+        if (!foundPreviousElement) {
+          const firstChild = Array.from(element.childNodes).find(
+            (node) => !shouldPreserveElement(node) && !processedNodes.has(node)
+          );
+          targetNextSibling = firstChild || null;
+        }
+        const isInCorrectPosition = newChild.parentNode === element && newChild.nextSibling === targetNextSibling;
+        if (newChild === oldChild && isInCorrectPosition) {
+          if (oldNode) processedNodes.add(oldNode);
+          processedNodes.add(newChild);
           continue;
         }
-        replaceOrInsertElement(element, newChild, oldNode);
+        const referenceNode = oldNode && oldNode.parentNode === element ? oldNode : null;
+        replaceOrInsertElementAtPosition(
+          element,
+          newChild,
+          referenceNode,
+          targetNextSibling
+        );
+        if (oldNode && oldNode !== newChild) {
+          processedNodes.delete(oldNode);
+        }
+        processedNodes.add(newChild);
       } else {
         removeNodeIfNotPreserved(element, oldNode);
         if (typeof newChild === "string" || typeof newChild === "number") {
           const newTextNode = document.createTextNode(String(newChild));
           element.insertBefore(newTextNode, oldNode?.nextSibling || null);
+          processedNodes.add(newTextNode);
         } else if (newChild instanceof DocumentFragment) {
           element.insertBefore(newChild, oldNode?.nextSibling || null);
         }
@@ -999,12 +1124,12 @@ function updateChildren(element, oldChildren, newChildren, cacheManager) {
     }
   }
   for (let i = minLength; i < flatNew.length; i++) {
-    appendNewChild(element, flatNew[i]);
+    appendNewChild(element, flatNew[i], processedNodes);
   }
   const { elementSet, cacheKeyMap } = buildNewChildrenMaps(flatNew);
   deduplicateCacheKeys(element, cacheKeyMap);
-  const nodesToRemove = collectNodesToRemove(element, elementSet, cacheKeyMap);
-  removeNodes(element, nodesToRemove);
+  const nodesToRemove = collectNodesToRemove(element, elementSet, cacheKeyMap, processedNodes);
+  removeNodes(element, nodesToRemove, _cacheManager);
   reinsertPreservedElements(element, preservedElements);
 }
 function updateElement(element, newProps, newChildren, tag, cacheManager) {

package/dist/jsx.mjs

@@ -1,7 +1,7 @@
 import {
   Fragment,
   h
-} from "./chunk-ESZYREJK.mjs";
+} from "./chunk-5Q2VEEUH.mjs";
 export {
   Fragment,
   h

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-core",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "Core WSXJS - Web Components with JSX syntax",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -48,7 +48,7 @@
     "custom-elements"
   ],
   "dependencies": {
-    "@wsxjs/wsx-logger": "0.0.23"
+    "@wsxjs/wsx-logger": "0.0.25"
   },
   "devDependencies": {
     "tsup": "^8.0.0",

package/src/base-component.ts

@@ -91,6 +91,13 @@ export abstract class BaseComponent extends HTMLElement {
      */
     protected _isRendering: boolean = false;
 
+    /**
+     * 已调度渲染标志（防止在同一事件循环中重复注册 requestAnimationFrame）
+     * 用于批量更新：同一事件循环中的多个状态变化只触发一次渲染
+     * @internal
+     */
+    private _hasScheduledRender: boolean = false;
+
     /**
      * 子类应该重写这个方法来定义观察的属性
      * @returns 要观察的属性名数组
@@ -266,6 +273,12 @@ export abstract class BaseComponent extends HTMLElement {
             return;
         }
 
+        // 如果已经调度了渲染，跳过（避免在同一事件循环中重复注册 requestAnimationFrame）
+        // 这实现了批量更新：同一事件循环中的多个状态变化只触发一次渲染
+        if (this._hasScheduledRender) {
+            return;
+        }
+
         // 检查是否有需要持续输入的元素获得焦点（input、textarea、select、contenteditable）
         // 按钮等其他元素应该立即重渲染，以反映状态变化
         const root = this.getActiveRoot();
@@ -315,10 +328,24 @@ export abstract class BaseComponent extends HTMLElement {
         if (this._pendingRerender) {
             this._pendingRerender = false;
         }
+
+        // 标记已调度渲染（批量更新的关键）
+        this._hasScheduledRender = true;
+
         // 使用 requestAnimationFrame 而不是 queueMicrotask，确保在渲染帧中执行
         // 这样可以避免在 render() 执行期间触发的 scheduleRerender() 立即执行
         requestAnimationFrame(() => {
+            console.warn("[scheduleRerender] RAF callback:", {
+                component: this.constructor.name,
+                connected: this.connected,
+                isRendering: this._isRendering,
+            });
+
+            // 重置调度标志（允许后续的状态变化调度新的渲染）
+            this._hasScheduledRender = false;
+
             if (this.connected && !this._isRendering) {
+                console.warn("[scheduleRerender] calling _rerender()");
                 // 设置渲染标志，防止在 _rerender() 执行期间再次触发
                 // 注意：_isRendering 标志会在 _rerender() 的 onRendered() 调用完成后清除
                 this._isRendering = true;

package/src/light-component.ts

@@ -79,6 +79,9 @@ export abstract class LightComponent extends BaseComponent {
                 (child) => child !== styleElement && !(child instanceof HTMLSlotElement)
             );
 
+            // 调用子类的初始化钩子（无论是否渲染，都需要调用，因为组件已连接）
+            this.onConnected?.();
+
             // 如果有错误元素，需要重新渲染以恢复正常
             // 如果有实际内容且没有错误，跳过渲染（避免重复元素）
             if (hasActualContent && !hasErrorElement) {
@@ -109,9 +112,6 @@ export abstract class LightComponent extends BaseComponent {
             // 初始化事件监听器（无论是否渲染，都需要重新初始化，因为 DOM 可能被移动）
             this.initializeEventListeners();
 
-            // 调用子类的初始化钩子（无论是否渲染，都需要调用，因为组件已连接）
-            this.onConnected?.();
-
             // 如果进行了渲染，调用 onRendered 钩子
             if (hasActualContent === false || hasErrorElement) {
                 // 使用 requestAnimationFrame 确保 DOM 已完全更新
@@ -251,12 +251,24 @@ export abstract class LightComponent extends BaseComponent {
                 });
                 oldChildren.forEach((child) => child.remove());
 
-                // 确保样式元素在第一个位置
-                if (stylesToApply && this.children.length > 1) {
-                    const styleElement = this.querySelector(
+                // 确保样式元素存在并在第一个位置
+                // 关键修复：在元素复用场景中，如果 _autoStyles 存在但样式元素被意外移除，需要重新创建
+                if (stylesToApply) {
+                    let styleElement = this.querySelector(
                         `style[data-wsx-light-component="${styleName}"]`
-                    );
-                    if (styleElement && styleElement !== this.firstChild) {
+                    ) as HTMLStyleElement | null;
+
+                    if (!styleElement) {
+                        // 样式元素被意外移除，重新创建
+                        styleElement = document.createElement("style");
+                        styleElement.setAttribute("data-wsx-light-component", styleName);
+                        styleElement.textContent = stylesToApply;
+                        this.insertBefore(styleElement, this.firstChild);
+                    } else if (styleElement.textContent !== stylesToApply) {
+                        // 样式内容已变化，更新
+                        styleElement.textContent = stylesToApply;
+                    } else if (styleElement !== this.firstChild) {
+                        // 样式元素存在但不在第一个位置，移动到第一个位置
                         this.insertBefore(styleElement, this.firstChild);
                     }
                 }

package/src/render-context.ts

@@ -1,4 +1,5 @@
 import { BaseComponent } from "./base-component";
+import { resetCounterForNewRenderCycle } from "./utils/cache-key";
 
 /**
  * RenderContext
@@ -15,6 +16,9 @@ export class RenderContext {
      * @param fn The function to execute (usually the render method).
      */
     static runInContext<T>(component: BaseComponent, fn: () => T): T {
+        // 重置计数器以标记新的渲染周期开始
+        resetCounterForNewRenderCycle(component);
+
         const prev = RenderContext.current;
         RenderContext.current = component;
         try {

package/src/utils/cache-key.ts

@@ -1,19 +1,13 @@
 /**
  * Cache Key Generation Utilities
  *
- * Pure functions for generating cache keys for DOM elements (RFC 0037).
+ * Pure functions for generating cache keys for DOM elements (RFC 0037 & RFC 0046).
  * These functions are used by the jsx-factory to identify and cache DOM elements.
  */
 
 import { RenderContext } from "../render-context";
 import type { BaseComponent } from "../base-component";
 
-/**
- * Internal symbol for position ID (used by Babel plugin in future)
- * For now, we use a string key for backward compatibility
- */
-const POSITION_ID_KEY = "__wsxPositionId";
-
 /**
  * Internal symbol for index (used in list scenarios)
  */
@@ -22,7 +16,7 @@ const INDEX_KEY = "__wsxIndex";
 /**
  * Component-level element counters (using WeakMap to avoid memory leaks)
  * Each component instance maintains its own counter to ensure unique cache keys
- * when position ID is not available.
+ * when a user-provided `key` is not available.
  */
 const componentElementCounters = new WeakMap<BaseComponent, number>();
 
@@ -37,15 +31,14 @@ const componentIdCache = new WeakMap<BaseComponent, string>();
  *
  * Cache key format: `${componentId}:${tag}:${identifier}`
  *
- * Priority:
- * 1. User-provided key (if exists) - most reliable
- * 2. Index (if in list scenario)
- * 3. Position ID (if provided and valid)
- * 4. Component-level counter (runtime fallback, ensures uniqueness)
- * 5. Timestamp fallback (last resort, ensures uniqueness)
+ * Priority (as per RFC 0048, following React/Vue model):
+ * 1. User-provided `key` (if exists) - most reliable
+ * 2. Index (if in list scenario, e.g., from `.map`)
+ * 3. Component-level counter (runtime fallback, ensures uniqueness per render)
+ * 4. Timestamp fallback (last resort, should rarely be hit)
  *
  * @param tag - HTML tag name
- * @param props - Element props (may contain position ID, index, or key)
+ * @param props - Element props (may contain index or key)
  * @param componentId - Component instance ID (from RenderContext)
  * @param component - Optional component instance (for counter-based fallback)
  * @returns Cache key string
@@ -56,11 +49,11 @@ export function generateCacheKey(
     componentId: string,
     component?: BaseComponent
 ): string {
-    const positionId = props?.[POSITION_ID_KEY];
     const userKey = props?.key;
     const index = props?.[INDEX_KEY];
+    const positionId = props?.__wsxPositionId;
 
-    // 优先级 1: 用户 key（最可靠）
+    // 优先级 1: 用户 key（最可靠, 符合 React/Vue 设计）
     if (userKey !== undefined && userKey !== null) {
         return `${componentId}:${tag}:key-${String(userKey)}`;
     }
@@ -70,12 +63,13 @@ export function generateCacheKey(
         return `${componentId}:${tag}:idx-${String(index)}`;
     }
 
-    // 优先级 3: 位置 ID（编译时注入，如果有效）
-    if (positionId !== undefined && positionId !== null && positionId !== "no-id") {
+    // 优先级 3: 位置 ID（由 babel 插件生成）
+    if (positionId !== undefined && positionId !== null) {
         return `${componentId}:${tag}:${String(positionId)}`;
     }
 
-    // 优先级 4: 组件级别计数器（运行时回退，确保唯一性）
+    // 优先级 4: 组件级别计数器（运行时回退, 确保唯一性）
+    // 注意：计数器在 RenderContext.runInContext 开始时已重置
     if (component) {
         let counter = componentElementCounters.get(component) || 0;
         counter++;
@@ -83,10 +77,22 @@ export function generateCacheKey(
         return `${componentId}:${tag}:auto-${counter}`;
     }
 
-    // 最后回退：时间戳（不推荐，但确保唯一性）
+    // 最后回退：时间戳（不推荐, 但确保唯一性）
     return `${componentId}:${tag}:fallback-${Date.now()}-${Math.random()}`;
 }
 
+/**
+ * Resets the element counter for a component when a new render cycle starts.
+ * This should be called at the beginning of RenderContext.runInContext.
+ *
+ * @param component - The component instance starting a new render cycle
+ * @internal
+ */
+export function resetCounterForNewRenderCycle(component: BaseComponent): void {
+    // 新的渲染周期开始, 直接重置计数器
+    componentElementCounters.set(component, 0);
+}
+
 /**
  * Gets the component ID from the current render context.
  * Falls back to 'unknown' if no context is available.

package/src/utils/element-creation.ts

@@ -48,7 +48,12 @@ function applySingleProp(
     // 处理事件监听器
     if (key.startsWith("on") && typeof value === "function") {
         const eventName = key.slice(2).toLowerCase();
+
+        // 关键修复：保存监听器引用，以便后续更新时移除旧的监听器
+        const listenerKey = `__wsxListener_${eventName}`;
         element.addEventListener(eventName, value as EventListener);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (element as any)[listenerKey] = value;
         return;
     }