1. What is the life cycle? What is its function?
Each vue instance has to go through a series of initialization processes when creating - for example, you need to set up listening, compile templates, mount the instance to the dom and update the dom when the data changes, etc. At the same time, some life cycle hook functions will be run, which give users the opportunity to add code at different stages. For example: if some plug-ins are needed to operate the dom node, if you want to pop up the ad after page rendering, then we can do it in mounted as soon as possible.
2. What hooks will trigger when the page is loaded for the first time?
beforeCreate created beforeMount mounted
3. Briefly describe which scenario each cycle applies to?
beforeCreate: After new instance, there are only some default life hooks and default events, and other things have not been created yet. When the beforeCreate life cycle is executed, the data in data and methods have not been initialized yet. You cannot use the data in data and methods in this stage.
createdThe data in data and methods have been initialized. If the methods in methods and operations in data are called at the earliest stage.
beforeMount:Execute this hook. The template has been compiled in memory, but has not been mounted to the page yet. The page is still old at this time
mounted:When executing this hook, it means that the vue instance has been initialized. At this time, the component has left the creation stage and entered the running stage. If some plug-ins are required to operate the dom node, we can then install it in the first place.
beforeUpdate:When executing this hook, the page is still old, the data in data is updated, but the data of the page and the data in data have not been synchronized yet.
updated:The page and data in data are kept in sync, and the page is new.
beforeDestory: The vue instance begins to enter the destruction stage from the run stage. At this time, data and methods, instructions, filters... are all available and have not been truly destroyed.
destoryed:At this time, data and methods, instructions, filters... are all unavailable, and the components have been destroyed.
The difference between mounted
createdCalled before the template is rendered into html, that is, certain attribute values are usually initialized and then rendered into a view.
mountedCalled after the template is rendered into html, usually when the page is initialized and then the dom node is operated.
In which life cycle is the data obtained?
generallycreated/beforeMount/mountedIt will be all right
Summarize
That’s all for this article. I hope it can help you and I hope you can pay more attention to more of my content!