Detailed explanation of Vue3 life cycle functions and methods

1. Overview

The so-called life cycle function is a function that is automatically triggered under certain conditions.

2. Introduction to VUE3 life cycle functions

2.1 beforeCreate

Function that will be automatically executed before the VUE instance is generated

2.2 created

Function that will be automatically executed after the VUE instance is generated

2.3 beforeMount

A function that is automatically executed before the component content is rendered to the page

2.4 mounted

A function that is automatically executed after the component content is rendered to the page

2.5 beforeUpdate

Function executed before the data in data changes

2.6 updated

Function executed when the data in data changes

2.7 beforeUnmount

Function executed before the VUE instance is unbound from the element

2.8 unmounted

Function executed after the VUE instance is unbound from the element

3. Code Examples

<script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>

    // Lifecycle function: a function that will be automatically executed at a certain time const app = Vue.createApp({ // Create a Vue application instance data() {
            return {
                message : "hello"
            }
        },
        //The function that will be automatically executed before the instance is generated beforeCreate() {
            alert("beforeCreate")
        },
        //The function created() will be executed automatically after the instance is generated {
            alert("created")
        },
        // Function that is automatically executed before the component content is rendered to the page beforeMount() {
            alert("beforeMount: " + document.getElementById("myDiv").innerHTML)
        },
        // Function mounted() that is automatically executed after the component content is rendered to the page { // Automatically execute alert("mounted: " + document.getElementById("myDiv").innerHTML) after binding
        },
        // Execute beforeUpdate() before the data in data changes {
            
            alert("beforeUpdate: " + document.getElementById("myDiv").innerHTML);
        },
        // When the data in data changes, execute updated() {
            alert("updated: " + document.getElementById("myDiv").innerHTML);
        },
        // Function executed before unbinding beforeUnmount() {
            alert("beforeUnmount: " + document.getElementById("myDiv").innerHTML);
        },
        // Function executed after unbinding unmounted() {
            alert("unmounted: " + document.getElementById("myDiv").innerHTML);
        },
        // If there is no template, take the child element below the bound element as the template
        template : "<div>{{message}}</div>"
    });

    // vm is the root component of the vue application const vm = app.mount('#myDiv'); // Bind the element with id myDiv // Update data vm.$data.message = 'hello world!!!';

    // Unbind app.unmount();
</script>

4. Overview

The above is a detailed explanation of Vue3 life cycle functions and methods introduced by the editor. I hope it will be helpful to everyone. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

You may also be interested in: