目录

前言：

一、生命周期流程图详解

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。

展示代码：

<template>
  <div>
    <div class="label-head">
      <label>生命周期详解</label>
    </div>
    <div :data="count">{
  {count}}</div>
    <p>
      <button @click="add">添加</button>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: "",
      filter: "all",
      states: ["all", "active", "completed"]
    };
  },
  methods: {
    add() {
      this.count++;
    }
  },
  beforeCreate() {
    console.log("=========" + "beforeCreated:初始化之前" + "======");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  created() {
    console.log("==========" + "created：创建完成" + "===========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeMount() {
    console.log("==========" + "beforeMount：挂载之前" + "=======");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  mounted() {
    console.log("==========" + "mounted：被挂载之后" + "==========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeUpdate() {
    console.log("========" + "beforeUpdate：数据更新前" + "========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  updated() {
    console.log("========" + "updated：被更新之后" + "============");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeDestroy() {
    console.log("=========" + "beforeDestroy：销毁之前" + "========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  destroyed() {
    console.log("==========" + "destroyed：销毁之后" + "===========");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  activated() {
    console.log("");
  },
  deactivated() {
    console.log("");
  }
};
</script>
<style scoped>
.label-head {
  text-align: center;
  font-size: 40px;
}
</style>

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

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