1. Overview
The so-called life cycle function is a function that is automatically triggered under a certain condition.
2. Introduction to VUE3 life cycle function
2.1 beforeCreate
Functions that are automatically executed before VUE instances are generated
2.2 created
Functions that will be automatically executed after the VUE instance is generated
2.3 beforeMount
Functions that are automatically executed before component content is rendered to the page
2.4 mounted
Functions that are automatically executed after component content is rendered to the page
2.5 beforeUpdate
Functions executed before data changes
2.6 updated
Functions executed when the data in data changes
2.7 beforeUnmount
Functions executed before unbinding VUE instances and elements
2.8 unmounted
Functions executed after the VUE instance is unbound and the element are
3. Code example
<script src="../"></script>
</head>
<body>
<div ></div>
</body>
<script>
// Lifecycle function: a function that will be automatically executed at a certain moment const app = ({ // Create a vue application instance data() {
return {
message : "hello"
}
},
// Functions that will be automatically executed before instance generation beforeCreate() {
alert("beforeCreate")
},
// Functions that will be automatically executed after instance generation created() {
alert("created")
},
// Functions that are automatically executed before component content is rendered to the page beforeMount() {
alert("beforeMount：" + ("myDiv").innerHTML)
},
// Functions that are automatically executed after component content is rendered to the page mounted() { // Automatically execute after binding alert("mounted：" + ("myDiv").innerHTML)
},
// Execute before data changes beforeUpdate() {
alert("beforeUpdate：" + ("myDiv").innerHTML);
},
// Execute after data changes updated() {
alert("updated：" + ("myDiv").innerHTML);
},
// Functions executed before unbinding beforeUnmount() {
alert("beforeUnmount：" + ("myDiv").innerHTML);
},
// Functions executed after unbinding unmounted() {
alert("unmounted：" + ("myDiv").innerHTML);
},
// If there is no template, the child element below the bound element is taken as template template : "<div>{{message}}</div>"
});
// vm is the root component of vue application const vm = ('#myDiv'); // Bind element with id myDiv
// Update data vm.$ = 'hello world!!!';
// Unbind ();
</script>
4. Overview
The above is a detailed explanation of the Vue3 life cycle functions and methods introduced to you by the editor. I hope it will be helpful to you. Thank you very much for your support for my website!