Vue.js生命周期详解

最新推荐文章于 2024-08-17 19:27:47 发布

前端小佬

最新推荐文章于 2024-08-17 19:27:47 发布

阅读量904

点赞数 11

CC 4.0 BY-SA版权

分类专栏：个人总结文章标签： Vue 生命周期前端钩子函数

本文链接：https://blog.youkuaiyun.com/weixin_42436131/article/details/85331300

个人总结专栏收录该内容

13 篇文章

订阅专栏

本文详细解析了Vue.js的生命周期，包括创建、挂载、更新和销毁四个阶段，阐述了各阶段的钩子函数及其作用，帮助开发者更好地理解和运用Vue的生命周期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js生命周期详解

前言

前言

了解Vue的生命周期很重要！
了解Vue的生命周期很重要！
了解Vue的生命周期很重要！
重要的事情说三遍，至于为什么重要？额…

一、生命周期简介

我们都知道，每一个Vue应用都是从我们通过Vue函数去new一个新的vue实例开始的。每一个vue实例就像我们人一样，都会有从出生走向死亡这样这一过程，这个过程就是我们所说的Vue的生命周期，而这个过程中所经历的各个阶段，就是我们所说的钩子函数，我们必须了解到这个生命周期是一个怎么样的过程，我们才能在每个阶段的钩子函数里去做对的事。

正文开始

首先来个官方的图镇文：
先做个简单的说明：
红色白底方块代表着钩子函数；绿色方法代表着所做的事情；
黄色菱形代表着流程判断；红色圆圈代表着生命周期阶段；

接着再来个Vue生命周期的钩子函数说明图，先做个简单的了解：
钩子函数图

二、生命周期详解

对于以上这两个这个图，大家或多或少见过，先做个了解。看不看懂都没关系，我们接下来就来对生命周期做个详细的解析。

首先，简单粗暴地把上面这段代码复制到一个新的html文件，运行它并打开控制台

<!DOCTYPE html>
<html>
<head>
    <title>生命周期</title>
    <meta charset="UTF-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	     <p @click="updateMessage">{{ message }}</p>
	</div>
<script type="text/javascript"> 
  var app = new Vue({
      el: '#app',
      data: {
          message : "生命周期" 
      },
      methods:{
      	updateMessage(){
      		this.message="message更新了"
      	}
      },
       beforeCreate: function () {
               console.group('beforeCreate 创建前===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","methods: " + this.updateMessage)  
        },
        created: function () {
            console.group('created 创建完成===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","methods: " + this.updateMessage); //已被初始化
        },
		
        beforeMount: function () {
            console.group('beforeMount 挂载前===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","methods: " + this.updateMessage); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载完成===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","methods: " + this.updateMessage); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.message); 
               //debugger;
        },
        updated: function () {
            console.group('updated 更新完成===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","methods: " + this.updateMessage); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","methods: " + this.updateMessage)
        }
    })
</script>
</body>
</html>

不出意外的话，应该可以看到下图的内容：
执行结果
上面的运行结果，从上到下就是Vue生命周期的流程。我们就着这个运行结果来逐个解析：

创建阶段：

在beforeCreated() 创建前阶段，我们可以看到，el、data、methods都是undefined，也就是说，在这个阶段，其实Vue只是简单地帮我们new出一个实例，但实际上什么事情都没做。
在created() 创建完成阶段，我们可以看到，data、methods已经发生了变化，简单地来说，在这个阶段，Vue为我们初始化了data和methods。但注意此时el依然为undefined，所以直到created() 阶段为止，Vue所做的都只是初始化，没做挂载。

挂载(渲染)阶段：

我们再来看挂载阶段，先看beforeMount() 挂载前阶段，我们可以看到此时el已经不再undefined了，在这个阶段，可以简单地理解为Vue已经为我们找到了我们要挂载的DOM节点了。但是，大家可以看到，我们绑定的数据是{{message}}，还没有渲染出来。
接着再来看mounted() 挂载完成阶段，这个时候我们可以看到，我们绑定的数据不再是{{message}}了，而且已经显示出来“生命周期”了，也就是说，在这个阶段，Vue已经帮我们将数据渲染到我们的DOM节点了。至此，前期的创建和渲染阶段已经完成了。

此时，大家可以回过头重新再看vue官方的生命周期流程图，大家可以看到，在创建和挂载阶段中间，多了以下这一块内容，这是为什么呢？
截图1
其实原因很简单，说白了，template和el其实都只是一个我们去挂载的模板，也就是容器，只不过el是根节点，template最终也是被塞进el里面的。所以Vue在挂载前会去判断template存不存在，如果存在，那就先挂载到template这个模板里，如果不存在，就直接挂载到el绑定的DOM节点里。

更新阶段

说完了创建和挂载阶段，我们再来看一下更新阶段。首先要记住一点，如果我们的data没有变化，那是不会走进更新阶段的，所以我们点击下页面“生命周期”的文字，修改data，更新下我们的message，来走进更新阶段。

我们可以看到此时已完成了更新，但咋一看beforeUpdate() 更新前和 updated() 更新完成这两个阶段好像没什么区别，但其实是有的。
回到那一大串代码，在beforeUpdat() 里面的所注释掉的//debugger，将他取消注释，我们打个断点，然后重新执行我们的代码，重新点击修改，这时候我们可以看到：
打断点更新
在beforeUpdate() 更新前这个阶段，其实我们的data已经进行了更新，但是我们节点上绑定的数据还没更新，也就是说，在这个阶段，我们只是更新了data，但还没重新渲染DOM。

接着我们继续执行

我们可以看到在updated() 更新完成这个阶段后，我们的data和DOM都已经更新了。

总结一下更新阶段，在beforeUpdate() 阶段，Vue只是帮我们完成了data 的更新，但DOM还没重新渲染。当我们完成updated() 阶段后，我们的DOM才完成重新渲染。

销毁阶段

最后就是销毁阶段了，这个阶段其实没什么好说的，我们可以在控制台执行下app.$destory()这行代码，就可以看到：

在这之后，我们可以看到el，data，methods其实都还存在，但我们去对他们进行操作的话，是不起作用的。我们可以在控制台输入我们的vue实例app，可以看到：

这时的vnode是undefined。简单来说，销毁阶段销毁的是我们的虚拟DOM，以及移除了事件监听和数据绑定。el，data，methods其实都还是存在的，只是与Vue无关了。
如果非要说beforeDestroy() 销毁前阶段和 destroyed() 销毁完成阶段的区别的话，那就是beforeDestroy() 是问Vue确定要销毁吗，而destroyed() 是已经销毁了。

到这里为止，生命周期的详解也解析得差不多了，这里放一张做了注解的官方生命周期图，如果对生命周期还不太清晰的话，可以结合以上内容看看下面这张图，或者觉得了解得差不多了，可以回过头看一开始那张官方的生命周期图，看看现在对这张图有没有变得不再陌生。生命周期注解图：

三、生命周期总结

这里是我对各阶段钩子函数做的一个大概的总结。然后也写一下我自己平时会怎么去用这些钩子函数，毕竟学完后不会用也是挺尴尬的。经验有效，写得不全，望大佬补充哈哈哈。

生命周期各阶段	钩子函数写法	作用	其他说明
创建前	beforeCreate()	在这个阶段什么都没做，这是new一个vue实例而已	我们可以在这里加一下loading
创建完成	created()	在这个阶段对data和methdos进行初始化	我们可以在这个阶段进行我们的ajax请求，获取数据，或者对某些数据进行初始化
挂载前	beforeMount()	初始化el,确定挂载节点
挂载完成	mounted()	将data和methods等虚拟DOM挂载到DOM	我们也可以在这个阶段进行ajax请求，拿数据
更新前	beforeUpdate()	data数据修改，但还没更新视图	这个阶段如果不进行数据修改，是不会进入的
更新完成	updated()	将修改好的data数据重新渲染到DOM
销毁前	beforeDestory()
销毁完成	destory()	移除事件监听和数据绑定，销毁虚拟DOM	销毁后的数据还在，只是不再和vue有关联
激活时	activated()	keep-alive组件被激活时调用
停止时	deactivated()	keep-alive组件停止时调用