JavaScript Academy · 课时

生命周期回调

Q: 「生命周期回调」这节课中我会学到什么？

接入连接、断开连接和属性变化等时机。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

接入连接、断开连接和属性变化等时机。

生命周期回调 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

元素生命周期

自定义元素具有明确的生命周期。浏览器会在关键时刻调用您类中的特殊方法：

connectedCallback — 添加到 DOM 中
disconnectedCallback — 从 DOM 中移除
attributeChangedCallback — 观察的属性发生变化
adoptedCallback — 移动到新文档中

connectedCallback

每当元素插入文档时，都会运行 connectedCallback。这里非常适合渲染内容、获取数据或附加全局监听器。

如果元素被移到其他位置，它可能会多次触发。

class StatusBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Online';
    console.log('badge added to page');
  }
}
customElements.define('status-badge', StatusBadge);

disconnectedCallback

当元素从 DOM 中移除时，会运行 disconnectedCallback。请使用它执行清理工作：移除全局监听器、取消计时器或关闭连接，以避免内存泄漏。

class ClockWidget extends HTMLElement {
  connectedCallback() {
    this.timer = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }
  disconnectedCallback() {
    clearInterval(this.timer); // cleanup
  }
}
customElements.define('clock-widget', ClockWidget);

观察属性

要响应属性变化，您必须通过静态的 observedAttributes 获取器声明要监视的属性；该获取器会返回一个名称数组。

只有列出的属性会触发 attributeChangedCallback。

class AvatarImage extends HTMLElement {
  static get observedAttributes() {
    return ['src', 'alt'];
  }
}
customElements.define('avatar-image', AvatarImage);

attributeChangedCallback

当观察的属性被添加、移除或修改时，浏览器会调用 attributeChangedCallback(name, oldValue, newValue)。请使用它使渲染输出与属性保持同步。

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src') {
      this.innerHTML = '<img src="' + newValue + '">';
    }
  }
}
customElements.define('avatar-image', AvatarImage);

回调参数

attributeChangedCallback 会接收三个参数：

name — 发生变化的属性
oldValue — 之前的值（如果是新添加的，则为 null）
newValue — 新值（如果已移除，则为 null）

比较新旧值，以跳过不必要的工作。

attributeChangedCallback(name, oldValue, newValue) {
  if (oldValue === newValue) return; // no real change
  console.log(name + ' changed to ' + newValue);
}

初始属性调用

如果元素升级时已经具有某个观察的属性，那么在 connectedCallback 之前，该属性会分别触发一次 attributeChangedCallback。这样，您就可以自动从标记初始化元素。

// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.

将属性映射到特性

一种常见模式是公开一个读取和写入属性的 JavaScript 特性。这样既能让 API 使用起来更方便，又能保持同步。

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  get src() { return this.getAttribute('src'); }
  set src(value) { this.setAttribute('src', value); }
}
customElements.define('avatar-image', AvatarImage);

adoptedCallback

当元素从一个文档移动到另一个文档时（例如，通过 document.adoptNode 移入 iframe），会运行 adoptedCallback。它很少需要使用，但完善了整个生命周期。

class PortableWidget extends HTMLElement {
  adoptedCallback() {
    console.log('moved to a new document');
  }
}
customElements.define('portable-widget', PortableWidget);

生命周期顺序

对于直接写在 HTML 中的元素，通常顺序如下：

constructor
attributeChangedCallback（每个已存在的观察属性调用一次）
connectedCallback

之后移除元素时，会调用 disconnectedCallback。

整合起来

一个完整的元素会连接所有部分：观察属性，在连接时渲染，在属性变化时同步，并在断开连接时进行清理。

class GreetUser extends HTMLElement {
  static get observedAttributes() { return ['name']; }
  connectedCallback() { this.render(); }
  attributeChangedCallback() { this.render(); }
  render() {
    const name = this.getAttribute('name') || 'Guest';
    this.textContent = 'Hello, ' + name;
  }
}
customElements.define('greet-user', GreetUser);

快速检查

检验您对生命周期回调函数的了解。

回顾

您已经学会了自定义元素的生命周期：

connectedCallback 在插入时运行 — 请在这里进行渲染。
disconnectedCallback 在移除时运行 — 请在这里进行清理。
observedAttributes 声明要观察的属性。
attributeChangedCallback(name, old, new) 响应属性变化。
adoptedCallback 处理跨文档移动。

接下来，我们将使用阴影 DOM 封装样式和标记。

常见问题解答

「生命周期回调」课时是免费的吗？

是的 — 「生命周期回调」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「生命周期回调」这节课中我会学到什么？

接入连接、断开连接和属性变化等时机。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「生命周期回调」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy