<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue的生命周期</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <h1>生命周期，构字函数</h1> <div id="app"> <p>{{count}}</p> <p><button @click="add">add</button></p> <p><button onclick="unbind()">解绑销毁</button></p> </div> </body> <script type="text/javascript"> function unbind(){ app.$destroy(); } var app=new Vue({ el:"#app", data:{ count:1, }, methods:{ add:function(){ this.count++ } }, beforeCreate:function(){ console.log("beforeCreate 初始化之前") }, created:function(){ console.log("created 创建完成") }, beforeMount:function(){ console.log("beforeMount 挂载之前 ") }, mounted:function(){ console.log("mounted 被挂载之后") }, beforeUpdate:function(){ console.log('beforeUpdata 数据更新前') }, updated:function(){ console.log(' updated 被更新后') }, beforeDestroy:function(){ console.log('beforeDestroy 销毁之前') }, destroyed:function(){ console.log('destroyed 销毁之后'); } }) //就是Vue实例从创建到销毁的过程，就是生命周期。 </script> </html>