Vue2的生命周期有哪些？

Vue2 的生命周期涵盖了从创建、挂载、更新到销毁的整个过程，期间包含多个钩子函数。以下是主要的生命周期钩子及其执行顺序：

生命周期流程图

创建实例 -> beforeCreate -> 初始化 data/methods -> created
↓
判断是否有 template 选项
↓
编译模板 -> beforeMount -> 挂载 DOM -> mounted
↓
数据更新 -> beforeUpdate -> 重新渲染 DOM -> updated
↓
销毁实例 -> beforeDestroy -> 销毁所有子实例、事件监听器 -> destroyed

1. 创建阶段（实例初始化）

• beforeCreate：实例初始化后，数据观测和 event/watcher 事件配置之前被调用。此时 data 和 methods 尚未初始化，无法访问。
• created：实例已经创建完成之后被调用。此时 data 和 methods 已可用，但模板编译尚未开始，$el 不可用。

2. 挂载阶段（DOM 插入）

• beforeMount：模板编译 / 挂载之前调用。此时 $el 已生成但未挂载到页面。
• mounted：模板编译 / 挂载完成后调用。此时 $el 已挂载到页面，可以访问 DOM 元素。常用于初始化操作（如 API 请求、DOM 操作）。

3. 更新阶段（数据变化）

• beforeUpdate：数据更新时，DOM 重新渲染之前调用。此时数据已更新，但 DOM 尚未更新。
• updated：数据更新后，DOM 重新渲染完成后调用。此时数据和 DOM 都已更新。注意避免在此钩子中修改数据，可能导致无限循环。

4. 销毁阶段（实例销毁）

• beforeDestroy（Vue3 中改为 beforeUnmount）：实例销毁之前调用。此时实例仍然完全可用，常用于清理定时器、事件监听器等。
• destroyed（Vue3 中改为 unmounted）：实例销毁后调用。所有事件监听器和子实例已被销毁。

5. 特殊钩子

• activated（组件）：keep-alive 缓存的组件被激活时调用。
• deactivated（组件）：keep-alive 缓存的组件被停用时调用。
• errorCaptured（2.5.0+）：捕获子孙组件的错误时调用。

示例代码（展示钩子使用场景）

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  beforeCreate() {
    console.log('实例初始化，但 data 和 methods 不可用');
  },
  created() {
    console.log('实例已经创建完成');
  },
  mounted() {
    // 常用于数据初始化或API请求
    this.fetchData();
  },
  beforeUpdate() {
    console.log('数据更新，但DOM尚未更新');
  },
  updated() {
    console.log('数据和DOM都已更新');
  },
  beforeDestroy() {
    // 清理工作：移除事件监听器、定时器等
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    fetchData() {
      // 模拟API请求
    }
  }
}

官方流程图

Vue3的生命周期有哪些？