vue2.0的生命周期和钩子函数深度解析

柔情只为你懂 2021-09-19 00:08 273阅读 0赞

### 生命周期图解 ###

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

### 生命周期的钩子函数（vue1.0 - vue2.0） ###

<table> 
 <thead> 
  <tr> 
   <th align="left">vue 1.0 +</th> 
   <th align="left">vue 2.0</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">init</td> 
   <td align="left">beforeCreate</td> 
   <td align="left">组件实例刚被创建，组件属性计算之前，如 <code>data</code> 属性等</td> 
  </tr> 
  <tr> 
   <td align="left">created</td> 
   <td align="left">created</td> 
   <td align="left">组件实例创建完成，属性已绑定，但DOM还未生成，<code>$el</code> 属性还不存在</td> 
  </tr> 
  <tr> 
   <td align="left">beforeCompile</td> 
   <td align="left">beforeMount</td> 
   <td align="left">模板编译 / 挂载之前</td> 
  </tr> 
  <tr> 
   <td align="left">compiled</td> 
   <td align="left">mounted</td> 
   <td align="left">模板编译 / 挂载之后</td> 
  </tr> 
  <tr> 
   <td align="left">ready</td> 
   <td align="left">mounted</td> 
   <td align="left">模板编译 / 挂载之后（不能保证组件已在 <code>document</code> 中）</td> 
  </tr> 
  <tr> 
   <td align="left">-</td> 
   <td align="left">beforeUpdate</td> 
   <td align="left">组件更新之后</td> 
  </tr> 
  <tr> 
   <td align="left">-</td> 
   <td align="left">updated</td> 
   <td align="left">组件更新之后</td> 
  </tr> 
  <tr> 
   <td align="left">-</td> 
   <td align="left">activated</td> 
   <td align="left">for keep-alive，组件被激活时调用</td> 
  </tr> 
  <tr> 
   <td align="left">-</td> 
   <td align="left">deactivated</td> 
   <td align="left">for keep-alive，组件被移除时调用</td> 
  </tr> 
  <tr> 
   <td align="left">attached</td> 
   <td align="left">-</td> 
   <td align="left">将 <code>vm.el</code> 附加到 <code>dom</code> 时调用，直接操纵 <code>vm.$el</code>不会触发这个钩子</td> 
  </tr> 
  <tr> 
   <td align="left">datached</td> 
   <td align="left">-</td> 
   <td align="left">从 <code>dom</code> 中移除 <code>vm.$el</code> 时调用，直接操纵 <code>vm.$el</code> 不会触发这个钩子</td> 
  </tr> 
  <tr> 
   <td align="left">beforeDestory</td> 
   <td align="left">beforeDestory</td> 
   <td align="left">组件销毁前调用</td> 
  </tr> 
  <tr> 
   <td align="left">destoryed</td> 
   <td align="left">destoryed</td> 
   <td align="left">组件销毁后调用</td> 
  </tr> 
 </tbody> 
</table>

`vue` 的生命周期简单来说就是 `vue`实例从创建到销毁的过程。  
    一个完整的生命周期，总共分为三个阶段：挂载阶段 (进入页面阶段)、更新阶段、销毁阶段(卸载阶段)。

#### 1. beforeCreate ####

*  说明 : 在实例初始化之前,数据观测 和 `event/watcher` 事件配置之前被调用
 *  组件实例刚被创建,组件属性计算之前, 例如 `data` 属性 `methods` 属性
 *  注意 : 此时,无法获取 `data` 中的数据 和 `methods` 中的方法
 *  场景 : 几乎不用

#### 2. created ####

*  说明 : 组件实例创建完成,属性已绑定, 可以调用 `methods` 中的方法、可以获取 `data` 值
 *  注意 : 在这里更改数据不会触发 `updated` 函数
 *  场景 : 一般可以在这里做初始数据的获取

#### Has ‘el’ option ? ####

*  YES => 就是正常的 `el` 边界
 *  NO => 可以注释,但是必须要手动添加 `vm.$mount(el)` 去指定边界

#### Has template option? ####

*  No => 将 `el` 的 `outerHtml` 作为模板进行编译 ( `outerHTML` = 自身 + `innerHTML` )
 *  YES => `vue` 就会将 `template` 的内容进行编译,编译后,替换页面中 `vue` 管理的边界

#### 3. beforeMount ####

*  说明 : 在挂载开始之前被调用 (挂载:可以理解 `dom` 渲染)
 *  注意 : 在这里更改数据不会触发 `updated` 函数
 *  场景 : 一般可以在这里做初始数据的获取

#### 4. mounted ####

*  说明 : 组件已经出现在页面中，数据、真实 `dom` 都已经处理好了，事件都已经挂载好
 *  注意 : 在这里更改数据不会触发 `updated` 函数
 *  场景 : 发送 `ajax` 或者 操作 `dom`

#### 5. beforeUpdate ####

*  说明 : `vue` 的虚拟 `dom` 机制会重新构建虚拟 `dom` 与上一次的虚拟 `dom` 树利用diff算法进行对比之后重新渲染
 *  注意 : 此处获取的数据是更新后的数据，但是获取页面中的 `dom` 元素是更新之前的
 *  场景 : 一般不做操作

#### 6. updated ####

*  说明 : 数据已经更改完成，`dom` 也重新渲染完成， 可以操作更新后的虚拟 `dom`

#### 7. beforeDestroy ####

*  说明：实例销毁之前调用。在这一步，实例仍然完全可用
 *  场景：实例销毁之前，执行清理任务，比如：清除定时器等

#### 8. destroyed ####

*  说明：`vue` 实例销毁后调用。调用后，`vue` 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
 *  注意：在执行`destroy`方法后，对 `data` 的改变不会再触发周期函数，此时的 `vue` 实例已经解除了事件监听以及和`dom`的绑定，但是 `dom` 结构依然存在。所以对于实时显示的通知型组件，在他 `destroyed` 之前，我们必须手动 `removeChild()` 删除该节点；否则，`dom` 节点还是存在，影响浏览器性能

# 执行顺序 #

**父组件**

<template>
      <div>
        <Test :msg="msg"></Test>
      </div>
    </template>
    <script>
    import Test from '@/components/test'
    export default { 
      data() { 
        return { 
          msg: '父组件存在的消息'
        }
      },
      components: { 
        Test
      },
      beforeCreate() { 
        console.log('============ 父组件页面调用了 beforeCreate ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('msg:', this.msg)
      },
      created() { 
        console.log('============ 父组件页面调用了 created ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('msg:', this.msg)
      },
      beforeMount() { 
        console.log('============ 父组件页面调用了 beforeMount ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('msg:', this.msg)
      },
      mounted() { 
        console.log('============ 父组件页面调用了 mounted ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('msg:', this.msg)
      },
      beforeUpdate() { 
        console.log('============ 父组件调用了 beforeUpdate ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('msg:', this.msg)
      },
      updated() { 
        console.log('============ 父组件页面调用了 updated ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('msg:', this.msg)
      },
      beforeDestroy() { 
        console.log('============ 父组件页面调用了 beforeDestroy ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('msg:', this.msg)
      },
      destoryed() { 
        console.log('============ 父组件页面调用了 destoryed ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('msg:', this.msg)
      }
    }
    </script>

**子组件**

<template>
      <div>
      	哈哈哈  测试
      </div>
    </template>
    <script>
    export default { 
      props: { 
        msg: { 
          type: String,
          default: '子组件默认的消息'
        }
      },
      data() { 
        return { 
        }
      },
      beforeCreate() { 
        console.log('============ 子组件调用了 beforeCreate ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('此时子组件获取不到 Props 中 msg 的值，强行获取会报错')
      },
      created() { 
        console.log('============ 子组件调用了 created ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('父组件传入的msg:', this.msg)
      },
      beforeMount() { 
        console.log('============ 子组件调用了 beforeMount ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('父组件传入的msg:', this.msg)
      },
      mounted() { 
        console.log('============ 子组件调用了 mounted ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('父组件传入的msg:', this.msg)
      },
      beforeUpdate() { 
        console.log('============ 子组件调用了 beforeUpdate ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('父组件传入的msg:', this.msg)
      },
      updated() { 
        console.log('============ 子组件调用了 updated ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('父组件传入的msg:', this.msg)
      },
      beforeDestroy() { 
        console.log('============ 子组件调用了 beforeDestroy ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('父组件传入的msg:', this.msg)
      },
      destoryed() { 
        console.log('============ 子组件调用了 destoryed ============')
        console.log('$el:', this.$el)
        console.log('$data:', this.$data)
        console.log('父组件传入的msg:', this.msg)
      }
    }
    </script>

**执行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70_pic_left]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70]: /images/20210812/11ac8360bf3846eb814c26b573eb1546.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70_pic_left]: /images/20210812/5a09e1b6eb2c499183e842adb16b84d1.png