面试题：Vue 的生命周期总共有哪几个阶段？

Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程。在这个过程中，Vue 提供了一系列的生命周期钩子函数，允许开发者在不同的阶段执行自定义逻辑。Vue 的生命周期可以分为以下 8 个阶段，每个阶段对应一个或多个钩子函数：

1. 创建阶段（Creation）

在这个阶段，Vue 实例被创建并初始化。

（1）`beforeCreate`

触发时机：在实例初始化之后，数据观测（data observer）和事件/侦听器配置之前被调用。
特点：
- 此时实例的 data、methods、computed 等还未初始化。
- 通常用于插件开发或初始化非响应式数据。

（2）`created`

触发时机：在实例创建完成后被调用。
特点：
- 此时实例的 data、methods、computed 等已经初始化。
- 可以访问数据和方法，但 DOM 还未生成，无法操作 DOM。
- 适合发起异步请求或初始化数据。

2. 挂载阶段（Mounting）

在这个阶段，Vue 实例的模板被编译并挂载到 DOM 中。

（3）`beforeMount`

触发时机：在挂载开始之前被调用。
特点：
- 此时模板已经编译完成，但还未将模板渲染到 DOM 中。
- 很少使用，除非需要操作编译前的 DOM。

（4）`mounted`

触发时机：在实例挂载到 DOM 后被调用。
特点：
- 此时 DOM 已经渲染完成，可以操作 DOM。
- 适合执行依赖 DOM 的操作，如初始化第三方库。

3. 更新阶段（Updating）

在这个阶段，Vue 实例的数据发生变化，导致 DOM 重新渲染。

（5）`beforeUpdate`

触发时机：在数据更新之前被调用，此时 DOM 还未重新渲染。
特点：
- 适合在更新之前访问现有的 DOM 状态。

（6）`updated`

触发时机：在数据更新导致 DOM 重新渲染后被调用。
特点：
- 此时 DOM 已经更新，可以执行依赖新 DOM 的操作。
- 注意避免在此钩子中修改数据，否则可能导致无限更新循环。

4. 销毁阶段（Destruction）

在这个阶段，Vue 实例被销毁。

（7）`beforeDestroy`

触发时机：在实例销毁之前被调用。
特点：
- 此时实例仍然完全可用，可以执行清理操作，如清除定时器、取消事件监听等。

（8）`destroyed`

触发时机：在实例销毁之后被调用。
特点：
- 此时实例的所有指令和事件监听器已被移除，子实例也被销毁。
- 适合执行最终的清理操作。

生命周期图示

以下是 Vue 生命周期的流程图：

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

完整的生命周期钩子示例

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: 实例销毁完成');
  }
};