dom节点无内置唯一标识，真实dom宜用data-*属性赋id，虚拟dom推荐weakmap映射，进阶场景可谨慎使用object.defineproperties定义不可配置symbol属性。
DOM 节点本身没有内置的、全局唯一的标识符，但可通过多种方式为其赋予唯一性，关键在于区分「真实 DOM 元素」和「虚拟 DOM 节点」——两者策略不同，且安全性和适用场景差异明显。
真实 DOM 元素：用 data-* 属性或 expando 属性（简单直接）
浏览器原生元素（如 <div>）允许动态添加属性。最常用、兼容性好、调试友好的方式是使用自定义 <code>data- 属性：
-
设置唯一 ID：
element.dataset.id = 'node-' + Date.now() + '-' + Math.random().toString(36).slice(2); -
避免冲突：不建议直接写
element.id，因为可能覆盖原有 ID；data-id更安全、语义清晰 -
读取方便：后续可通过
document.querySelector('[data-id="xxx"]')或element.dataset.id快速定位
虚拟 DOM 节点：优先用 WeakMap 关联（推荐且健壮）
Vue 的 VNode、React 的 element 对象等属于运行时构造的对象，常被冻结、代理或浅拷贝。直接在对象上挂属性风险高。更可靠的方式是用 WeakMap 建立外部映射：
-
不侵入节点：
const vnodeIdMap = new WeakMap(); vnodeIdMap.set(vnode, Symbol('vnode-id')); - 自动回收：WeakMap 持有弱引用，节点被 GC 后映射自动清理，无内存泄漏风险
-
兼容冻结对象：即使节点被
Object.freeze()或 Proxy 封装，也能正常关联 ID
进阶需求：不可配置的只读 ID（慎用）
若确需将 ID 写入节点自身（如调试工具或低层渲染逻辑），可用 Object.defineProperties 注入 Symbol 键名的不可枚举、不可配置、不可写属性：
-
必须检查前提：
Object.isExtensible(node) && !Object.isFrozen(node) -
推荐键名：
Symbol('vnode-id')，避免字符串键名污染或覆盖 -
定义方式：
Object.defineProperties(node, { [Symbol('vnode-id')]: { value: Symbol(), writable: false, enumerable: false, configurable: false } }); - 时机关键：必须在节点创建后、框架内部处理（如响应式代理、patch diff）前立即执行
不推荐的做法
以下方式看似简单，但存在隐患：
- 直接赋值
vnode.__id = Math.random()：可能被框架覆盖、序列化时暴露、破坏不可变性假设 - 用全局计数器 + 字符串 ID：重复风险高，尤其在 SSR 或多实例环境下
- 依赖
element.id或element.getAttribute('id')作为唯一依据：ID 可能为空、重复或动态变更，不具稳定性
