【Vue 学习】- VueJS 生命周期

一、概述

   Vue 的生命周期可以分为 8 个生命周期的执行点,从 new 创建 Vue 对象到对象的销毁,其中 4 个基本的,4 个特殊的,在下图中,红色标注的就是 8 个生命周期的执行点,前四个为基本的,后四个为特殊的

image

四个基本执行点(数据加载):

  • beforeCreadted:
    • 实例组件刚创建,元素DOM和数据都还没有初始化,loading事件
  • created:
    • 数据data已经初始化完成,方法也已经可以调用,但是DOM为渲染。在这个周期里面如果进行请求是可以改变数据并渲染,由于DOM未挂载,请求过多或者占用时间过长会导致页面线上空白。
  • beforeMount:
    • DOM未完成挂载,数据也初始化完成,但是数据的双向绑定还是显示{{}},这是因为Vue采用了Virtual DOM(虚拟Dom)技术。先占住了一个坑。
  • mounted:
    • 数据和DOM都完成挂载,在上一个周期占位的数据把值给渲染进去。一般请求会放在这个地方,因为这边请求改变数据之后刚好能渲染。

四个特殊执行点(数据更新):

  • beforeUpdate:

    • 只要是页面数据改变了都会触发,数据更新之前,页面数据还是原来的数据,当你请求赋值一个数据的时候会执行这个周期,如果没有数据改变不执行。
  • updated:

    • 只要是页面数据改变了都会触发,数据更新完毕,页面的数据是更新完成的。beforeUpdate和updated要谨慎使用,因为页面更新数据的时候都会触发,在这里操作数据很影响性能和容易死循环。
  • beforeDestroy:

    • 这个周期是在组件销毁之前执行,在我项目开发中,觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行,只不过beforeDestroy无法阻止路由跳转,但是可以做一些路由离开的时候操作,因为这个周期里面还可以使用data和method。比如一个倒计时组件,如果在路由跳转的时候没有清除,这个定时器还是在的,这时候就可以在这个里面清除计时器。
  • destroyed:

    • 组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在 组件销毁时进行提示

二、代码实例

在代码编写中,每一个执行过程都有对应的函数事件

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
 
	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: 'hello world'
			},
			beforeCreate: function() {
				console.log(this);
				showData('创建vue实例前:beforeCreate', this);
			},
			created: function() {
				showData('创建vue实例后:created', this);
			},
			beforeMount: function() {
				showData('挂载到dom前:beforeMount', this);
			},
			mounted: function() {
				showData('挂载到dom后:mounted', this);
			},
			beforeUpdate: function() {
				showData('数据变化更新前:beforeUpdate', this);
			},
			updated: function() {
				showData('数据变化更新后:updated', this);
			},
			beforeDestroy: function() {
				vm.test = "3333";
				showData('vue实例销毁前:beforeDestroy', this);
			},
			destroyed: function() {
				showData('vue实例销毁后:destroyed', this);
			}
		});
 
		function realDom() {
			console.log('真实dom结构:' + document.getElementById('app').innerHTML);
		}
 
		function showData(process, obj) {
			console.log(process);
			console.log('data 数据:' + obj.message)
			console.log('挂载的对象:')
			console.log(obj.$el)
			realDom();
			console.log('------------------')
			console.log('------------------')
		}
		//vm.message = "good...";
		vm.$destroy(); 
	</script>
 
</html>

运行后按 F12,点 Console,可以看到加载时数据的变化

image

当修改数据后,比如将上面代码注释打开,改变 message 的值,运行后按 F12,点 Console,可以看到加载时数据的变化:

image

end
  • 作者:ONESTAR(联系作者)
  • 更新时间:2020-08-18 20:43
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 转载声明:如果是转载栈主转载的文章,请附上原文链接
  • 公众号转载:请在文末添加作者公众号二维码(公众号二维码见右边,欢迎关注)
  • 评论