vue实例生命周期-钩子函数详解

最新推荐文章于 2024-04-10 18:01:45 发布

俗世凡人行

最新推荐文章于 2024-04-10 18:01:45 发布

阅读量280

点赞数

分类专栏： Vue 文章标签：生命周期钩子函数

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107593281

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

生命周期

每个Vue实例在被创建时都要经过一些列的初始化过程;比如,需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等; 同时在这个过程中也会执行一些叫做生命周期钩子的函数,这给了用户在不通阶段添加自己的代码的机会;
beforeCreate

在实例初始化之后, 数据观测(data observer)和event/watcher事件配置之前被调用;

created

在实例创建完成后被立即调用; 在这一步, 实例已完成以下的配置: 数据观测(data observer),属性和方法的运算,event/watcher事件回调; 然而,挂载阶段还没开始,$el属性目前尚不可用;

beforeMount

在挂载开始之前调用, 相关的render函数首次被调用;

mounted

实例被挂载后调用, 这是el被新创建的vm. $e l 替换了; 如果跟实例挂载到一个文档内的元素上, 当 m o u n t e d 被调用时 v m .$ el也在文档内;

beforeUpdate

数据更新时调用, 发生在虚拟DOM打补丁之前; 这里适合在更新之前访问现有的DOM, 比如移除已添加的事件监听器;

updated
beforeDestory

实例销毁之前调用; 在这一步, 实例仍然完全可用;

destroyed

实例销毁后调用; 该钩子被调用后, 对应Vue实例的所有指令都被解绑, 所有的事件监听器被移除, 所有的子实例也都被销毁;

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
		</div>
	</body>
</html>
<script type="text/javascript">	
	var vm = new Vue({	
		el:'#app',
		data:{
			msg:"hello Vue",
			
		},
		beforeCreate:function(){
			// 此时,数据已绑定,但this尚未生效,还没赋给它
			console.log('beforeCreate====',this.msg);
		},	
		created:function(){
			// 此时,数据已绑定,但this已经生效,数据已准备好,已经赋值
			console.log('created====',this.msg,this.$el);
		},
		beforeMount:function() {
			// 这一步可以访问this.$el了,上一步不能,开始准备渲染数据
			console.log('beforeMount',this.$el);
		},
		mounted:function(){
			// 渲染出数据,一般做页面加载后的直接使用的,在这一步操作
			console.log('mounted',this.$el);
		},
		beforeUpdate:function(){
			//更新前的数据
			console.log('beforeUpdate');
		},
		updated:function(){
			//更新后的数据
			console.log('updated');
		},
		beforeDestroy:function(){
			console.log("beforeDestroy");
		},
		destroyed:function(){
			console.log("destroyed");
		},
		
		methods:{
			
			}
			
		
	})	
	
</script>