<!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>Document</title> </head> <body> <div id="demo"></div> <script src='https://cdn.bootcss.com/vue/2.3.2/vue.js'></script> <script> var vm = new Vue({ the: '#demo' , beforeCreate: function () { console.log( "Called synchronously at the beginning of initialization, at this time data observation, events are not initialized" ); }, created: function () { console.log( 'The creation of the instance has been completed' ); }, beforeMount: function () { console.log( "Executed before template compilation" ); }, mounted: function () { console.log( "Template compilation completed" ); }, beforeUpdate: function () { console.log( "Before updating data" ); }, updated: function () { console.log( 'If you want to update the data, it will be called after each update of the data' ); }, beforeDestroy: function () { console.log( "Called when the instance starts to be destroyed, this instance is still useful" ); }, destroyed: function () { console.log( "Instance was destroyed" ); }, activated: function () { console.log( "Called during the dynamic component initialization and rendering process, it needs to be used with keep-live" ); }, deactivated: function () { console.log( "Called during the removal of dynamic components, it needs to be used with keep-live" ); } }); </script> </body> </html>