Custom Elements 生命周期详解-JavaScript中文网-JavaScript教程资源分享门户

Web 组件的兴起，有助于提高 Web 开发的灵活性和可复用性。Custom Elements（自定义元素）是一种 Web 组件标准，它允许我们创建自定义元素，使特定的 HTML 内容具有逻辑和样式。Custom Elements 生命周期包括一系列事件和方法，掌握这些生命周期对于创建高质量的 Web 组件至关重要。

什么是 Custom Elements 生命周期

Custom Elements 生命周期是指当我们创建一个自定义元素时，这个元素所遵循的一系列事件和方法。这些事件和方法掌握其顺序和使用方法，是我们创建高质量 Web 组件的基础。

生命周期按顺序分析

constructor()

这个方法是自定义元素的第一个方法，用于在元素创建时进行初始化。如果你需要向你的自定义元素添加属性或设置其他默认值，可以在这里完成。

-- -------------------- ---- -------
----- --------------- ------- ----------- -
  ------------- -
    --------
    -- --- ------- ----------
    ------------------------- --------
    -- --- ----- --------
    ------------------------------ --------------
  -

  --------- -
    -----------------------
  -
-

------------------------------------------ -----------------

connectedCallback()

当自定义元素被添加到文档中时，该方法将被调用。这是自定义元素和其他 DOM 元素之间交互的起点。

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    console.log("connected to the DOM");
  }
}

customElements.define("my-custom-element", MyCustomElement);

disconnectedCallback()

当自定义元素从文档中删除时，该方法将被调用。在此可以进行清理或销毁操作。

class MyCustomElement extends HTMLElement {
  disconnectedCallback() {
    console.log("disconnected from the DOM");
  }
}

customElements.define("my-custom-element", MyCustomElement);

attributeChangedCallback()

当自定义元素属性的值发生变化时，该方法将被调用。我们可以在该方法中检查属性的值，从而根据属性值的更改来更新组件状态。

-- -------------------- ---- -------
----- --------------- ------- ----------- -
  ------ --- -------------------- -
    ------ ---------
  -

  ------------------------------ --------- --------- -
    ---------------------- --------- ------- ---- ------------- -- ----------------
  -
-

------------------------------------------ -----------------

adoptedCallback()

当自定义元素从一个文档转移到另一个文档时，该方法将被调用。该方法很少被使用，只有在使用 iframe 等特殊技术时才会遇到。
```
class MyCustomElement extends HTMLElement {
  adoptedCallback() {
    console.log("adopted to new document");
  }
}

customElements.define("my-custom-element", MyCustomElement);
```

生命周期执行顺序

Custom Elements 生命周期中的方法执行顺序如下：

constructor()
connectedCallback()
attributeChangedCallback()
disconnectedCallback()
adoptedCallback()

当自定义元素被添加到文档中时，会依次执行 constructor() 和 connectedCallback()。当自定义元素属性的值发生变化时，会依次执行 attributeChangedCallback()。当自定义元素从文档中删除时，会执行 disconnectedCallback()。当自定义元素从一个文档转移到另一个文档时，会执行 adoptedCallback()。

总结

Custom Elements 生命周期为我们在 Web 组件中添加逻辑和状态提供了广泛的支持。掌握这些生命周期，可以帮助我们编写更高质量的组件，提高 Web 应用程序的可重用性和可维护性。

参考代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ------------- -------- -------------
  -------
  ------
    ---------------------------------------
    --------
      -- ------ ------ -------
      ----- --------------- ------- ----------- -
        ------------- -
          --------
          -- --- ------- ----------
          ------------------------- --------
          -- --- ----- --------
          ------------------------------ --------------
        -

        --------- -
          -----------------------
        -

        ------------------- -
          ---------------------- -- --- ------
        -

        ---------------------- -
          ------------------------- ---- --- ------
        -

        ----------------- -
          -------------------- -- --- -----------
        -

        ------------------------------ --------- --------- -
          ------------
            ---------- --------- ------- ---- ------------- -- --------------
          --
        -
      -

      ------------------------------------------ -----------------
    ---------
  -------
-------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/653156517d4982a6eb2fccd1