Detailed explanation of Vue3 life cycle functions and methods

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:
  • Detailed explanation of Vue3 life cycle hook function
  • A brief discussion on the life cycle of Vue
  • In-depth understanding of the life cycle comparison between Vue2 and Vue3
  • Eight hook functions in the Vue life cycle camera
  • Life cycle and hook functions in Vue
  • Commonplace talk about the life cycle of Vue

<<:  Solve the problem that the borders of the search box and the search button cannot overlap

>>:  How to display TIF format images in browser

Recommend

A tutorial for beginners to install and log in to mysql-8.0.19-winx64 (must-read for beginners)

Table of contents 1. Download the installation pa...

Detailed explanation of FTP server configuration and 425 error and TLS warning solutions for FileZilla Server

123WORDPRESS.COM provides you with the FileZilla ...

How to quickly deploy Redis as a Docker container

Table of contents getting Started Data storage Co...

Web page layout should consider IE6 compatibility issues

The figure below shows the browser viewing rate i...

js to implement file upload style details

Table of contents 1. Overview 2. Parameters for c...

Abbreviation of HTML DOCTYPE

If your DOCTYPE is as follows: Copy code The code ...

Reasons why MySQL queries are slow

Table of contents 1. Where is the slowness? 2. Ha...

Let's talk about the characteristics and isolation levels of MySQL transactions

The Internet is already saturated with articles o...

Javascript Bootstrap's grid system, navigation bar and carousel detailed explanation

Table of contents Introduction to bootstrap and i...

Tutorial on importing and exporting Docker containers

background The popularity of Docker is closely re...

Zabbix monitors Linux hosts based on snmp

Preface: The Linux host is relatively easy to han...

How to Use rsync in Linux

Table of contents 1. Introduction 2. Installation...

Detailed explanation of the implementation principle of MySQL transactions and Spring isolation levels

1. Transactions have ACID characteristics Atomici...

MySQL Server IO 100% Analysis and Optimization Solution

Preface During the stress test, if the most direc...

Search optimization knowledge to pay attention to in web design

1. Link layout of the new site homepage 1. The loc...