一文带你弄懂Vue八大生命周期钩子函数

女爷i 2022-10-05 05:52 205阅读 0赞

## 一.速识概念： ##

我们把一个对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。  
  按照官方的原话，就是每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。  
  简单来说就是每个Vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数) 。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

## 二.八大生命周期钩子函数： ##

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>调用时间</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>vue实例初始化之前调用</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>vue实例初始化之后调用</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>挂载到DOM树之前调用</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>挂载到DOM树之后调用</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>数据更新之前调用</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>数据更新之后调用</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>vue实例销毁之前调用</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>vue实例销毁之后调用</td> 
  </tr> 
  <tr> 
   <td>北极光之夜。</td> 
   <td>北极光之夜。</td> 
  </tr> 
 </tbody> 
</table>

**下面是[官方文档][Link 1]里的生命周期图，英语好的同学可以看看：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

## 三.结合代码了解： ##

先看案例基本代码如下，后面通过如下代码步骤演示一个对象从生成到被销毁的过程各阶段执行的生命周期函数。注意show函数的作用。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {
       {information}}
        </div>
        <script type="text/javascript"> //创建vue实例 var vm = new Vue({ el: '#app', data: { information: '北极光之夜。' } }) // 各个生命周期函数通过调用下面这个函数了解其所处的生命阶段 function show(inf,obj){ console.log(inf); console.log("------------------------------------------"); console.log('获取vue实例data里的数据:'); console.log(obj.information); console.log("------------------------------------------"); console.log('挂载的对象，就是DOM：'); console.log(obj.$el); console.log("------------------------------------------"); console.log('页面上已经挂载的DOM：'); console.log(document.getElementById('app').innerHTML); } </script>

### 1. beforeCreate： ###

这个阶段vue实例刚刚在内存中创建，此时data和methods这些都没初始化好。  
 在案例中添加beforeCreate钩子函数：

var vm = new Vue({ 
               el: '#app',
               data: { 
                   information: '北极光之夜。' 
               },
               beforeCreate: function(){ 
                 // 传入该阶段简介与this，this就是该阶段的vue实例
                      show('vue实例初始化之前',this);
               }
           })

看运行结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]

可以看到，此时vue实例刚刚在内存中创建，其它什么都undefined。

### 2.created： ###

这个阶段vue实例在内存中已经创建好了，data和methods也能够获取到了，但是模板还没编译。  
 在案例中添加created钩子函数：

var vm = new Vue({ 
               el: '#app',
               data: { 
                   information: '北极光之夜。' 
               },
               created: function(){ 
                      show('vue实例初始化之后',this);
               }
           })

看结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]  
看到没，已经知道data里的数据了。其它的话都没。

### 3.beforeMount： ###

这个阶段完成了模板的编译，但是还没挂载到页面上。  
 在案例中添加钩子函数：

var vm = new Vue({ 
               el: '#app',
               data: { 
                   information: '北极光之夜。' 
               },
               beforeMount: function(){ 
                 show('挂载之前',this);
               }
           })

看结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]  
看到没，要挂载的对象都编译好了，但是页面的DOM树还没挂上去，这个阶段页面还没能显示出来。

### 4.mounted： ###

这个阶段，模板编译好了，也挂载到页面中了，页面也可以显示了。  
 在案例中添加钩子函数：

var vm = new Vue({ 
               el: '#app',
               data: { 
                   information: '北极光之夜。' 
               },
               mounted: function(){ 
                show('挂载之后',this);
               }
           })

看结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 4]

### 5.beforeUpdate: ###

转态更新之前执行此函数，此时data中数据的状态值已经更新为最新的，但是页面上显示的数据还是最原始的，还没有重新开始渲染DOM树。

先改变data里数据：

vm.information = '南极光之夜';

在案例中添加钩子函数：

var vm = new Vue({ 
               el: '#app',
               data: { 
                   information: '北极光之夜。' 
               },
              beforeUpdate: function(){ 
                show('更新之前',this);
               }
           })

看结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 5]  
看到没，vue实例里的数据已经变成了南极光之夜。但是此阶段页面DOM节点上显示的还是初始的数据北极光之夜。

### 6.updated： ###

这个阶段是转态更新完成后执行此函数，此时data中数据的状态值是最新的，而且页面上显示的数据也是最新的，DOM节点已经被重新渲染了。

在案例中添加钩子函数：

var vm = new Vue({ 
               el: '#app',
               data: { 
                   information: '北极光之夜。' 
               },
              updated: function(){ 
                show('更新之后',this);
               }
           })

看运行结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 6]  
更新了，全都更新了~

### 7.beforeDestroy： ###

beforeDestroy阶段处于vue实例被销毁之前，当然，这个阶段vue实例还能用。

销毁Vue实例：

vm.$destroy();

在案例中添加钩子函数：

var vm = new Vue({ 
               el: '#app',
               data: { 
                   information: '北极光之夜。' 
               },
              beforeDestroy: function() { 
                show('销毁之前',this);
              }
           })

看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 7]

### 8.destroyed： ###

这个阶段在vue实例销毁后调用，此时所有实例指示的所有东西都会解除绑定，事件监听器也都移除，子实例也被销毁。

在案例中添加钩子函数：

var vm = new Vue({ 
               el: '#app',
               data: { 
                   information: '北极光之夜。' 
               },
              destroyed: function() { 
                show('销毁之后',this);
              }
           })

看结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 8]

## 四.总结： ##

差不多就这样了，有帮助的话请点个赞把~  
一键三连，这次一定~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 9]

## 五.其它文章： ##

**~关注我看更多简单创意特效：**  
[文字烟雾效果 html+css+js][html_css_js]  
[环绕倒影加载特效 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js 1]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 2]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 3]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 4]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等等  
[进我主页看更多~][Link 2]

[Link 1]: https://vuejs.bootcss.com/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/59aafe224a2d4f0eba5cb3420852451d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/b6fc339011434e169aa446e9548033fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/bc65f506c7ce477f93125beed0d45832.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221005/ec6dcaae87044aa3a5d5576caf69f52f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221005/68de988543c84fc1b3c69c8eee2f4ad1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221005/7746fe423d0445358838750e661311bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221005/17d72ababb4f48fda02c1b29440b3190.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221005/cfb652dc06d14283b326f65a38235cd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221005/ea70bcbece47447f9e1420e387da6d86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221005/7e34dcdeab714775a155bf38bba0e836.png
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/116452424
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 4]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630
[Link 2]: https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343