0Pricing
HTML Academy · 课时

观测属性与 attributeChangedCallback

响应自定义元素中的 HTML 属性变化

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

响应属性变化

HTML 元素通过属性公开状态。要响应 <my-card name="A"> 变为 name="B"，请声明要观察的属性列表，并在类中实现 attributeChangedCallback。

静态 observedAttributes

通过静态获取器声明您关注的属性：static get observedAttributes() { return ["name", "open"]; }。只有列表中的属性会触发回调；其他属性会被忽略，以提高性能。

class MyCard extends HTMLElement {
  static get observedAttributes() { return ["name", "open"]; }
}

回调签名

attributeChangedCallback(name, oldValue, newValue) 会在每个被观察的属性发生变化时触发。这三个参数都是字符串（如果属性不存在，则为空值）。您可以使用它们更新内部状态并重新渲染。

attributeChangedCallback(name, oldValue, newValue) {
  if (oldValue === newValue) return;
  if (name === "name") this.render();
  if (name === "open") this.toggle(newValue !== null);
}

初始属性也会触发回调

元素升级时，对于每个已经存在的被观察属性，回调都会触发一次。这意味着在 attributeChangedCallback 中执行渲染，就能同时处理初始渲染和后续渲染，而无需在 connectedCallback 中另设一套流程。

属性与 HTML 属性的双向同步

对于布尔属性，请在对象属性与 HTML 属性之间进行双向同步：设置 element.open = true 应该设置 open 属性，而移除该属性应该清除对象属性。这与 <details> 等内置元素的行为一致。

get open() { return this.hasAttribute("open"); }
set open(value) {
  if (value) this.setAttribute("open", "");
  else this.removeAttribute("open");
}

避免无限循环

如果 attributeChangedCallback 设置了它所观察的属性，就可能陷入无限循环。请始终在回调开头使用 if (oldValue === newValue) return; 进行保护，并避免在回调内部修改被观察的属性。

布尔属性

按照 HTML 约定，布尔属性通过存在来“设置”（disabled、open），通过不存在来“取消设置”。属性值会被忽略——disabled="false" 仍然表示已禁用。请使用 hasAttribute 检查属性是否存在，切勿比较字符串。

属性中的 JSON

属性值都是字符串。要传递结构化数据，请在标记中使用 JSON.stringify，并在 attributeChangedCallback 中解析：<my-chart data-points='[1,2,3]'>。对于较大的数据，建议改用 JS 属性赋值来传递。

与 MutationObserver 相比

您也可以使用 MutationObserver 观察属性变化，但 observedAttributes 加上 attributeChangedCallback 更快（无需额外设置观察器）、更具声明性（观察属性名称列表直接显示在类上），也更符合 Web 组件的惯用写法。

性能：合并渲染

多个属性快速连续变化时，会触发多次回调和多次渲染。请使用 queueMicrotask 或 requestAnimationFrame 进行合并，使实际渲染无论属性变化多少次，都只在每个微任务或帧中运行一次。

常见陷阱

忘记将某个属性加入 observedAttributes，会悄无声息地禁用该属性的回调。如果组件没有响应 setAttribute 调用，首先应检查静态 observedAttributes 列表。

知识检查

如果您在回调内部设置被观察的属性，从而间接调用 attributeChangedCallback，会发生什么？

总结

通过静态 observedAttributes 获取器声明要跟踪的属性；attributeChangedCallback(name, oldValue, newValue) 会在每次变化时触发，包括初始解析。请将对象属性同步到 HTML 属性以表示布尔状态，防止无限循环，并使用 requestAnimationFrame 合并渲染以提高性能。

常见问题解答

「观测属性与 attributeChangedCallback」课时是免费的吗？

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

「观测属性与 attributeChangedCallback」这节课中我会学到什么？

响应自定义元素中的 HTML 属性变化 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

「观测属性与 attributeChangedCallback」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 使用 customElements.define 定义元素
  2. connectedCallback 和 disconnectedCallback
  3. 观测属性与 attributeChangedCallback
  4. 扩展内置元素
← 返回 HTML Academy