Web Components系列(七) ——自定义组件的生命周期

最新推荐文章于 2024-01-24 01:17:21 发布

编程三昧

最新推荐文章于 2024-01-24 01:17:21 发布

阅读量1.4k

点赞数 1

分类专栏： HTML 文章标签：前端 javascript css3 组件化

本文链接：https://blog.csdn.net/qq_37718797/article/details/122915602

版权

本文介绍了Web Components中的Custom Elements生命周期，包括：connectedCallback、disconnectedCallback、attributeChangedCallback等回调函数的调用时机。通过示例展示了如何在不同生命周期阶段执行特定代码，特别提到adoptedCallback在元素移动到新文档时的角色。了解这些生命周期有助于更好地管理和使用自定义组件。

摘要由CSDN通过智能技术生成

生命周期.001

前言

何谓”生命周期“？顾名思义，生命周期就是指一个物体从产生前到消亡后的整个过程，当然，不同物体的生命周期具体阶段划分可能不太一样。

我们在使用前端组件框架的时候，都知道每个组件都有各自的生命周期，明确了组件生命周期后，开发者就可以在组件的不同生命周期执行不同的代码逻辑，从而达到管理组件的作用。

为了使 Custom Elements 在使用上更加灵活，它也有”生命周期“回调函数，可以让开发者定义好在组件不同生命时期可以被执行的方法。

Custom Elements 生命周期划分

在 Custom Elements 的构造函数中，可以指定多个不同的回调函数，它们将会在元素的不同生命时期被调用：

connectedCallback：当 Custom Elements首次被插入文档DOM时，被调用。
disconnectedCallback：当 Custom Elements 从文档DOM中删除时，被调用。
adoptedCallback：当 Custom Elements 被移动到新的文档时，被调用。
attributeChangedCallback: 当 Custom Elements 增加、删除、修改自身属性时，被调用。

注意：自定义元素的生命周期回调函数是被使用在它的构造函数中的。

生命周期回调函数的使用

首先看一下效果：

2022-02-12 23.43.06

这里需要注意的是：adoptedCallback 回调只有在将自定义元素移动到新文档（一般是 iframe）中时才会被触发。

代码如下：

<!--index.html-->
<head>
    <style>
        body {
     
            padding: 50px;
        }

        custom-square {
     
            margin: 15px;
        }

        iframe {
     
            width: 100%;
            height: 250px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <h1>Custom Elements 生命周期</h1>
    <div>
        <button class="add">追加 Square 到 DOM</button>
        <button class="update">改变 Square 的属性</button>
        <button class="remove">移除 Square 元素</button>
        <button class="move">移动 Square 到 Iframe</button>