Web Components 系列 (七) ——自定义组件的生命周期
前言
何谓”生命周期“?顾名思义,生命周期就是指一个物体从产生前到消亡后的整个过程,当然,不同物体的生命周期具体阶段划分可能不太一样。
我们在使用前端组件框架的时候,都知道每个组件都有各自的生命周期,明确了组件生命周期后,开发者就可以在组件的不同生命周期执行不同的代码逻辑,从而达到管理组件的作用。
为了使 Custom Elements 在使用上更加灵活,它也有”生命周期“回调函数,可以让开发者定义好在组件不同生命时期可以被执行的方法。
Custom Elements 生命周期划分
在 Custom Elements 的构造函数中,可以指定多个不同的回调函数,它们将会在元素的不同生命时期被调用:
connectedCallback
:当 Custom Elements 首次被插入文档 DOM 时,被调用。disconnectedCallback
:当 Custom Elements 从文档 DOM 中删除时,被调用。adoptedCallback
:当 Custom Elements 被移动到新的文档时,被调用。attributeChangedCallback
: 当 Custom Elements 增加、删除、修改自身属性时,被调用。
注意:自定义元素的生命周期回调函数是被使用在它的构造函数中的。
生命周期回调函数的使用
首先看一下效果:
这里需要注意的是:adoptedCallback 回调只有在将自定义元素移动到新文档(一般是 iframe)中时才会被触发。
代码如下:
结束语
以上就是 Custom Elements 生命周期回调函数的简单使用示例,希望能对你有所帮助!
Custom Elements 的回调函数中,adoptedCallback 的使用场景较少,这个需要注意。
~
~ 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
版权声明: 本文为 InfoQ 作者【编程三昧】的原创文章。
原文链接:【http://xie.infoq.cn/article/4778a2ea752bfb874d3491cde】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论