Vue life cycle (hook function)
Vue has a total of 10 life cycle functions, and we can use these functions to operate data or change content at each stage of Vue.
Full code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Constructor declaration cycle</title> </head> <body> <h1>Constructor declaration cycle</h1> <hr> <div id="app"> {{message}} <p><button @click="jia">加分</button></p> </div> <button onclick="app.$destroy()">销毁</button> <script type="text/javascript"> var app = new Vue ({ el: '#app' , data:{ message:1 }, methods:{ jia:function(){ this.message ++; } }, beforeCreate:function(){ console.log( '1-beforeCreate after initialization' ); }, created:function(){ console.log( '2-created creation completed' ); }, beforeMount:function(){ console.log( '3-beforeMount before mount' ); }, mounted:function(){ console.log( '4-mounted was created' ); }, beforeUpdate:function(){ console.log( '5-beforeUpdate before the data is updated' ); }, updated:function(){ console.log( '6-updated after being updated' ); }, activated:function(){ console.log('7-activated'); }, deactivated:function(){ console.log('8-deactivated'); }, beforeDestroy:function(){ console.log( '9-beforeDestroy' ); }, destroyed:function(){ console.log( '10-destroyed after destruction' ) } }) </script> </body> </html>