Vue的生命周期

牛哄哄的柯南
138 阅读3分钟

Vue的生命周期

引言

在使用vue进行日常开发中，我们总有这样的需求，想在页面刚一加载出这个表格组件时，就发送请求去后台拉取数据，亦或者想在组件加载前显示个loading图，当组件加载出来就让这个loading图消失等等这样或那样的需求。

要实现这些需求，最重要的一点就是我怎么知道这个组件什么时候加载，换句话说我该什么时候向后台发送请求，为了解决这种问题，组件的生命周期钩子函数就应运而生。

Vue生命周期图示

下面这张图，就是Vue官网给展示的Vue生命周期图：
在这里插入图片描述
下面是官方文档给出的一个组件从被创建出来到最后被销毁所要经历的一系列过程，所以这个过程也叫做一个组件的生命周期图。从图中我们可以看到，一个组件从被创建到最后被销毁，总共要经历以下8个过程：

  1. beforeCreate:组件实例创建之前
  2. created：组件实例创建完毕
  3. beforeMount：组件DOM挂载之前
  4. mounted：组件DOM挂载完毕
  5. beforeUpate：组件数据更新之前
  6. updated：组件数据更新完毕
  7. beforeDestoy：组件实例销毁之前
  8. destoyed：组件实例销毁完毕

代码演示

演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		    <h1></h1>
		    <button @click="add">增加</button></br>
			num={{num}}</br></br></br>
		    <button @click="des">销毁</button>
			
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		    var app = new Vue({
		        el: '#app',
		        data: {
		            num:1
		        },
		        //组件实例创建之前
		        beforeCreate() {
		            console.log('beforeCreate 组件实例创建前');
		        },
		        //组件实例创建完毕
		        created() {
		            console.log('created 组件实例创建完毕');
		        },
		        //组件DOM挂载之前
		        beforeMount() {
		            console.log('beforeMount 组件DOM挂载前');
		        },
		        //组件DOM挂载完毕
		        mounted() {
		            console.log('mounted 组件DOM挂载完毕');
		        },
		        //组件数据更新之前
		        beforeUpdate() {
		            console.log('beforeUpdate 组件数据更新前');
		        },
		        //组件数据更新完毕
		        updated() {
		            console.log('updated 组件数据更新完毕');
		        },
		        //组件实例销毁之前
		        beforeDestroy() {
		            console.log('beforeDestroy 组件实例销毁前');
		        },
		        //组件实例销毁完毕
		        destroyed() {
		            console.log('destroyed 组件实例销毁完毕');
		        },
		        methods:{
		            //改变数据，可以演示beforeUpdate与updated
		            add(){
		                this.num++;
		            },
					//使用$destroy()销毁当前实例，可以演示beforeDestroy与destroyed
					//app.$destroy();
					des(){
						
						app.$destroy();
					}
		        }
		    })
		    
		</script>
	</body>
</html>

效果动图：
在这里插入图片描述
从演示效果我们可以看出
1.在代码加载出来的时候就会把下面这四个执行完：

  1. beforeCreate:组件实例创建之前
  2. created：组件实例创建完毕
  3. beforeMount：组件DOM挂载之前
  4. mounted：组件DOM挂载完毕

2.当我们进行数据更新的时候会循环执行下面的两个步骤，更新一次执行一次下面的两个步骤：

  1. beforeUpate：组件数据更新之前
  2. updated：组件数据更新完毕

3.当我们销毁组件时会执行这两个步骤：

  1. beforeDestoy：组件实例销毁之前
  2. destoyed：组件实例销毁完毕

注意：销毁后就不能进行任何操作了

总结

以上就是vue中组件生命周期钩子函数执行的各个过程以及执行的时机，但是这些钩子函数到底该怎么用呢？针对引言中提出的需求我们又该怎么解决呢？在这里，给大家举个例子：

例如有一个表格组件：
1. 我们想在表格加载之前显示个loading图，那么我们可以在组件实例创建之前的钩子函数beforeCreate里面将loading图显示。
2. 当组件实例加载出来，我们可以在created钩子函数里让这个loading图消失。
3. 当表格被加载好之后我们想让它马上去拉取后台数据，那么我们可以在组件DOM挂载之前的钩子函数beforeMount里面去发送请求。
4. 从后台拉取的数据要绑定在DOM中，那么就必须要在组件DOM挂载完毕的钩子函数mounted里面去做。
5. 表格中的数据在更新前和更新后，我们都需要做一个处理，那么这些工作就可以放在beforeUpdate和updated中去做。
6. 当应用程序结束后，或组件实例准备销毁时，有一些善后处理的工作（比如释放资源）就可以放在beforeDestroy和destroyed中去做。

看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看到右下角的 “一键三连” 了吗，没错点它[哈哈]
在这里插入图片描述
加油！

共同努力！

Keafmd

avatar
文章
阅读
粉丝