当前位置:网站首页>Yyds dry goods inventory web components series (VII) -- life cycle of custom components
Yyds dry goods inventory web components series (VII) -- life cycle of custom components
2022-07-06 03:57:00 【Programming samadhi】
Preface
What is meant by ” Life cycle “? seeing the name of a thing one thinks of its function , The life cycle refers to the whole process of an object from its birth to its death , Of course , The specific stage division of the life cycle of different objects may be different .
When we use the front-end component framework , We all know that each component has its own life cycle , After defining the component life cycle , Developers can execute different code logic in different life cycles of components , So as to achieve the role of management components .
In order to make Custom Elements More flexible in use , It also has the ” Life cycle “ Callback function , It allows developers to define methods that can be executed at different stages of the component's life .
Custom Elements Life cycle division
stay Custom Elements In the constructor of , You can specify multiple different callback functions , They will be called at different times of the element's life :
connectedCallback
: When Custom Elements First inserted into document DOM when , Called .disconnectedCallback
: When Custom Elements From the document DOM When deleted in , Called .adoptedCallback
: When Custom Elements When moved to a new document , Called .attributeChangedCallback
: When Custom Elements increase 、 Delete 、 When modifying its properties , Called .
Be careful : The lifecycle callback function of a custom element is used in its constructor .
Use of lifecycle callback function
First look at the effect :
What needs to be noted here is :adoptedCallback The callback is only available when the custom element is moved to a new document ( It's usually iframe) It will be triggered only when it is in .
The code is as follows :
Conclusion
That's all Custom Elements A simple example of using the lifecycle callback function , I hope it helped you !
Custom Elements In the callback function of ,adoptedCallback There are few usage scenarios , This needs attention .
- ~
- The end of this paper , Thank you for reading !
~
Learn interesting knowledge , Make interesting friends , Create interesting souls !
Hello everyone , I am a 〖 The samadhi of programming 〗 The author of Hermit King , My official account is 『 The samadhi of programming 』, Welcome to your attention , I hope you can give me more advice !
边栏推荐
- JVM的手术刀式剖析——一文带你窥探JVM的秘密
- How do we make money in agriculture, rural areas and farmers? 100% for reference
- Security xxE vulnerability recurrence (XXe Lab)
- Basic concepts of LTE user experience
- Database, relational database and NoSQL non relational database
- Facebook等大厂超十亿用户数据遭泄露,早该关注DID了
- Mathematical modeling regression analysis relationship between variables
- Développement d'un module d'élimination des bavardages à clé basé sur la FPGA
- 51nod 1130 n factorial length V2 (Stirling approximation)
- 简述C语言中的符号和链接库
猜你喜欢
Overview of super-resolution reconstruction of remote sensing images
Align items and align content in flex layout
UDP reliable transport protocol (quic)
Maxay paper latex template description
C mouse event and keyboard event of C (XXVIII)
math_极限&微分&导数&微商/对数函数的导函数推导(导数定义极限法)/指数函数求导公式推导(反函数求导法则/对数求导法)
Remote Sensing Image Super-resolution and Object Detection: Benchmark and State of the Art
Ethernet port &arm & MOS &push-pull open drain &up and down &high and low sides &time domain and frequency domain Fourier
Factors affecting user perception
AcWing 243. A simple integer problem 2 (tree array interval modification interval query)
随机推荐
Serial port-rs232-rs485-ttl
Overview of super-resolution reconstruction of remote sensing images
Ks003 mall system based on JSP and Servlet
asp. Core is compatible with both JWT authentication and cookies authentication
Mapping between QoE and KQI
[practice] mathematics in lottery
1. New project
MySQL reads missing data from a table in a continuous period of time
[Massey] Massey font format and typesetting requirements
Mathematical modeling regression analysis relationship between variables
【可调延时网络】基于FPGA的可调延时网络系统verilog开发
记一次excel XXE漏洞
Remote Sensing Image Super-resolution and Object Detection: Benchmark and State of the Art
UDP reliable transport protocol (quic)
《2022年中国银行业RPA供应商实力矩阵分析》研究报告正式启动
STC8H开发(十二): I2C驱动AT24C08,AT24C32系列EEPROM存储
2.1 rtthread pin device details
A brief introduction to symbols and link libraries in C language
[prediction model] difference method model
Record the pit of NETCORE's memory surge