Custom Elements 的生命周期及其对应钩子函数

什么是 Custom Elements

Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 标签，并在页面中使用它们。Custom Elements 由两部分组成：定义和使用。定义就是开发者创建一个自定义元素的过程，使用就是把这个自定义元素使用在页面中的过程。

自定义元素的生命周期

自定义元素的生命周期包括以下几个阶段：

1. 注册阶段：定义自定义元素并注册它，定义可以通过 JavaScript 的类来实现，注册可以通过 customElements.define() 方法来实现。

2. 构造阶段：当自定义元素被实例化时，会进入构造阶段。在这个阶段，我们可以进行一些初始化操作，比如添加事件监听器、初始化属性等。

3. 连接阶段：在自定义元素被添加到文档中时，会进入连接阶段。在这个阶段，我们可以进行一些 DOM 操作，比如添加子元素。

4. 断开阶段：当自定义元素从文档中被移除时，会进入断开阶段。在这个阶段，我们可以进行一些清理操作，比如移除事件监听器。

5. 观察阶段：在自定义元素的属性值发生变化时，会进入观察阶段。在这个阶段，我们可以对属性值进行处理，比如根据属性值更新元素的样式。

6. 卸载阶段：当自定义元素被销毁时，会进入卸载阶段。在这个阶段，我们可以进行一些资源释放操作，比如清空定时器。

钩子函数

在自定义元素的生命周期中，我们可以通过一些钩子函数来实现对应的操作。下面是钩子函数的详细说明：

1. constructor()：构造函数，用于初始化自定义元素。在这个函数中，我们可以添加事件监听器、初始化属性等。

2. connectedCallback()：连接回调函数，用于在自定义元素被添加到文档中时进行一些 DOM 操作，比如添加子元素。

3. disconnectedCallback()：断开回调函数，用于在自定义元素从文档中被移除时进行一些清理操作，比如移除事件监听器。

4. attributeChangedCallback()：属性变化回调函数，用于在自定义元素的属性值发生变化时进行处理，比如根据属性值更新元素的样式。

5. adoptedCallback()：采用回调函数，用于在自定义元素被移动到新的文档时进行一些操作。

下面是一个示例代码，演示了如何使用 Custom Elements 和钩子函数来创建一个自定义元素。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Element Demo</title>
</head>
<body>
  <my-element></my-element>

  <script>
    class MyElement extends HTMLElement {
      constructor() {
        super();

        console.log('constructor');
      }

      connectedCallback() {
        console.log('connectedCallback');

        this.innerHTML = '<h1>Hello, World!</h1>';
      }

      disconnectedCallback() {
        console.log('disconnectedCallback');
      }

      attributeChangedCallback(name, oldValue, newValue) {
        console.log('attributeChangedCallback', name, oldValue, newValue);

        if (name === 'name') {
          this.innerHTML = `<h1>Hello, ${newValue}!</h1>`;
        }
      }
    }

    customElements.define('my-element', MyElement);
  </script>
</body>
</html>

在这个示例代码中，我们定义了一个名为 MyElement 的自定义元素，并在其中实现了 constructor()、connectedCallback()、disconnectedCallback() 和 attributeChangedCallback() 四个钩子函数。当这个自定义元素被添加到文档中时，会输出 constructor 和 connectedCallback，并在其中添加一个标题元素；当这个自定义元素被移除时，会输出 disconnectedCallback；当这个自定义元素的 name 属性值发生变化时，会输出 attributeChangedCallback 并根据属性值更新元素的内容。

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