前言
Custom Elements 是 Web Components 标准规范中的一部分，它允许开发者创建自定义标签，封装成组件并集成到 Web 页面中。Custom Elements 拥有自己的生命周期，这个生命周期可以帮助开发者更好地理解组件的渲染过程，增加组件的复用性，减少代码的耦合度以及提升开发效率。本文将为大家介绍 Custom Elements 的命令生命周期图谱，并通过示例代码演示其用法。
什么是 Custom Elements 的生命周期？
Custom Elements 的生命周期指的是包括构造函数、connectedCallback、disconnectedCallback、adoptedCallback 以及 attributeChangedCallback 在内的一系列事件方法。这些方法构成了 Custom Elements 渲染每个自定义元素的过程，通过这些生命周期函数，我们能够更好地控制组件的初始化、挂载和销毁等各个阶段。
命令生命周期图谱
下面是 Custom Elements 的命令生命周期图谱。
-- -------------------- ---- ------- ----- -- -- --- -- --- ------------- -- ----- -- --- ------------- -- --- ------------- -- --- ---------------- -- --- ------ ---------- -- ----- -- --- ------------ -------- -- --- ------------ -------- --------- --------------- --- --------------------- ------------------------ --- -- ------------------------ --- ------------------- --- -------- ------ ---------------------------- ---
如上图，Custom Elements 的生命周期可以分为两个子图。Lifecycle 子图代表着 Custom Elements 在运行时各个不同时期的行为和阶段，而 Event 子图则展示了如何通过 attributeChangedCallback 事件方法来触发组件的状态变化。
生命周期方法的介绍
constructor
constructor 方法表示组件构造函数，它会在组件实例化时首先被调用，并且只会被调用一次。在构造函数中，我们可以定义一些属性，以及初始化一些方法，一些变量等，以及内部对元素进行操作及属性的初始化工作。
示例代码：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-- -----
-------- - ------
-------- - ------
-- ----
----- ------ - ------------------- ----- ------ ---
---------------- - ----------- -------------
-- -------
------------
-
-- --- --------
-connectedCallback
connectedCallback 方法表示组件挂载完毕并且连接到 document 时被调用。如果组件需要渲染一些样式或者结构，在这个时间点完成。由于它会在组件挂载和更新时被调用，所以可以在这里更新一些 UI 或者重新展示一些数据。
示例代码：
class MyCustomElement extends HTMLElement {
// ... 其他生命周期方法
connectedCallback() {
console.log('Custom element added to page.');
}
}disconnectedCallback
disconnectedCallback 方法表示当一个自定义元素从DOM中断开连接时，会触发此方法。例如，如果 document.body.removeChild(el) 在element el 上执行，则 disconnectedCallback() 将被调用。
示例代码：
class MyCustomElement extends HTMLElement {
// ... 其他生命周期方法
disconnectedCallback() {
console.log('Custom element removed from page.');
}
}attributeChangedCallback
attributeChangedCallback 方法表示当自定义元素的某个属性被添加、删除或更改时，将触发此方法。我们可以利用这个方法来动态地更新元素的属性，比如通过属性选择器更新样式。
示例代码：
class MyCustomElement extends HTMLElement {
// ... 其他生命周期方法
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Custom element's ${name} attribute has changed.`);
}
}adoptedCallback
adoptedCallback 方法表示自定义元素从旧的 document 中移动到新的 document时发生（例如，当在一个iframe中移动）。我们可以利用这个方法从旧文档中撤回了一些功能，并将其应用于新的文档。
示例代码：
class MyCustomElement extends HTMLElement {
// ... 其他生命周期方法
adoptedCallback() {
console.log('Custom element moved to new document.');
}
}总结
Custom Elements 的生命周期提供了一系列事件机制，支持组件的渲染、初始化、挂载和销毁等各个阶段。通过对这些事件的灵活控制，我们可以更好地管理和组织代码，达到提高代码复用性和减少前端耦合度的目标。在开发过程中，我们需要根据实际需要和业务场景，有针对性地运用每一个生命周期方法，以便更好地构建高效优秀的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d290b48841e9894b7553a