Vue的生命周期

最新推荐文章于 2022-11-26 15:32:43 发布

南宫廿贰

最新推荐文章于 2022-11-26 15:32:43 发布

阅读量221

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43330884/article/details/105327498

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

生命周期概念
生命周期：从生到死亡的过程
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。而生命周期中的各种事件被称为生命周期钩子函数。
创建期间的生命周期函数：
beforeCreate：在实例初始化时同步调用。此时数据观测、事件等都尚未初始化。
created：在实例创建之后调用。此时已完成数据绑定，事件方法，但尚未开始DOM编译，即未挂载到document
beforeMount: 此时已经完成了模板的编译，但是还没有挂载到页面中
运行期间的生命周期函数：
mounted：编译结束时调用，此时所有指令都以生效，触发DOM更新，但不保证$el已插入文档。
beforeUpdated：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "Hello Vue !",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
//三秒后替换msg
setTimeout(function(){
	vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>

官方图解：

南宫廿贰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的生命周期

生命周期概念生命周期：从生到死亡的过程从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。而生命周期中的各种事件被称为生命周期钩子函数。创建期间的生命周期函数：beforeCreate：在实例初始化时同步调用。此时数据观测、事件等都尚未初始化。created：在实例创建之后调用。此时已完成数据绑定，事件方法，但尚未开始DOM编译，即未挂载到docume...
复制链接

扫一扫