connectedcallback 仅在元素首次插入 active dom 树时执行，常见失效原因包括：customelements.define() 未提前注册、动态创建后未 appendchild、innerhtml 替换导致重建、或塞入 shadow dom；attributechangedcallback 需正确声明 observedattributes 且仅响应 html 属性变更；disconnectedcallback 不可靠，需配合 abortsignal 和事件防重绑定；高频场景须节点池化而非依赖模板。
connectedCallback 为什么总不执行？检查挂载路径是否真实有效
它只在元素**首次插入 active DOM 树**时触发，不是标签写出来就调，也不是 document.createElement() 后自动来。常见失效点：
-
customElements.define()还没执行，HTML 里就写了<my-card></my-card>—— 浏览器当HTMLUnknownElement处理，回调永不会来 - 动态创建后没调
parent.appendChild(el)，只document.createElement('my-card')不算挂载 - 用
innerHTML替换父容器内容，等于销毁旧节点、新建节点，但新节点的connectedCallback只在它第一次被appendChild时生效；反复清空再写入，逻辑上你以为是“复用”，其实是“重建” - 把自定义元素塞进 Shadow DOM 内部 —— 它只响应主文档树（
document）的连接，不认子树里的“挂载”
attributeChangedCallback 不触发？先确认 observedAttributes 是否声明正确
这个回调完全不自动，必须靠 observedAttributes 显式声明，且只响应 attribute 级变更（不是 property）。容易漏掉的细节：
- 静态 getter 必须返回字符串数组：
static get observedAttributes() { return ['data-id', 'disabled']; }，写成['DataId']或['datasetid']都无效 - 属性名严格匹配 HTML 写法：
<my-input data-user-id="123"></my-input>就得监听'data-user-id'，不能写成'userId'或'user-id' -
this.disabled = true是 property 赋值，不触发回调；必须用this.setAttribute('disabled', '')或初始 HTML 属性才进回调 - 首次渲染的属性值不会进这个回调，
oldValue是null，所以初始化逻辑仍得放在connectedCallback里兜底
disconnectedCallback 清理定时器和事件监听，但不能全信它
它是清理资源的**主要时机但不可靠**：页面刷新、关闭 tab、后台标签页冻结时，浏览器可能直接释放上下文，跳过此回调。实测某告警卡片组件因依赖此回调，单页运行 8 小时后泄漏 120+ 个 setInterval 实例。
- 所有异步操作（如
fetch）都配AbortSignal，并在发起前绑定到组件实例；disconnectedCallback中调abort()，但也要在connectedCallback中检查是否已 abort，避免重复调用 - 全局事件监听（如
window.addEventListener('resize', handler)）必须在disconnectedCallback移除，但也要在connectedCallback中先removeEventListener再addEventListener，防止多次挂载导致监听器堆积 - 不要在
disconnectedCallback里做localStorage写入等关键持久化操作 —— 应在状态变更时实时存，或用beforeunload补充兜底
HTML 模板本身不管理生命周期，节点池化才是大屏/高频场景的刚需
HTML 结构本身没有生命周期管理能力，动态组件切换时的 DOM 回收完全取决于你用什么机制控制节点增删。浏览器不会自动帮你“缓存”或“复用”节点，更不会在 v-if 切换后保留旧节点的事件、定时器或 Canvas 上下文。
- 高频更新（如每秒 10 帧滚动刷新）+ 数百节点时，靠浏览器默认行为必崩：
el.remove(); newEl = createElement(); container.appendChild(newEl)→ 每帧都触发回流 + 重绑事件 + 内存抖动 - 正确做法：用
Map缓存带唯一dataset.id的节点，滚出视口时设el.style.display = 'none'并存入池，复用时仅更新textContent/src/dataset等字段，绝不增删子节点 - 池化工厂函数里，
recover()必须清空textContent，且初始化时就写死结构（固定 class 名、子元素 class 名），避免复用时因 DOM 结构错位导致数据渲染混乱
connectedCallback 触发条件的清醒认知，以及对 disconnectedCallback 不可靠性的提前防御。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
