study
/
vue
/
26th.html

<!DOCTYPE html>
<html>
<head>
	<title>生命周期</title>
	<script src="vue.js"></script>
	<script>

		window.onload=function(){
			new Vue({
				el:'#my',// 2.0不允许挂载到html,body元素上
				data:{
					msg:'welcome'
				},
				methods:{
					update(){
						this.msg="欢迎";
					},
					destroy(){
						this.$destroy();
					}
				},
				beforeCreate(){
					console.log('loading');
					alert('组件实例刚刚创建，还未进行数据观测和事件配置');//创建前状态  el和data并未初始化
				},
				created(){//常用  创建完毕状态   完成了data数据的初始化  el没有

					alert("实例已经创建完成，并且已经进行数据观测和事件配置")
				},
				beforeMount(){  //挂载前状态 完成了el和data初始化
					this.msg="112233";
					alert("模板编译之前，还没挂载");
				},
				mounted(){//常用  挂载结束状态  完成挂载

					alert("模板编译之后，已经挂载，此时才会有渲染页面，才能看到页面上数据的显示")
				},
				beforeUpdate(){   //更新前状态
					alert("组件更新之前");
				},
				updated(){   //更新完成状态
					alert("组件更新之后");
				},
				beforeDestroy(){   //销毁前状态
					alert("组件销毁之前");
				},
				destroyed(){  //销毁完成状态
					alert('组件销毁之后');
				}
			});
		}
	</script>
</head>
<body>
	<div id="my">
		{{msg}}
		<br>
		 <button @click="update">更新数据</button>
		<button @click="destroy">销毁组件</button>
	</div>
</body>
</html>