1. BeforeCreate and created functions
BeforeCreate and created are initialized: data monitoring and data proxy as the dividing line.
BeforeCreate() is executed, the life cycle and time will be initialized, but the data proxy has not started yet.
(1)beforeCreate()：Execute the contents of the beforeCreate function before initializing the data monitoring and data proxy. At this time, the data in data and methods in methods cannot be accessed through VM
(2)created()：After initializing data monitoring and data proxy, the contents in the beforeCreate function are executed. At this time, you can access the data in data and the methods configured in methods through vm
There is another step before data mount, which is the process of Vue parsing templates (generating virtual DOM). The page cannot display the parsed content.
2. BeforeMount and mounted functions
(3)beforeMount()：After Vue completes the generation of the virtual DOM, it is executed before converting the virtual DOM to the real DOM. At this time, the page presents a DOM structure that is not compiled by Vue, and all operations on the DOM will not work in the end.
(4)mounted()：Execute after converting the virtual DOM to the real DOM. At this time, the page is presented with a Vue compiled DOM, and all operations on the DOM are valid (avoid as much as possible). At this point, the initialization process ends, and it is generally performed here: enable the timer, send network requests, subscribe to messages, bind custom events, etc.
3. BeforeUpdate and updated functions
(5)beforeUpdate()：When the data changes, a new virtual DOM is generated, then compared with the old virtual DOM, and finally the process of page update (Model->View) is executed before completing. At this time, the data is new, but the page is old, that is, the page has not been synchronized with the data yet
(6)updated()：When the data changes, a new virtual DOM is generated, then compared with the old virtual DOM, and finally the page update (Model->View) process is completed. At this time, the data is new and the page is new, that is, the page and the data are kept in sync
4. BeforeDestroy and destroyed functions
(7)beforeDestroy()：Execute before removing data monitoring, child elements, event listening. At this time, all data, methods, instructions, etc. in the vm are in an available state, and the destruction process is about to be executed. Generally, at this stage: closing the timer, unsubscribe to messages, unbinding custom events, etc. At this time everything is accessible, but if the content on the page will not change after the operation, the operation will be performed.
(8)destroyed()：Execute after data monitoring, child elements, event listening is removed. Unbind with data, methods, instructions, etc. on the page.
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!