Vue生命周期详解

什么是Vue的生命周期

先看一看官方文档对Vue生命周期的说明：

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

简单来说就是Vue实例和组件在被创建的时候所经历的过程，Vue通过生命周期钩子将这些过程暴露出来，方便开发者针对组件的状态做出编码

Vue生命周期的顺序

beforeCreate->created->beforeMount->mounted->beforeDestroy->destroyed
下面用代码展示一下：
子组件用来显示生命周期：

<template>
  <div>
    {{msg}}
    <button @click="msg='组件更新了'">更新组件内容</button>
  </div>

</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      msg:"测试"
    }
  },
  beforeCreate() {
    console.log("组件创建前-beforeCreate")
  },
  created() {
    console.log("组件创建后-created")
  },
  beforeMount() {
    console.log("组件挂载前-beforeMount")
  },
  mounted() {
    console.log("组件挂载完成-mounted")
  },
  beforeDestroy() {
    console.log("组件销毁前-beforeDestroy")
  },
  destroyed() {
    console.log("组件销毁-destroyed")
  },
  beforeUpdate() {
    console.log("组件更新前-beforeUpdate")
  },
  updated() {
    console.log("组件更新后-updated")
  }
}
</script>

父组件用来销毁子组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <button @click="deleteZ()">销毁组件</button>
    <HelloWorld v-if="helloShow" msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data(){
    return {
      helloShow:true
    }
  },
  methods:{
    deleteZ(){
      this.helloShow = !this.helloShow;
    }
  }
}
</script>

项目启动之后如图：

控制台打印如下：

可以看到一共触发了4个生命周期，beforeCreate, created,beforeMount,mounted

点击更新组件内容按钮之后：

可以看到控制台又打印了两条记录，触发了组件的beforeUpdate,updated
最后点击销毁组件按钮：

可以看到触发了销毁的生命周期，至此，Vue的8个生命周期全部跑完，下面将对每个生命周期进行详细分析

Vue生命周期详解

1.beforeCreate

作为Vue实例创建过程中的第一个生命周期，它到底有什么用那？还记得有次面试，面试官问我，“这个boforeCreate有什么用那？” 我想了想，就说“没有什么用啊”，然后就没有然后了，所以我特地去查了查，发现确实并没有什么卵用，可能是太菜了吧，如果有大佬读到这篇文章，还望评论告诉我一下它到底有啥用！

我们还是看看这个生命周期钩子可以访问到实例的那些内容吧！
修改刚才写的beforeCreate生命周期钩子函数：

  beforeCreate() {
    console.log("组件创建前-beforeCreate")
    console.log(this);
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.msg);
  }

运行效果：

可以看到在beforeCreate中只能访问到this，也就是Vue实例，data和DOM都不能拿到，所以不能去修改data和操作DOM，如果非要去操作，可以用$nextTick等DOM渲染完成之后操作

2.created

继续修改代码：

  created() {
    console.log("组件创建后-created")
    console.log(this);
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.msg);
  }

我们看一看控制台打印：

可以看到在这个生命周期钩子中已经可以访问到data中定义的数据，可以进行初始数据的获取，在这里更改数据不会触发beforeUpdate,updated两个生命周期钩子（同步的情况下），异步更改data数据就要看走起是否已经走到mounted生命周期了，如果走到mounted生命周期，就会触发更新

3.beforeMount

接着修改代码：

  beforeMount() {
    console.log("组件挂载前-beforeMount");
    console.log(this);
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.msg);
  }

从控制台的打印来看，似乎和created生命周期打印的东西差不多？╮(￣▽￣)╭，其实不然，在这个生命周期钩子触发的时候，虚拟DOM已经创建完成，马上就要渲染了，在这里更改数据依然不会触发更新的生命周期，情况和created一样

4.mounted

我们再来看一看mounted生命周期：

  mounted() {
    console.log("组件挂载完成-mounted")
    console.log(this);
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.msg);
  }

控制台打印：

可以看到在mounted生命周期钩子触发的时候，真实的DOM已经渲染完成，组件已经完全渲染完成，在此处更改data就会触发更新

5.beforeUpdate和updated

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。切记，千万不要在beforeUpdate和updated钩子函数中更改data的数据，否则会进入死循环！

6.beforeDestroy和destroyed

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。可以用来清除一些定时器，或者做一些状态的保存
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。也就是说这个组件木得了

至此，Vue的生命周期钩子已经说了一遍了，仅代表个人理解，有理解的不对的地方欢迎各位大佬指正，下面放上完整代码

<template>
  <div id="msg">
    {{msg}}
    <button @click="msg='组件更新了'">更新组件内容</button>
  </div>

</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      msg:"测试"
    }
  },
  beforeCreate() {
    console.log("组件创建前-beforeCreate")
    console.log(this);
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.msg);
  },
  created() {
    console.log("组件创建后-created")
    console.log(this);
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.msg);
    //this.msg="test"
    // setTimeout( () => {
    //   this.msg = "test2"
    // },1000)
  },
  beforeMount() {
    console.log("组件挂载前-beforeMount");
    console.log(this);
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.msg);
  },
  mounted() {
    console.log("组件挂载完成-mounted")
    console.log(this);
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.msg);
  },
  beforeDestroy() {
    console.log("组件销毁前-beforeDestroy")
  },
  destroyed() {
    console.log("组件销毁-destroyed")
  },
  beforeUpdate() {
    console.log("组件更新前-beforeUpdate")
  },
  updated() {
    console.log("组件更新后-updated")
  }
}
</script>

再放上生命周期图示