vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同

vue生命周期

　1.　vue1.0版本与vue2.0版本生命周期的不同

　　　　vue1.0版本生命周期图示

图1  vue1.0版本生命周期

vue1.0版本的生命周期:
　　　　init 实例创建之前
　　　　created  实例已经创建
　　　　beforeCompile  编辑之前
　　　　compiled   编辑之后
　　　　ready √ -> mounted  插入到文档
　　　　beforeDestroy  销毁之前
　　　　destroyed   销毁之后

　　注意：

　   　　　在vue1.0版本常用的是生命周期 中的 ready

　　2. vue2.0版本生命周期图示

图2  vue2.0版本生命周期

vue2.0版本的生命周期:
　　beforeCreate  组件实例刚刚被创建,属性都没有
　　created        实例已经创建完成，属性已经绑定
　　beforeMount   模板编译之前
　　mounted  模板编译之后，代替之前ready *
　　beforeUpdate  组件更新之前
　　updated  组件更新完毕 *
　　beforeDestroy     组件销毁前
　　destroyed  组件销毁后

vue2.0 生命周期的demo代码，通过弹出效果，理解生命周期

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>

</style>
<script src="vue.js"></script>
<script>

window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
methods:{
update(){
this.msg='大家好';
},
destroy(){
this.$destroy();
}
},
beforeCreate(){
console.log('组件实例刚刚被创建');
},
created(){
console.log('实例已经创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成');
},
beforeUpdate(){
console.log('组件更新之前');
},
updated(){
console.log('组件更新完毕');
},
beforeDestroy(){
console.log('组件销毁之前');
},
destroyed(){
console.log('组件销毁之后');
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁组件" @click="destroy">
{{msg}}
</div>
</body>
</html>