Vue's life cycle, which is the hook function; Vue, a total of 10 life-cycle function,
We can use these functions operate data at every stage of vue or change the content
Code examples are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Title> Vue lifecycle </ title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<H1> Vue lifecycle </ h1>
<hr>
<div id="app">
{{count}}
<p><button @click="add">add</button></p>
</div>
<button onclick="app.$destroy()">destroy</button>
<script>
was app = new Vue ({
the '#app'
data: {
count: 1
},
methods: {
add: function () {
this.count++
}
},
beforeCreate() {
( '- after initialization beforeCreate 1') console.log
},
created() {
console.log ( '2 - created created')
},
beforeMount() {
console.log ( '3 - beforeMount before loading')
},
mounted() {
console.log ( '4 - after mounted is mounted')
},
beforeUpdate() {
console.log ( '5 - beforeUpdate data before update')
},
updated() {
console.log ( '6 - updated after the updated')
},
activated() {
console.log('7 - activated')
},
deactivated() {
console.log('8 - deactivated')
},
beforeDestroy() {
( '- destroyed before beforeDestroy 9') console.log
},
destroyed() {
console.log ('10 - later destroyed destruction ')
},
})
</script>
</body>
</html>
As can be seen running the above code, it is first loaded 1,2,3,4, 5,6 loaded click, click when destroyed, 9,10 loaded;
In vue life cycle function, that is, the hook function is still very popular, because it is a single-page application,
So we need to load a lot of resources and pictures