在前端开发中，我们经常需要在DOM结构渲染完成后对其进行操作，例如动画效果、表格排序等等。on-rendered npm包为我们提供了一种简便的方法去监听DOM渲染完成事件，并执行我们需要的操作。
安装
在终端中输入以下命令进行安装：
npm install on-rendered
使用方法
在需要监听DOM渲染完成事件的元素上添加data属性 on-rendered:
<div data-on-rendered="myFunction()">content</div>
然后在JavaScript文件中引用 on-rendered 包并绑定事件：
import onRendered from 'on-rendered'; onRendered.init();
我们也可以同时监听多个元素的渲染完成事件，只需要在每个元素上添加 data-on-rendered属性即可。
深度及指导意义
on-rendered包实际上是对 MutationObserver API的封装。在使用之前，我们首先需要理解什么是 MutationObserver。
MutationObserver
MutationObserver 是一个 JavaScript API，可以监听DOM改动并触发回调函数。调用 MutationObserver API会返回一个对象，在该对象上设置观察目标和观察选项。然后，将要调用的回调函数传递给 MutationObserver 的构造函数中。
下面是一个简单的例子，监听某个元素的子节点发生变化：
-- -------------------- ---- -------
-- ------ --- ------ ----
----- ------ - -----------------------------------
-- ------ -- -------- -- ----------------- ---- --- -------- --------
----- -------- - --- -------------------------- -- -
-------------------------- -- -
---------------------------
---
---
-- ------------- -- --- --------
----- ------ - - ---------- ---- --
-- ---- --- ------------- --- -------- -- --- ---------- --------- ------
------------------------ --------上面的代码中，我们首先选择了我们需要观察改变的元素，然后通过创建 MutationObserver 实例并传递变化的回调函数和要观察的选项。最后，将该观察者对象 observe 到我们的目标元素上。
on-rendered
on-rendered包是对 MutationObserver API的简单封装，旨在提供方便的引用和使用。我们不必自己创建并配置MutationObserver对象，只需要添加data属性data-on-rendered，然后调用 on-rendered.init() 即可轻松完成操作。
on-rendered 包为前端开发者提供了一种易于使用的方法监听DOM结构的渲染完成事件，而且它的实现方式遵循W3C Web标准，也增加了我们对Web开发的认识。
示例代码
下面的代码展示了如何使用on-rendered包监听渲染完成事件：
-- -------------------- ---- -------
--------- -----
------
------
------------------ ------------
------- --------------------------------------------------------------------
-------
------
---- --------------------------------------------- ------------
--------
-------- -------------------- -
-------------------- --- ---- ------------
-
------------------
---------
-------
-------以上示例代码中，我们在一个div元素中添加了data属性 data-on-rendered，并将一个回调函数 onRenderedCallback() 作为参数。当DOM结构渲染完成后，onRenderedCallback()函数会被调用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3e81e8991b448db08d