connectedCallback 和 disconnectedCallback
在自定义元素加入或移出 DOM 时运行代码
connectedCallback 和 disconnectedCallback 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
元素生命周期回调
自定义元素提供四个生命周期钩子：connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback。它们对应于各种组件模型中众所周知的挂载、卸载和更新节点。
connectedCallback 在插入时触发
connectedCallback 会在元素每次插入 DOM 树时运行。这里适合读取属性、渲染内容、添加事件监听器，以及启动计时器或订阅。
class Timer extends HTMLElement {
connectedCallback() {
this.start = Date.now();
this.interval = setInterval(() => this.render(), 1000);
this.render();
}
render() {
this.textContent = Math.floor((Date.now() - this.start) / 1000) + "s";
}
}它可能触发多次
如果元素被移除后重新插入，connectedCallback 会在每次插入时再次触发。幂等性很重要——对于只应执行一次的初始化，请使用标志进行保护；或者每次都完整执行设置，并让 disconnectedCallback 负责清理。
disconnectedCallback 在移除时触发
元素从 DOM 中移除时会运行 disconnectedCallback。您应在这里停止定时器、终止获取请求、移除文档级监听器，并释放否则可能泄漏的资源。
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}垃圾回收与监听器
即使元素已经断开连接，只要它仍有活动的定时器、文档监听器或尚未完成的异步操作，就不会被垃圾回收。请始终为 connectedCallback 创建的每个订阅，在 disconnectedCallback 中配套执行清理。
移动后的重新连接
使用 parentB.appendChild(element) 移动元素时，元素会先从 parentA 中移除，然后插入 parentB。浏览器会先触发 disconnectedCallback，再触发 connectedCallback。请为移动期间短暂的清理和设置过程做好准备。
初始连接时机
对于直接写在 HTML 中的元素，connectedCallback 会在初始解析期间、构造函数之后触发。此时属性已经解析，因此在这里读取 this.getAttribute("name") 会返回标记中的值。
子元素可能尚未解析
对于在 HTML 中声明了子元素的元素，connectedCallback 触发时，子元素可能还不在 DOM 中（解析器仍在继续工作）。如果需要访问已声明的子元素，请使用 MutationObserver，或在 requestAnimationFrame 中读取子元素。
adoptedCallback
元素被移动到新文档时（通常通过 document.adoptNode），会触发 adoptedCallback。大多数应用从不使用它——它主要适用于在内嵌框架之间移动的组件。
与 AbortController 配合使用
一种清晰的模式是：在 connectedCallback 中创建一个 AbortController，将 { signal: this.controller.signal } 传给每个 addEventListener 和 fetch，然后在 disconnectedCallback 中调用 this.controller.abort()，一次性移除所有相关监听器并终止所有相关请求。
避免在构造函数中执行繁重工作
即使元素是通过 document.createElement 创建后从未插入文档，构造函数也会运行。请将构造函数限制为设置初始属性值，并将渲染、获取数据和附加监听器推迟到 connectedCallback。
知识检查
为什么应该在 connectedCallback 中设置订阅和计时器，而不是在元素的构造函数中设置？
总结
connectedCallback（插入）和 disconnectedCallback（移除）共同界定了元素的活动生命周期。请在 connectedCallback 中设置监听器、定时器和获取请求；在 disconnectedCallback 中清理它们，以防止资源泄漏。两者都可能多次触发——请使用 AbortController 进行整批清理。
常见问题解答
「connectedCallback 和 disconnectedCallback」课时是免费的吗？
是的 — 「connectedCallback 和 disconnectedCallback」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「connectedCallback 和 disconnectedCallback」这节课中我会学到什么？
在自定义元素加入或移出 DOM 时运行代码 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「connectedCallback 和 disconnectedCallback」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 customElements.define 定义元素
- connectedCallback 和 disconnectedCallback
- 观测属性与 attributeChangedCallback
- 扩展内置元素