Web Components 是一种标准化的组件化开发方案，可以将组件封装成自定义元素，以达到复用性和可维护性。除了自定义元素，Web Components 还包括 Shadow DOM 和 HTML Templates。在使用 Web Components 开发组件时，了解其生命周期非常重要，因为生命周期的不同阶段提供了不同的钩子函数用于执行特定的逻辑。本文将详细介绍 Web Components 的生命周期及其应用。
组件的生命周期
组件的生命周期是指组件创建、更新和销毁时的一系列事件。Web Components 的生命周期分为四个阶段：创建（created）、插入（attached）、更新（attributeChangedCallback）和删除（detached）。下面将详细介绍每个阶段的生命周期钩子函数。
created
在 created 阶段，组件刚刚被创建，还没有被插入到文档中。此时可以进行一些初始化的操作，如设置组件的属性、创建事件监听器等。created 阶段的钩子函数为 connectedCallback。
示例代码：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- ------------ - -- - ------------------- - -------------- - ------------ --- ------------------- ------------------------------ -- -- - --------------- ---------------- ------- -- --------------- --------- --- - - ------------------------------------- -------------展开代码
attached
在 attached 阶段，组件已经被插入到文档中，可以进行一些与 DOM 相关的操作，如获取元素大小和位置等。可以将这些操作放在 attached 钩子函数中。
示例代码：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- - ------------------- - -------------- - ------------ --- ------------------- - ------------------ - ----- ---- - ----------------------------- ------------------------ -- ------- -- ----------- -------------- - - ------------------------------------- -------------展开代码
attributeChangedCallback
在 attributeChangedCallback 阶段，组件的属性发生了改变，可以根据属性的值进行一些状态更新的操作。Web Components 中的属性变化可以通过元素的 setAttribute 和 removeAttribute 方法进行设置和删除。attributeChangedCallback 钩子函数接收三个参数：变化的属性、变化前的值和变化后的值。
示例代码：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- ------------ - -- - ------------------- - -------------- - ------------ --- ------------------- ------------------------------ -- -- - --------------- -------------------------- -------------- --- - ---------------------------------- --------- --------- - -- --------- --- -------- - ---------------- ------- -- --- --------------- - - ------ --- -------------------- - ------ ---------- - - ------------------------------------- -------------展开代码
detached
在 detached 阶段，组件被从文档中移除，可以进行一些与 DOM 相关的清理操作。将这些操作放在 detached 钩子函数中。
示例代码：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- - ------------------- - -------------- - ------------ --- ------------------- - ------------------ - ------------------------ -- -- ------ -- --- ------------ - - ------------------------------------- -------------展开代码
Web Components 的应用
Web Components 可以帮助我们将页面拆分成独立、可重用的组件，从而实现更好的复用性和可维护性。下面给出一个示例，演示如何使用 Web Components 实现一个 tab 组件。组件的功能包括：
- 根据选项卡的状态，显示或隐藏对应的面板。
- 点击选项卡，切换选项卡的状态，并切换对应面板的显示状态。
示例代码：
<my-tabs> <my-tab label="Tab 1"> <h2>Content for Tab 1</h2> </my-tab> <my-tab label="Tab 2"> <h2>Content for Tab 2</h2> </my-tab> </my-tabs>
-- -------------------- ---- ------- ----- ------ ------- ----------- - ------------- - -------- --------------- - ----- --------- - --- ----------- - --- - ------------------- - --------- - -------------------------------------------- ----------- - ---------------------------------------------- --------------------- -- - ----------------------------- -- -- - ------------------------- --- --- ------------------------ - ------------------- - -- ---- --- ---------------- - ------- - -- ----------------- - --------------------------- - --------------- - --------- - ----- ----- - ------------------ -- ---------------------- --- -------------------------- ---------- - ----- ------------ - ----- --------------- - ---- - --------- - ----- ----- - ------------------ -- ---------------------- --- -------------------------- ---------- - ------ ------------ - ------ - - ----- ----- ------- ----------- - ------------- - -------- - ------------------- - -------------- - ------------------------------------------------- - - ----- ------- ------- ----------- - ------------- - -------- - ------------------- - ------------------ - ------- - --- -------- - ------ --------------------------- --- ----- - --- ------------- - -- ------- - ------------------ - --- --------------------------- ---- - ---- - ------------------ - ------- ------------------------------- - - - -------------------------------- -------- ------------------------------- ------- --------------------------------- ---------展开代码
在这个示例中， MyTabs 组件是 tab 组件的容器，包括了多个 MyTab 组件和 MyPanel 组件。MyTabs 组件监听 MyTab 的 click 事件，并根据 click 事件对应的 MyPanel 显示或隐藏。 MyTab 组件为选项卡提供了表示选项卡状态的 button， MyPanel 组件则表示所有的选项卡面板。
总结
Web Components 是一种标准化的组件化开发方案，具有良好的复用性和可维护性。了解 Web Components 的生命周期及其应用，能够更好地开发和维护自定义元素。本文介绍了 Web Components 的四个阶段：created、attached、attributeChangedCallback 和 detached，并给出了一个实现 tab 组件的示例。如果您想要尝试 Web Components，建议先学习 HTML、CSS 和 JavaScript 的基础知识，然后学习 Web Components 的相关规范和 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2a5b748841e9894ece6fb
