自从 Web Components 技术被提出，前端开发变得更加灵活和可维护。其中 Custom Elements 是 Web Components 的一部分，能够让开发者更加轻松地创建自定义的 HTML 元素，但是 Custom Elements 和 Web Component 生命周期的区别是什么呢？今天我们就来详细探讨一下它们之间的区别。
Custom Elements 生命周期
Custom Elements 是一种可以创建自定义 HTML 元素的技术，它有着自己独特的生命周期：
constructor()
当 Custom Element 被创建时，它的构造函数会被调用。在构造函数中，你可以完成元素的一些初始设置，例如添加内部的 DOM 结构，绑定事件等。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --------- ----- ------ - ------------------------ --------- ----- --- - ------------------------------ ------------------------ -- ---- ------------------------------ -- -- - ------------------ --------- --- - -展开代码
connectedCallback()
当 Custom Element 被插入到文档中时，它的 connectedCallback 生命周期函数会被调用。在这个函数中，你可以完成元素的一些初始化工作。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ------------------- - -- ----- ---------------------- --- ---- -------- ---- --- ------- - -展开代码
disconnectedCallback()
当 Custom Element 从文档中移除时，它的 disconnectedCallback 生命周期函数会被调用。在这个函数中，你可以清理元素的一些工作，例如取消一些事件绑定等。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ---------------------- - -- ---- ---------------------- --- ---- ------- ---- --- ------- - -展开代码
attributeChangedCallback()
当 Custom Element 的属性值发生变化时，它的 attributeChangedCallback 生命周期函数会被调用。在这个函数中，你可以根据不同的属性做出不同的反应。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ------ --- -------------------- - ------ --------- - ------------------------------ --------- --------- - -- ------------ -- ----- --- ------- - ---------------------- ------- ------- ---- ----------- -- -------------- - - -展开代码
Web Component 生命周期
Web Component 是由 Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports 组成的技术集合。因此，Web Component 也有着独特的生命周期。
createdCallback()
当 Web Component 被创建时，它的 createdCallback 生命周期函数会被调用。在这个函数中，你可以完成元素的一些初始化工作。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ----------------- - -- ----- ---------------------- --- ---- ----------- - -展开代码
attachedCallback()
当 Web Component 被插入到文档中时，它的 attachedCallback 生命周期函数会被调用。在这个函数中，你可以完成元素的一些初始化工作。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ------------------ - -- ----- ---------------------- --- ---- -------- ---- --- ------------ - -展开代码
detachedCallback()
当 Web Component 从文档中移除时，它的 detachedCallback 生命周期函数会被调用。在这个函数中，你可以清理元素的一些工作，例如取消一些事件绑定等。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ------------------ - -- ---- ---------------------- --- ---- ------- ---- --- ------------ - -展开代码
attributeChangedCallback()
当 Web Component 的属性值发生变化时，它的 attributeChangedCallback 生命周期函数会被调用。在这个函数中，你可以根据不同的属性做出不同的反应。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ------ --- -------------------- - ------ --------- - ------------------------------ --------- --------- - -- ------------ -- ----- --- ------- - ---------------------- ------- ------- ---- ----------- -- -------------- - - -展开代码
区别
可以看出，Custom Elements 生命周期和 Web Component 生命周期之间并没有太大的区别，只是名称不同而已。
Custom Elements 生命周期：
- constructor()
- connectedCallback()
- disconnectedCallback()
- attributeChangedCallback()
Web Component 生命周期：
- createdCallback()
- attachedCallback()
- detachedCallback()
- attributeChangedCallback()
学习和指导意义
对于开发者来说，了解 Custom Elements 和 Web Component 生命周期的区别是很有意义的。首先，它可以让你更加清楚地了解 Web Components 技术的使用和原理。其次，它可以帮助你更加深入地理解前端开发的本质，以及如何构建更好的、有趣的网站。
最后，我们来看一下一个完整的 Custom Element 和 Web Component 的代码示例：
-- -------------------- ---- ------- -- ------ ------- ----- ------------- ------- ----------- - ------------- - -------- -- --------- ----- ------ - ------------------------ --------- ----- --- - ------------------------------ ------------------------ -- ---- ------------------------------ -- -- - ------------------ --------- --- - ------------------- - -------------------------- --- ---- -------- ---- --- ------- - ---------------------- - -------------------------- --- ---- ------- ---- --- ------- - ------ --- -------------------- - ------ --------- - ------------------------------ --------- --------- - -- ----- --- ------- - ---------------------- ------- ------- ---- ----------- -- -------------- - - - -- --- --------- ----- ------------ ------- ----------- - ------------- - -------- ----- ------ - ------------------------ --------- ----- -------- - --------------------------------------- ----- -------- - --------------------------------- ----------------------------- ------------------------------ -- -- - ------------------ --------- --- - ------------------- - ------------------------- --- ---- -------- ---- --- ------------ - ------------------ - ------------------------- --- ---- ------- ---- --- ------------ - ------ --- -------------------- - ------ --------- - ------------------------------ --------- --------- - -- ----- --- ------- - ---------------------- ------- ------- ---- ----------- -- -------------- - - - ---------------------------------------------- --------------- --------------------------------------------- --------------展开代码
这些代码定义了一个 Custom Element 和一个 Web Component。首先，我们创建了一个 Custom Element，它的构造函数中创建了一个内部的 div 元素，还绑定了一个 click 事件。在 ConnectedCallback() 中，我们简单地记录了插入事件，而在 DisconnectedCallback() 中记录了移除事件。最后，为了让 Custom Element 监视 name 属性改变，我们使用了 observedAttributes() 和 attributeChangedCallback()。
接着，我们创建了一个 Web Component，它的构造函数中使用了 shadow DOM、HTML Templates 和 HTML Imports。在 ConnectedCallback() 中，我们记录了插入事件，而在 DetachedCallback() 中记录了移除事件。最后，为了让 Web Component 监视 name 属性的改变，我们也使用了 observedAttributes() 和 attributeChangedCallback()。
最后，我们使用 window.customElements.define() 函数来为这些元素进行注册，并且将它们添加到页面上。这个例子可以帮助你更好地理解 Custom Elements 和 Web Components 生命周期，以及它们之间的区别。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9218be46428fe9e02c274
