【Vue】生命周期一文详解

在Vue.js中，组件的生命周期指的是组件从创建到销毁过程中的各个阶段。Vue为我们提供了一系列的钩子函数（hook functions），这些函数在特定的生命周期阶段被自动调用。

下面是Vue 2.x中常用的生命周期钩子：

1. beforeCreate：在实例初始化之后，数据观测(data observer)和事件/watcher 设置之前被调用。
2. created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
3. beforeMount：在挂载开始之前被调用。相关的render函数首次被调用。
4. mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用。
5. beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
6. updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

下面是一个简单的Vue组件生命周期的例子：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 组件实例被创建之前');
  },
  created() {
    console.log('created: 组件实例创建完成');
  },
  beforeMount() {
    console.log('beforeMount: 组件挂载之前');
  },
  mounted() {
    console.log('mounted: 组件挂载完成');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 组件更新之前');
  },
  updated() {
    console.log('updated: 组件更新完成');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 组件销毁之前');
  },
  destroyed() {
    console.log('destroyed: 组件销毁完成');
  }
};
</script>

在这个例子中，每个生命周期钩子都打印了一条消息到控制台。当你创建和销毁这个组件的时候，你会看到这些消息。这有助于理解组件的创建、渲染、更新和销毁过程。