Detailed explanation of the life cycle function of vue, the usage scenarios of the life cycle method in the front-end and back-end separation system, including the package meeting

If you don't understand, you can find me directly

The life cycle of Vue

Vue instance life cycle ==> java object life cycle (initialization phase, operation phase destruction phase) life cycle hook ==> life cycle function

Vue instance automatically triggers a series of functions from creation to destruction ==> Vue life cycle functions (hooks)

The life cycle of Vue is divided into three stages:

1. Initialization phase

1、Init Events&Lifecycle

Vue initialization has started at this time. At this time, the object injection of the Vue instance itself is completed, and the internal use of related events and corresponding life cycle function initialization

2、beforeCreae

The first life cycle function, when this method is executed, the vue instance just completes internal events and life cycle functions

const app = new Vue({
    
    
    el: "#app",//用来给Vue实例定义一个作用范围
    data: {
    
    //用来给Vue实例定义一些相关的数据
        msg: "Vue的生命周期",
    },
    methods:{
    
    },
    computed:{
    
    },
    // 第一个执行的生命周期函数
    beforeCreate(){
    
    
        console.log("beforeCreate()方法调用 "+this.msg);
    }
});

3、Init injections & reactivity

Data injection, and grammar verification, the data and method we wrote starts to inject

4、created

The second execution life cycle function, note: at this time when the function is executed, the vue instance has completed the initialization of the custom data, method, computed attributes, and the syntax validation

created(){
    
    
    console.log("created:"+this.msg);
}

5、beforeMount

​ The third life cycle function, note: when this function is executed, the vue instance just compiles the html pointed to by the el attribute into a vue template.

​ At this time, the template content rendering has not been completed, { {msg}} has not been replaced

6、mounted

​ The fourth execution life cycle function Note: When this function is executed, the vue instance will render the data data into the compiled template,
and form a virtual dom, replacing el to execute dom

2. Operation phase

1、beforeUpdate

The fifth execution of the life cycle function Note: When this function is executed, the data in the vue instance changes,
but the data in the page is still the original data

2、update

Note for the sixth execution of the life cycle function: When this function is executed, the data data in the vue instance is consistent with the data in the page

3. Destruction stage

1、beforeDestory

The seventh life cycle function to be executed Note: When this function is executed, the vue instance just starts to destroy events and child components

listener monitoring mechanism

2、destroyed

The eighth implementation of the life cycle function Note: When this function is executed, all the data events childcomponent monitoring mechanism on the vue instance... All are cleared (including the two-way data binding mechanism, as shown below)

4. Use scenarios:

If it is a front-end and back-end separation system, a get request occurs in the front-end axios to get the data from the back-end, and initialize the data rendering:

We should make a request in the created life cycle function method beforeMount , and the mounted life cycle function method can also

But created is the best time, because when the created method is executed, other data has already been rendered, but it is best not to choose mounted , because mounted will first render the data once, and then render the data with the response. Once, it will cause two calls to the virtual Dom