Vue生命周期的钩子函数

雨点打透心脏的1/2处 2022-10-26 14:18 327阅读 0赞

# Vue生命周期的钩子函数 #

### 目录 ###

*  Vue生命周期的钩子函数
 *   *  一、前言
     *  二、生命周期图示
     *  三、钩子函数增加log
     *  四、调试验证
     *   *  4.1 创建页面
         *  4.2 刷新页面数据
         *  4.3 保留页面，切换到其他页面
         *  4.4 从其他页面再切换过来
         *  4.5 关闭页面
     *  五、生命周期钩子函数详解
     *  六、参考
     *  七、漂亮的Ending

## 一、前言 ##

每个 Vue 实例在被创建时都要经过一系列的初始化过程，而在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

## 二、生命周期图示 ##

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

## 三、钩子函数增加log ##

在如下几个生命周期钩子函数里面增加log，调试验证

*  beforeCreate
 *  created
 *  beforeMount
 *  mounted
 *  beforeUpdate
 *  updated
 *  activated
 *  deactivated
 *  beforeDestroy
 *  destroyed

<template>
    	
    </template>
    
    <script>
    
      export default { 
        name: 'detail',
        data() { 
          return { 
            
          }
        },
        beforeCreate: function() { 
          console.log('《=============== beforeCreate ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        created: function() { 
          console.log('《=============== created ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        beforeMount: function() { 
          console.log('《=============== beforeMount ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        mounted: function() { 
          console.log('《=============== mounted ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        beforeUpdate: function () { 
          console.log('《=============== beforeUpdate ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        updated: function () { 
          console.log('《=============== updated ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        activated: function () { 
          console.log('《=============== activated ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        deactivated: function () { 
          console.log('《=============== deactivated ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        beforeDestroy: function () { 
          console.log('《=============== beforeDestroy ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        destroyed: function () { 
          console.log('《=============== destroyed ===============》')
          console.log("%c%s", "color:red","data : ", this.$data)
          console.log("%c%s", "color:red","query: ", this.$route.query) 
        },
        methods: { 
          
        }
      }
    </script>
    
    <style>
      
    </style>

## 四、调试验证 ##

*  data是本地的数据
 *  query是从其他页面路由传递过来的数据
 *  this.form = this.$route.query 是将传递过来的数据赋值到本地，刷新本地页面的数据

通过这两个数据，来观察View和Data之前的切换关联流程

### 4.1 创建页面 ###

*  创建页面的流程： beforeCreate —> created —> beforeMount —> mounted —> activated
 *  query数据在beforeCreate就存在，毕竟是从其他页面路由传递过来的数据
 *  而data数据是从created之后才存在  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 1]

### 4.2 刷新页面数据 ###

*  this.form = this.$route.query放置在mounted之前的函数中，都不会出现beforeUpdate和updated
 *  只有在mounted或者activated中使用，才会出现beforeUpdate和updated函数，并且页面数据正常显示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 2]

### 4.3 保留页面，切换到其他页面 ###

*  这个不是浏览器网页的切换
 *  是你本网站内部的页面切换
 *  这时候会调用deactivated函数，但是**路由传递过来的数据没有了**，我也摸不着头脑

![在这里插入图片描述][20210202165132242.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 3]

### 4.4 从其他页面再切换过来 ###

*  走了activated函数，**路由传递过来的数据又出现了**
 *  因为在activated执行了this.form = this.$route.query，所以又重复执行了beforeUpdate和updated  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 4]

### 4.5 关闭页面 ###

*  关闭页面，直接走beforeDestroy和destroyed，没有执行activated
 *  路由传递过来的数据直接消失，但是本地数据却留到了最后  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 5]

## 五、生命周期钩子函数详解 ##

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td align="left">在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td align="left">在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td align="left">在挂载开始之前被调用：相关的 render 函数首次被调用。</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td align="left">实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td align="left">数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td align="left">由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。</td> 
  </tr> 
  <tr> 
   <td>activated</td> 
   <td align="left">被 keep-alive 缓存的组件激活时调用。</td> 
  </tr> 
  <tr> 
   <td>deactivated</td> 
   <td align="left">被 keep-alive 缓存的组件停用时调用。</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td align="left">实例销毁之前调用。在这一步，实例仍然完全可用。</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td align="left">实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。</td> 
  </tr> 
 </tbody> 
</table>

## 六、参考 ##

[实例生命周期钩子][Link 1]

## 七、漂亮的Ending ##

*  觉得好，就打个赏呗
 *  觉得好，就一键三连呗

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70]: /images/20221024/2aade3e69d8f460e975b42e4376ca124.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 1]: /images/20221024/c04b25aa86c646e0815160f85832954d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 2]: /images/20221024/5dd2e5a5c24845d3969120bfd95356ae.png
[20210202165132242.png]: /images/20221024/87bb80ae9a5248248b431cd701ce32b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 3]: /images/20221024/248fa6674d2d454296a48b5df9065eee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 4]: /images/20221024/35bcd06cfdf545eeb0ac3a1f67c450d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70 5]: /images/20221024/64b88761687b4187a871d765fc3db4f4.png
[Link 1]: https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/d677cc8241694667ac1df9839cbd28db.png