Shulou(Shulou.com)06/02 Report--

Vue life cycle of the eight hook function camera is like, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

1. BeforeCreate and created functions

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

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

(1) beforeCreate (): executes the contents of the beforeCreate function before initializing data monitoring and data proxies. At this point, data in data and methods in methods cannot be accessed through Vm

(2) created (): executes the contents of the beforeCreate function after initializing data monitoring and data proxies. At this point, the data in data and the methods configured in methods can be accessed through vm.

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

2. BeforeMount and mounted functions

(3) beforeMount (): executes after the 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 DOM ultimately do not work.

(4) mounted (): executes after converting a virtual DOM to a real DOM. At this point, the DOM compiled by Vue is rendered on the page, which is valid for DOM operations (avoided as much as possible). At the end of the initialization process, initialization operations are generally carried out here: start timer, send network requests, subscribe messages, bind custom events, and so on.

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 Model- "View" is 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, then compared with the old virtual DOM, and finally the process of Model- "View" is completed. At this point, the data is new and the page is new, that is, the page and the data are synchronized.

4. BeforeDestroy and destroyed functions

(7) beforeDestroy (): executes before removing data monitoring, child elements, and event listening. At this point, all data, methods, instructions, and so on in the vm are available, and the termination process is to be performed immediately, usually at this stage: closing timer, unsubscribing messages, unbinding custom events and other closing operations. At this point, everything is accessible, but if you perform the action, the content on the page will not change.

(8) destroyed (): executes after removing data monitoring, child elements, and event listeners. Unbind from data, methods, instructions, and so on on the page.

After reading the above, have you mastered the method of the eight hook function cameras in the Vue life cycle? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.