12.Vue生命周期

最新推荐文章于 2024-07-02 10:02:04 发布

西瓜咬人啦

最新推荐文章于 2024-07-02 10:02:04 发布

阅读量230

点赞数 1

分类专栏： Vue 文章标签： vue js

@TMQ

本文链接：https://blog.csdn.net/weixin_42076050/article/details/109184671

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue8个生命周期

在这里插入图片描述

顺序	生命周期
1	beforeCreate(创建前)
2	created(创建后)
3	beforeMount(载入前)
4	mounted(载入后)
5	beforeUpdate(更新前)
6	updated(更新后)
7	beforeDestroy(销毁前)
8	destroyed(销毁后)

1. 代码

<!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>Vue生命周期</title>
	<script src="./js/vue.js"></script>
</head>
<body>
	 <div id="app">
	    <p>{{msg}}</p>
		<input type="text" v-model="msg"/>
	</div>
	<input type="button" value="销毁方法" onclick="destVue()"/>
</body>
 <script>
	var vm= new Vue({
			  el:"#app",
			  data:{
				msg:"abc"
			  },
			  beforeCreate(){//新对象创建之前
			    console.group("===>beforeCreate");
				console.log("实例对象:",this);
			    console.log("$el:",this.$el);
				console.log("$data:",this.$data);
				console.groupEnd();
			  },
			  created(){//已经具有默认特性的对象
			    console.group("===>created");
				console.log("实例对象:",this);
			    console.log("$el:",this.$el);
				console.log("$data:",this.$data);
				console.groupEnd();
			  },
			  beforeMount(){//对象在Dom中寻找合适形状
			    console.group("===>beforeMount");
				console.log("实例对象:",this);
			    console.log("$el:",this.$el);
				console.log("$data:",this.$data);
				console.groupEnd();
			  },
			  mounted(){//vue对象已经和dom产生关联
			    console.group("===>mounted");
				console.log("实例对象:",this);
			    console.log("$el:",this.$el);
				console.log("$data:",this.$data);
				console.groupEnd();
			  },
			  beforeUpdate(){//更新已经完成但Dom中还没有更新
			    console.group("===>beforeUpdate");
				console.log("实例对象:",this);
			    console.log("$el:",this.$el);
				console.log("$data:",this.$data);
				console.log("msg:",this.msg);
				console.groupEnd();
			  },
			  updated(){//Dom中已经呈现改变
			    console.group("===>updated");
				console.log("实例对象:",this);
			    console.log("$el:",this.$el);
				console.log("$data:",this.$data);
				console.log("msg:",this.msg);
				console.groupEnd();
			  },
			  beforeDestroy(){//对象准备销毁
			    console.group("===>beforeDestroy");
				console.log("实例对象:",this);
			    console.log("$el:",this.$el);
				console.log("$data:",this.$data);
				console.groupEnd();
			  },
			  destroyed(){//对象已经停止并从内存中删除
			    console.group("===>destroyed");
				console.log("实例对象:",this);
			    console.log("$el:",this.$el);
				console.log("$data:",this.$data);
				console.groupEnd();
			  
			  }
		   });
		   
		   function destVue(){
		       vm.$destroy();
		   }
 </script>
</html>