“This is the 28th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Life Cycle

The entire phase of a component from creation -> run -> destruction, with emphasis on a time period.

Lifecycle functions: Built-in functions provided by the VUE framework are automatically executed in sequence along with the lifecycle of components. These are special named functions that Vue calls for us in the Nick of time.

The this in the lifecycle function refers to the VM or component instance object

Component creation phase new Vue()

beforeCreate –> created –> beforeMount –> mounted

    • BeforeCreate () at this point, the props, data, and methods of the component have not been created and are not available.
    • The props/data/methods for the create() component have been created and are all available. But the template structure of the component is not yet generated (DOM manipulation is not possible)!!

The create function is very important, and is usually used to make Ajax requests inside create() (using methods to request server data and dump the data into data for template rendering).

    • BeforeMount () will render the HTML structure (virtual DOM) compiled in memory into the browser (converted to real DOM) without the current component’s DOM structure in the browser (the DOM on the page is not vUE compiled)

Manipulating the DOM in this function is then overwritten when the real DOM converted from the virtual DOM is inserted into the page, so the operation is invalidated

    • Mounted The mounted function contains the DOM structure of the current component. In this case, you can locate the COMPONENT’s DOM element in the mounted function.

Mounted () after Vue has parsed the template and placed the original real DOM element on the page.

When the virtual DOM is converted into the real DOM, vUE stores the virtual DOM in vm.el for subsequent data update. When the new virtual DOM is compared with the old virtual DOM, if some elements or nodes can be reused, Vue directly stores the virtual DOM in vM. el for subsequent data update. When the new virtual DOM is compared with the old virtual DOM, if some elements or nodes can be reused, vUE is directly in vm.el. When the new virtual DOM is compared with the old virtual DOM for subsequent data update, if some elements or nodes can be reused, VUE directly obtains corresponding nodes in VM. el

At this point, the initialization process is over, which is generally carried out here: start timer, send network request, subscribe message, bind custom events and other initialization operations. So what we’re going to do in the first place is going to be written in this function

Component run phase

beforeUpdate –> updated

    • BeforeUpdate () This function is triggered when the data in the data node changes. At this point the data is updated but the template structure of the component has not been re-rendered (the page has not been synchronized with the data)
    • Updated () At this point, the component’s DOM structure is re-rendered

When data changes, the code for DOM manipulation must be written to the updated() lifecycle function in order to manipulate the latest DOM structure

Note: The two functions in this phase are executed at least 0 times (the data does not change) and at most countless times

Component destruction phase

beforeDestroy –> destroyed

The call to vm.$destroy() completely destroys an instance, cleans its connections to other instances, unties all of its instructions and custom events, but the native DOM events are still valid. The beforeDestroy and Destroyed hooks are triggered

    • BeforeDestroy () Important! At this point, all data, methods, instructions, etc. in the VM are available, and the destruction process is about to be executed. But all changes to the data no longer trigger beforeUpdate() and updated()! . This function is typically used to close timers, unsubscribe messages, unbind custom events, and so on

Webpack compiles main.js, the whole project starts from main.js, And WebPack finds app.vue, which in turn finds other components nested in app.vue. Once the package is complete, WebPack generates two JS files and puts them in index.html

Note: When writing periodic functions, write at the same level as the methods node

Life cycle summary

Postscript tail

This is the end of this article. I am Zeus👩🏻🚀, an Internet low-level assembler. See you in the next article! 📖