Vue生命周期详解

目录

前言：

一、生命周期流程图详解

1.beforeCreate、Created

2.编辑模板过程

3.beforeMount、Mounted

4.beforeUpdate、Updated

5.beforeDestroy、Destroyed

二、生命周期代码

1.父子组件加载生命周期

2.父子组件更新生命周期

3.父子组件销毁生命周期

---

前言：

1、什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2、vue生命周期的作用是什么？

让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3、vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

4、第一次页面加载会触发哪几个钩子？

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

5、DOM 渲染在 哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了。

一、生命周期流程图详解

1.beforeCreate、Created

2.编辑模板过程

3.beforeMount、Mounted

4.beforeUpdate、Updated

5.beforeDestroy、Destroyed

二、生命周期代码

老规矩，先展示生命周期的执行效果

当点击button控件跳转后，befoeCreate、ceeated、beforeMount和mounted就已经执行了。在添加事件就会更新展示beforUpdate和updated；退出这个界面就执行销毁bdfoeDestroy、destroyed。

展示代码：

.label-head {
  text-align: center;
  font-size: 40px;
}

整体的函数知道后，遇到父子组件时他们的函数是如何执行的呢？

1.父子组件加载生命周期

父组件：parents

子组件：child、grandson

/*parents的打印代码*/
    created () {
    console.log('============"parents created"：我第一============')
  },
  beforeMount () {
    console.log('============"parents befortemounted"我第二=======')
  },
  mounted () {
    console.log('============"parents mounted"我第九==============')
  },
  /*child的打印代码*/
    created () {
    console.log('----------------"child created"我第三-------------')
  },
  beforeMount () {
    console.log('----------------"child beforemounted"我第四-------')
  },
  mounted () {
    this.$parent.panes.push(this)
    console.log('----------------"child mounted"我第七-------------')
  },
  /*grandson的打印代码*/
   created () {
    console.log('~~~~~~~~~~~~~"grandson created"我第五~~~~~~~~~~~~~')
  }
  beforeMount () {
    console.log('~~~~~~~~~~~"grandson beforemounted"我第六~~~~~~~~~')
  },
  mounted () {
    console.log('~~~~~~~~~~~~"grandson mounted"我第八~~~~~~~~~~~~~~')
  }

执行顺序：

第一圈：先执行父组件的created和beforemount函数；created和beforeMount再按子组件的使用顺序执行，

第二圈：折回去执行mounted，先子后父！

结论：

父组件准备挂载还没挂载时，子组件先完成挂载；

最后父组件再挂载！

2.父子组件更新生命周期

/*parents的销毁代码*/
  beforeDestroy () {
    console.log('============"parents beforDestroy"我第一=======')
  },
  destroyed () {
    console.log('============"parents destroyed"我第四==========')
  },
  /*child的销毁代码*/
  beforeDestroy () {
    console.log('------------"child beforDestroy"我第二-------')
  },
  destroyed () {
    console.log('------------"child destroyed"我第三-----------')
  },

执行顺序：

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

3.父子组件销毁生命周期

/*parents的销毁代码*/
  beforeDestroy () {
    console.log('============"parents beforDestroy"我第一=======')
  },
  destroyed () {
    console.log('============"parents destroyed"我第四==========')
  },
  /*child的销毁代码*/
  beforeDestroy () {
    console.log('------------"child beforDestroy"我第二-------')
  },
  destroyed () {
    console.log('------------"child destroyed"我第三-----------')
  },

执行顺序：

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed