Custom Elements 中为什么不应该使用 created 等方法
在 Web Components 中的 Custom Elements，我们通常会使用 created, connectedCallback, disconnectedCallback 等生命周期钩子方法。然而，在某些场景下，使用这些方法可能会导致不必要的问题。本文将介绍 Custom Elements 中不应该使用 created 等方法的原因，并提供一些解决方案和指导意义。
created 方法的问题
created 方法是 Custom Elements V0 规范中定义的一个钩子方法，用于在元素被实例化后执行一次。这个方法通常被用来初始化元素的状态，例如添加子元素、设置属性、添加事件监听器等操作。
然而，在 V1 规范中，created 方法已经被废弃，因为它存在以下一些问题：
created 方法只会在实例化时执行一次，无法处理动态改变的属性和子元素；
created 方法与渐进增强和懒加载的思想不兼容；
created 方法会导致多个实例之间的数据共享和污染问题。
为了解决这些问题，V1 规范引入了 constructor 构造函数和 connectedCallback 方法，它们能更好地处理 Custom Elements 的初始化和卸载过程。
下面是一个示例代码，说明了 created 方法存在的实际问题：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ----------------
-------
------
-------------------------
--------
--- -------------- - ------------------------------------ -
---------------- -
------ ---------- -
--- - - ----------------------------
------------- - ------- --------
--------------------
-
-
---
--- --------- - -------------------------------------- - ---------- -------------- ---
---------
-------
-------上面的代码定义了一个 MyElement 元素，它在 created 方法中添加了一个含有“Hello, world!”文本的 p 元素。然而，该元素只会被添加一次，因此无法处理动态添加和删除子元素的情况。
为了解决这个问题，我们可以使用 connectedCallback 方法来动态添加子元素。下面是一个使用 constructor 和 connectedCallback 的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ----------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
--- - - ----------------------------
------------- - ------- --------
--------------------
-
-
----------------------------------- -----------
---------
-------
-------上面的代码使用了 ES6 类的语法来定义 MyElement 元素，并且使用 constructor 和 connectedCallback 方法来添加子元素。这个示例代码可以处理动态添加和删除子元素的情况，并且具有更好的可读性和可维护性。
其他生命周期方法的问题
除了 created 方法外，Custom Elements 中还有 connectedCallback、disconnectedCallback 等生命周期钩子方法。这些方法也存在一些问题：
connectedCallback 方法可以被多次调用，而且无法控制调用的时机；
disconnectedCallback 方法只在元素被移除时调用，而无法处理隐藏和显示的状态变化。
为了解决这些问题，我们可以结合 MutationObserver 观察元素的生命周期变化，并在适当的时候手动调用生命周期方法。下面是一个使用 MutationObserver 的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ----------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
--- -------- - --- -------------------------------------------------
---------------------- - ----------- ----- ---------- ---- ---
-
------------------------- -
---------------------------- -- -
-- -------------- --- ------------- -
-- ------
- ---- -- -------------- --- ------------ -
-- -------
-
---
-
------------------- -
-- ------
-
---------------------- -
-- --------
-
-
----------------------------------- -----------
---------
-------
-------上面的代码使用了 MutationObserver 和 handleMutation 方法来监听元素的属性和子元素变化，并在变化发生时手动调用生命周期方法。这个示例代码可以处理更复杂的场景，例如异步加载、动态卸载等操作。
总结
在 Custom Elements 中，使用 created 等方法可能会导致一些问题，例如无法处理动态添加和删除子元素、不兼容渐进增强和懒加载等。为了解决这些问题，我们可以使用 constructor 和 connectedCallback 等生命周期方法，并结合 MutationObserver 来处理属性和子元素的动态变化。
最后，我们需要注意的是，Custom Elements 是一个新兴的 Web Components API，它的规范和实现可能会发生变化。因此，我们需要时刻关注最新的规范和实践，并根据具体的场景来选择合适的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64604ad0968c7c53b0204ef5