Eight hook functions in the Vue life cycle camera

1. beforeCreate and created functions

BeforeCreate and created are divided by initialization: data monitoring and data proxy.

Before executing beforeCreate(), the life cycle and time will be initialized, but the data proxy has not started yet.

(1)beforeCreate()： The contents of the beforeCreate function are executed before initializing data monitoring and data proxy. At this time, the data in data and the methods in methods cannot be accessed through Vm.

(2)created()： Executes the contents of the beforeCreate function after initializing data monitoring and data proxy. At this point, you can access the data in data and the methods configured in methods through vm

There is another step before the data is mounted, which is the process of Vue parsing the template (generating a virtual DOM). The page cannot display the parsed content yet.

2. beforeMount and mounted functions

(3)beforeMount()： Executed after Vue completes the generation of the virtual DOM and before converting the virtual DOM to the real DOM. At this point, the page presents a DOM structure that has not been compiled by Vue, and all operations on the DOM will ultimately fail.

(4)mounted()： Executed after the virtual DOM is converted to the real DOM. At this point, the page presents the DOM compiled by Vue, and all operations on the DOM are valid (avoid as much as possible). The initialization process ends here. Generally, the following initialization operations are performed here: starting the timer, sending network requests, subscribing to messages, binding custom events, etc.

3. beforeUpdate and updated functions

(5)beforeUpdate()： When the data changes, a new virtual DOM is generated, which is then compared with the old virtual DOM and executed before the page update (Model-》View) process is finally completed. At this point, the data is new, but the page is old, that is, the page is not yet synchronized with the data.

(6)updated()： When the data changes, a new virtual DOM is generated, which is then compared with the old virtual DOM and executed after the page update (Model-》View) process is completed. At this point, the data is new and the page is also new, that is, the page and data are synchronized

4. beforeDestroy and destroyed functions

(7)beforeDestroy()： Executed before removing data monitoring, child elements, and event listening. At this point, 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 timers, unsubscribing messages, unbinding custom events and other finishing operations are performed. At this point everything is accessible, but the content on the page will not change when the operation is performed

(8)destroyed()： Executed after data monitoring, child elements, and event listening are removed. Unbind the data, methods, instructions, etc. on the page.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!